我们每次修改代码之后，如果想要在浏览器中看到变化，都先要手动编译代码，这样未免有些麻烦
在 webpack 中，配置某些选项可以帮助我们在代码发生变化之后自动编译代码
1、存在问题
首先我们搭建一个简单的项目，感受一下在不使用自动编译之前项目开发的状态
创建一个空文件夹 Demo，作为项目的根目录，在该目录下运行如下命令安装项目所需依赖
> # 创建 package.json 文件
> npm init -y
> # 安装 webpack
> npm install --save-dev webpack
> npm install --save-dev webpack-cli
> # 安装 lodash
> npm install --save lodash
然后我们在根目录下创建 dist 和 src 目录，并在相应的目录下创建相应的文件，最终的目录结构如下
Demo
- package.json
- package-lock.json
- webpack.config.js
+ node_modules
+ src
- index.js
+ dist
- index.html
webpack.config.js 文件内容，指定 webpack 的一些基本配置
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
}
};
package.json 文件内容，添加打包命令 npm run build
{
"name": "Demo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo "Error: no test specified" && exit 1",
"build": "webpack --config webpack.config.js"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^4.39.2",
"webpack-cli": "^3.3.7"
},
"dependencies": {
"lodash": "^4.17.15"
}
}
/dist/index.html 文件内容，引入打包之后的 bundle.js文件
<!doctype html>
<html>
<head>
<title>Demo</title>
</head>
<body>
<script src="bundle.js"></script>
</body>
</html>
/src/index.js 文件内容，创建一个 div，并将其作为 body 的子节点
import _ from 'lodash';
function component() {
var element = document.createElement('div');
element.innerHTML = _.join(['Hello', 'webpack'], ' ');
return element;
}
document.body.appendChild(component());
至此，一个粗糙的 Demo 就搭建完成啦，运行构建命令即可完成打包
> npm run build
这时用浏览器打开 /dist/index.html 文件，应该可以看到 Hello webpack 的文字
好了，现在假如我们要对项目作一点小小的修改，让屏幕上显示的文字变成 Hello World
很简单，对吧！只需要修改 /src/index.js 文件的一点内容就行
import _ from 'lodash';
function component() {
var element = document.createElement('div');
// 将 webpack 改成 World 就好
element.innerHTML = _.join(['Hello', 'World'], ' ');
return element;
}
document.body.appendChild(component());
但是，这时候我们又要重新运行构建命令 npm run build 才能使改动生效
这样很不方便，特别是对于前端的代码，有时候的确需要反反复复修改和编译十几次乃至几十次
2、解决问题
那么，有没有一种方法可以使改动之后的代码（ 保存之后 ）自动编译呢？答案是肯定的
webpack 中有两种常见的方法实现这种效果
（1）watch mode
第一种方法是使用 watch mode，顾名思义，就是可以在观察到代码发生变化之后自动编译代码
我们可以通过 webpack 的命令行参数 --watch 指定使用，这样当代码发生变化后，webpack 将会自动编译
> npx webpack --config webpack.config.js --watch
或者我们可以加上 npm script 脚本，方便以后使用，修改 package.json 文件如下
{
"name": "Demo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo "Error: no test specified" && exit 1",
"build": "webpack --config webpack.config.js",
"watch": "npx webpack --config webpack.config.js --watch"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^4.39.2",
"webpack-cli": "^3.3.7"
},
"dependencies": {
"lodash": "^4.17.15"
}
}
好，开启观察模式
> npm run watch
现在修改代码，保存文件，刷新浏览器，应该就能看到修改之后的效果啦，唯一的缺点就是浏览器不会自动刷新
（2）webpack-dev-server
第二种方法是使用 webpack-dev-server，提供一个简单的 web 服务器，实时加载
首先，我们安装一下模块
> npm install --save-dev webpack-dev-server
然后在 webpack.config.js 文件写下相关配置
告诉 server 应该在 localhost:8080 下建立服务，然后将 dist 目录下的文件设置为可访问
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
// 开启开发服务器
devServer: {
contentBase: './dist'
}
};
也是添加一个 npm script 脚本，方便以后使用，修改 package.json 文件如下
{
"name": "Demo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo "Error: no test specified" && exit 1",
"build": "webpack --config webpack.config.js",
"watch": "webpack --config webpack.config.js --watch",
"start": "webpack-dev-server --open"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^4.39.2",
"webpack-cli": "^3.3.7"
},
"dependencies": {
"lodash": "^4.17.15"
}
}
好，现在开启开发服务器
> npm start
之后修改代码，保存文件，应该能够看到浏览器自动刷新，并且展示修改之后的结果
【 阅读更多 webpack 系列文章，请看 webpack学习笔记 】