Webpack轻松入门（五）——自动刷新

我在之前文章Webpack轻松入门（二）——CSS打包中提到过Webpack中的自动打包功能，很简单，在webpack.config.js中添加 watch: true 配置，打包一次之后每次代码更新后都会自动进行打包而无需重复输入命令行。

当然，我们也可以直接给package.json中的scripts添加相关配置，而无需更改webpack.config.js。

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack --watch"
}

换句话说，package.json中的webpack --watch与webpack.config.js中的watch: true效果相同。

实际上，Webpack还提供了一个比watch更方便的功能，它不仅可以实现自动打包，还具有自动打开浏览器和自动刷新页面的功能，可以说给我们这帮懒人服务到了极致，哈哈。

下面我们就来看看具体如何实现这样的功能。

1. 安装webpack-dev-server

npm i -D webpack-dev-server

2. package.json中的scripts添加相关配置

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack",
    "dev": "webpack-dev-server --open"
}

其中 --open 就代表打开默认浏览器。

3. 输入命令行进行打包

npm run dev

打包结束后你会发现浏览器自动打开，并且正确显示打包后的页面。

4. 更改任意代码

我们可以试着在index.js中添加以下代码：

var module = require('./module.js');

alert(module.text);

module.js：

var text = 'Hello Webpack!';

module.exports = {
    text: text
};

保存后你会发现浏览器自动刷新并弹出弹框“Hello Webpack!”。

值得注意的是，通过webpack-dev-server打包后的代码并不会进入dist目录，而是直接创建一个开发服务器，并运行打包后的代码。因此，通常我们会将Webpack打包分为两种模式：开发模式和生产模式。

开发模式顾名思义就是给我们开发时候用的，这时候我们就可以用上webpack-dev-server，从代码自动打包到自动开启浏览器再到自动刷新全部自动化，提高了工作效率；生产模式顾名思义就是最终代码上线时候用的，这时候我们就只需使用其最基础的打包功能，最终打包后的代码会进入dist目录，我们只需要将其上传服务器即可。

本文重点总结

① 使用 webpack-dev-server 可自动创建开发服务器，实现代码从自动打包到自动刷新页面的自动化开发模式
② Webpack有两种打包模式：开发模式和生产模式，开发模式下可使用 webpack-dev-server 提高开发效率