构建工具03 Webpack模块热重载(HMR)

使用webpack-dev-server 实现的Hot Moudle Replacement（HMR）让我们在开发时修改代码并保存后，不必手动刷新浏览器，而是让浏览器通过新的模块替换老的模块。这样可以让我们在保证当前页面状态的前提下，让新的代码生效，就如同在Chrome的控制台修改CSS样式一样。

使用

安装webpack-dev-server

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

在webpack.config.js中进行配置

devServer: {
  contentBase: path.resolve(__dirname, 'dist'),
  host: 'localhost',
  compress: true,
  port: 8080
}

其中：

• contentBase：服务器基本运行路径
• host：服务器运行地址
• compress：服务器压缩式，一般为true
• port：服务运行端口

在package.json中定义相关命令：

"scripts": {
  "dev": "webpack-dev-server --hot --open",
},

然后执行npm run dev就可以开启webpack的服务，并且实现模块热重载，并且自动打开浏览器。

增加--open属性可以自动打开浏览器。

原理解析

原来只是在各种Cli工具中使用了模块热重载，知道是利用了Webpack的HMR特性，但是它是怎么实现的却不了解。今天在清理收藏夹攒的知识时看到了饿了么前端专栏的这篇文章Webpack HMR 原理解析，写的非常好，简单易懂，把道理也说的很明白。

上图展示了从修改代码到模块热更新完成的一个周期：

第一步：Webpack在watch模式下打包更改的文件到内存中（对应图中的①②③）

Webpack-dev-middleware调用Webpack的API对文件系统watch，监听到文件变化时，根据配置文件对模块重新编译打包，将打包后的代码以JavaScript对象的形式保存在内存中。