我们每次修改代码之后，如果想要在浏览器中看到变化，都先要手动编译代码，这样未免有些麻烦
在 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
{ "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
之后修改代码，保存文件，应该能够看到浏览器自动刷新，并且展示修改之后的结果
