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

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

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

1. 安装webpack-dev-server

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

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

3. 输入命令行进行打包

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

4. 更改任意代码

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

module.js：

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

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

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

本文重点总结

① 使用webpack-dev-server可自动创建开发服务器，实现代码从自动打包到自动刷新页面的自动化开发模式

② Webpack有两种打包模式：开发模式和生产模式，开发模式下可使用webpack-dev-server提高开发效率