【webpack5修行之道】第7篇：性能优化-HMR_webpack5 自带hmr-优快云博客

本文链接：https://blog.youkuaiyun.com/j178202798/article/details/117290563

本文探讨了webpack的Hot Module Replacement (HMR) 功能，旨在优化开发过程中的性能。通过设置devServer的hot选项，可以实现模块的热加载，避免全页面刷新。当修改js和css文件时，仅更新对应的模块，减少了编译时间。style-loader已内置了css的HMR配置。由于html作为入口文件，修改会导致所有模块刷新，因此html无需HMR。下一篇文章将讨论sourcemap在性能优化中的作用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

上一篇：【webpack5修行之道】第6篇：webpack对js兼容性处理

HMR

Hot Module Replacement 简称HMR，我们可以把他叫作模块热加载、热模块加载等

webpack.config.js

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

process.env.NODE_ENV = 'development'
module.exports = {
  mode: 'development',
  entry: './src/index.js',
  output: {
    path: resolve(__dirname, 'build'),
    filename: 'js/[name].[hash:10].js'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'eslint-loader',
        enforce: 'pre',
        options: {
          fix: true
        }
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },
      {
        test: /\.less$/,
        use: ['style-loader', 'css-loader', 'less-loader']
      },
      {
        test: /\.(png|jpg|jpeg|gif|bmp)$/,
        loader: 'url-loader',
        options: {
          limit: 8 * 1024,
          name: '[hash:10].[ext]',
          outputPath: 'imgs'
        }
      },
      {
        test: /\.html$/,
        loader: 'html-loader',
        options: {
          esModule: false
        }
      },
      {
        exclude: /\.(css|js|html|json|less|png|jpg|gif)$/,
        loader: 'file-loader',
        options: {
          name: 'media/[hash:9].[ext]'
        }
      }

    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: resolve(__dirname, './index.html')
    })
  ],
  devServer: {
    port: 8282,
    open: true
  },

运行启动 webpack-dev-server命令: npm run dev

创建math.js

export function add (x, y) {
  return x + y + 3
}
export function say () {
  console.log('您好')
}

将math.js引入index.js

import './index.css'
import { say } from './math'

console.log('hello webpack')
say()

这个时候修改math.js里的say方法，保存代码，浏览器会自动刷新，

查看控制台，

这个时候，我们发现，我只是修改了一个模块的东西，所有的代码全部重新渲染，如果将来模块很多的话，全部重新渲染，这个开销很大，代码多了以后编译肯定会变慢

为了解决这个问题，我们需要修改webpack.config.js，在devServer中添加hot: true

修改了webpack.config.js以后，我们需要重新启动项目

可以看到HMR开启成功了，就这？难道这么简单就成功了？

那我们去修改math.js 将say的打印改一下

就在我们保存的时候，浏览器又刷新了

很遗憾，又看到hello webpack的输出了

修改index.js

好了，这个时候我们再去修改say方法，将打印改为console.log('12345678')，保存代码，浏览器的控制台已经打印了

这个时候修改了math.js就只重新渲染了math.js了

既然js能hmr，那么css呢？

我们将box1的宽度从100px改为120px，保存代码，控制台又自动刷新了

同样没有刷新其他模块，css单一的刷新了。为什么没有像js一样写代码去控制呢？

这个是因为style-loader已经做好了hmr的配置

js和css都支持了hmr，那么html呢？

其实html是不需要做hmr的，因为属于入口文件，正如index.js一样，修改index.js里的代码，所有的模块都会刷新的

下一篇：【webpack5修行之道】第8篇：性能优化-sourcemap