webpack实践(5)-- 模块热替换

模块热替换(HMR)

这个功能允许在运行时更新所有类型的模块，而不是完全刷新。但是HMR不适合生产环境，也就是说它更加多的应用于开发环境。

启用HMR

我想要启用HMR首先要做的就是更新webpack-dev-server,然后在webpack内置HMR的插件，还要删掉print的入口奇点，因为现在已经在index.js模块中引用了。

webpack.config.js

也可以通过命令来进行上述的修改 webpack-dev-server --hotOnly。
现在修改index.js文件，当print.js内部发生变更的时候，告诉webpack接受模块的变更

index.js

HMR加载样式

我们先对webpack的配置文件进行修改,让我们的项目可以进行样式的加载：

webpack.config.js

在项目中添加一个index.less的代码。我们看一下现在的项目目录：

项目目录 index.css

现在我们使用npm start进行项目的启动，我们发现现在我更新颜色，点击保存，网页上的颜色就自动的修改了。