webpack前端工程化构建工具的使用

时间 2019-12-01

标签 webpack 前端工程构建工具使用繁體版

原文原文链接

一.模块打包机html

1.建立文件webpack

　　在目标文件下创建一个src文件夹做为js代码区；做为例子，我建立了两个js文件，并利用commonJS规范require引入到index.js中；web

moduleA.js:chrome

module.exports={
    name:"MoudleA",
    getName:function(){
        return "我是AAA模块"
    }
}

moduleB.js:npm

module.exports={
    name:"MoudleB",
    getName:function(){
        return "我是BBB模块"
    }
}

index.js:json

var moduleA = require("./moduleA");
var moduleB = require("./moduleB");
console.log(moduleA.name);
console.log(moduleB.name);

index.html:浏览器

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
</head>
<body>
    <div></div>
<script src="src/index.js"></script>
<!--     <script src="dist/index.bundle.js"></script> -->
</body>
</html>

此时运行一定会出错。由于浏览器不认识require,浏览器不支持什么commonJS,因此这时候须要用到webpack。webpack-dev-server

2.安装webpackui

npm install -g webpack  //全局安装

3.打包spa

webpack  src/index.js  ./build.js

把index.js打包成build.js，因此index.html的script路径要改成新的打包后的文件路径。

<script src="build.js"></script>

此时再执行webpack src/index.js ./build.js成功则会生成一个build.js文件。

4.简化打包指令

咱们前面在更改代码时须要屡次执行webpack src/index.js ./build.js命令，那么如何简化这条命令，换句话说，可不能够用webpack这个指令来代替这一长串呢？固然是能够的。

首先，配置webpack.config.js文件；

这里的输出文件夹dist若是不存在会自动帮咱们建立好。配置好入口和输出路径后别忘记改index.html的script路径。

须要注意的是，咱们如今只是全局安装了webpack,这是不够的，咱们须要局部再安装一次webpack,npm install --save-dev webpack

而后咱们再执行webpack命令。

4.热更新webpack-dev-server

咱们在每次修改代码的时候都须要手动的执行webpack命令，咱们能够用热更新webpack-dev-server自动的更新浏览器；

安装webpack-dev-server

npm install --save-dev webpack-dev-server

在webpack.config.js里面配置devServer

此时执行

webpack-dev-server --inline --hot

便能实现热更新了。还有更简化的，即是配置package.json的启动，

这里增长一条 "start":"webpack && webpack-dev-server --inline --hot" 便实现了npm start 代替webpack和webpack-dev-server --inline --hot命令

执行

npm start

打开浏览器8088端口，