webpack v4.30.0（4）官方说明文档（模块热替换）

模块热替换(Hot Module Replacement 或 HMR)是 webpack 提供的最有用的功能之一。它允许在运行时更新各种模块，而无需进行完全刷新。本页面重点介绍实现，而概念页面提供了更多关于它的工作原理以及为什么它有用的细节。

第一篇文章：

webpack v4.30.0官方说明文档指南、安装、起步资源管理教程源码：http://www.dianthink.com/article/detail/id/280.html

第二篇文章：

webpack v4.30.0（2）官方说明文档（管理输出）测试源码：http://www.dianthink.com/article/detail/id/281.html

第三篇文章：

webpack v4.30.0（3）官方说明文档（开发）：http://www.dianthink.com/article/detail/id/282.html

（一）、模块热替换

（1）、启用 HMR
（2）、通过 Node.js API
（3）、问题
（4）、HMR 修改样式表
（5）、其他代码和框架

（二），五步中各步骤操作练习

（1）、启用HMR

启用此功能实际上相当简单。而我们要做的，就是更新 webpack-dev-server 的配置，和使用 webpack 内置的 HMR 插件。我们还要删除掉 print.js 的入口起点，因为它现在正被 index.js 模块使用。

依照文档修改：webpack.config.js 中的代码。

注意，我们还添加了 NamedModulesPlugin，以便更容易查看要修补(patch)的依赖。在起步阶段，我们将通过在命令行中运行 npm start 来启动并运行 dev server。

现在，我们来修改 index.js 文件，以便当 print.js 内部发生变更时可以告诉 webpack 接受更新的模块。

更改 print.js 中 console.log 的输出内容，你将会在浏览器中看到输出。

（2）、通过 Node.js API

当使用 webpack dev server 和 Node.js API 时，不要将 dev server 选项放在 webpack 配置对象(webpack config object)中。而是，在创建选项时，将其作为第二个参数传递。例如：
new WebpackDevServer(compiler, options)
想要启用 HMR，还需要修改 webpack 配置对象，使其包含 HMR 入口起点。webpack-dev-server package 中具有一个叫做 addDevServerEntrypoints 的方法，你可以通过使用这个方法来实现。这是关于如何使用的一个小例子（此例子没有进行练习，跳过）直达（3）

（3）、问题

模块热替换可能比较难掌握。为了说明这一点，我们回到刚才的示例中。如果你继续点击示例页面上的按钮，你会发现控制台仍在打印这旧的 printMe 功能。
这是因为按钮的 onclick 事件仍然绑定在旧的 printMe 函数上。
为了让它与 HMR 正常工作，我们需要使用 module.hot.accept 更新绑定到新的 printMe 函数上：
（依照文档修改）index.js

这只是一个例子，但还有很多其他地方可以轻松地让人犯错。幸运的是，存在很多 loader（其中一些在下面提到），使得模块热替换的过程变得更容易。

（4）、HMR 修改样式表

借助于 style-loader 的帮助，CSS 的模块热替换实际上是相当简单的。当更新 CSS 依赖模块时，此 loader 在后台使用 module.hot.accept 来修补(patch)标签。
所以，可以使用以下命令安装两个 loader ：
npm install --save-dev style-loader css-loader
接下来我们来更新 webpack 的配置，让这两个 loader 生效。
修改配置文件（依照文档）：webpack.config.js

热加载样式表，与将其导入模块一样简单：

新增（依照文档练习）：styles.css 添加内容为：body { background: blue; }。

修改：index.js 文件，并导入。

此时：终端下：npm start，此时浏览器打开，背景颜色为蓝色，现在修改styles.css background:red;背景变红色，如下图；