webpack热替换失效问题

（一）使用 webpack-dev-server

webpack-dev-server 为我们提供了一个简单的 web 服务器，并且能够实时重新加载(live reloading)。

webpack.config.js

package.json

现在，我们可以在命令行中运行 npm start，就会看到浏览器自动加载页面。如果现在修改和保存任意源文件，web 服务器就会自动重新加载编译后的代码。试一下！

（二）启用 HMR

       模块热替换(Hot Module Replacement 或 HMR)是 webpack 提供的最有用的功能之一。它允许在运行时更新各种模块，而无需进行完全刷新。

webpack.config.js

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

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

index.js

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

print.js

console

为了说明这一点，我们回到刚才的示例中。如果你继续点击示例页面上的按钮，你会发现控制台仍在打印这旧的 printMe 功能。这是因为按钮的 onclick 事件仍然绑定在旧的 printMe 函数上。为了让它与 HMR 正常工作，我们需要使用 module.hot.accept 更新绑定到新的 printMe 函数上：

index.js

这时候我们再对 print.js文件做出改变，点击渲染后的页面上的按钮，你会发现浏览器又可以实现自动加载页面。