Webpack系列——热模块更新HRM

热模块更新HRM(Hot Module Replacement)

运行 npm run start，此时，我们尝试对文件进行修改，然后回到页面，你会发现终端内 webpack 帮我们重新编译了代码，然后它会自动刷新，刷新后的页面被重置，之前在页面上的操作不见了，又要重新开始。

我们想要的效果是，当文件修改重新编译后，页面不要全部刷新，只是响应发生变化的那一部分。这时候就要用到 HMR，热模块替换。

注意：HMR 相当于 dev Server 的辅助，同样只用在开发环境，不要用在生产环境中！！！

• 在 devServer 配置后，添加 hot 和 hotOnly，意思是开启 HMR

• 在 plugins 配置后，添加 HMR 插件。（它是 webpack 内置的，记得要在最上面引入一下 webpack）

webpack.config.js

const webpack = require('webpack');
​
module.exports = {
  // ...
  devServer: {
    contentBase: path.join(__dirname, 'dist'), // 指定被访