webpack配置-升级版热更新HMR

本篇文章是devServer的升级版

在上篇文章中简单的配置了下热更新，用于了解的，本篇文章解决热更新的性能优化问题。

1.简单介绍下HMR

HMR（hot module replacement）热模块替换/模块热替换，在上篇devServer中存在着性能问题，它的热更新是更新全部的模块，意思是修改一个模块，全部模块就会全部重新加载，模块少没有什么大问题，在做项目时模块过多会导致加载时间过长影响效率。而HMR就可以解决这个问题，它的作用是一个模块发生变化，只会重新打包这一个模块，而不是打包所有模块，极大的提升了构建速度。

2.配置HMR

在webpack.config.js文件中的devServer属性中增加hot: true
在配置hot: true时，如果出现Uncaught Error: [HMR] Hot Module Replacement is disabled.错误，说明需要安装HotModuleReplacementPlugin插件。在plugins属性中加入new webpack.HotModuleReplacementPlugin()就可以了。
但是，我没有搞清楚，我的webpack没有安装该插件也是可以正常运行的。小伙伴们可以测试下哈。。。

  devServer: {
    contentBase: resolve(__dirname, 'bundle'),
    compress: true,
    port: 3000,
    open: true,
    hot: true,  // 启用HMR模块
  }

---

样式文件可以直接使用HMR功能，因为style-loader内部实现了module.hot.accept的支持

---

html模板文件默认不支持HMR，直接在入口文件将html文件引入就可以了

entry: ['./src/index.js', './src/index.html']

---

js文件不可以，需要配置module.hot.accept，配置请看入口js文件

index.js中配置

if(module.hot) {
  module.hot.accept(["./replace.js"], () => {
    replace();
  })
}

3.文件展示

入口文件：index.js

import './css.css'
import replace from './replace.js'

console.log("我是入口文件");


// 配置下面代码
if(module.hot) {
  // 一旦module.hot为true，说明开启了HMR功能  --> 就可以让HMR代码功能生效
  module.hot.accept(["./replace.js"], () => {
    // 该方法会监听 replace.js 文件的变化，一旦发生变化，只会重新打包构建这个模块
    replace();
  })

  // 当然了，也可关闭指定子模块的HMR
  // module.hot.decline('./replace.js')
}

replace.js子模块

function replace() {
  console.log("我是replace模块");
}

export default replace;

webpack.config.js配置文件

const { resolve } = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  entry: ['./src/index.js', './src/index.html'],
  output: {
    filename: 'bundle.js',
    path: resolve(__dirname, 'bundle')
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      },
      {
        test: /\.html$/,
        loader: 'html-loader'
      }
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    })
  ],
  mode: 'development',

  /* 
    HMR： hot module replacement 热模块替换/模块热替换
      作用：一个模块发生变化，只会重新打包这一个模块，而不是打包所有模块，极大的提升了构建速度

    样式文件可以直接使用HMR功能，因为style-loader内部实现了module.hot.accept的支持
    js文件不可以，需要配置module.hot.accept  配置请看入口js文件
    html模板文件默认也不支持HMR，直接在入口文件将html文件引入就可以了
  */
  devServer: {
    contentBase: resolve(__dirname, 'bundle'),
    compress: true,
    port: 3000,
    open: true,
    hot: true,  // 启用HMR模块
  }
}

4.结语

下篇文章是说说箭头函数还是关于webpack的source-map，为了能够更好的为小伙伴们说的详细，我要开始查阅资料了。。请叫我爱学习的好孩子🤭。。。。
我推荐小伙伴们使用谷歌浏览器进行查阅资料。使用百度的话可能还需要向下翻页查找，才能找到需要的信息。而谷歌基本上前2到3个标题就是你想要的信息。
文章中有什么问题。欢迎指正呦~~~