1.定义

HMR即HotModuleReplacement

开发时，当我们修改了其中一个模块的代码webpack默认会将所有模块重新打包编译，速度很慢所以我们需要做到修改摸个模块代码，只对这个模块的代码重新打包编译，其他模块不变，这样打包的速度就能变快

HotModuleReplacement（HMR/热模块替换）：在程序运行中，替换、添加或者删除模块，而无需重新加载整个页面

2.配置

在webpack.dev.js中添加配置

/**开发服务器 */
    devServer: {
        host: 'localhost',//启动服务器域名
        port: "3000",//启动服务器端口号
        open: true,//是否自动打开浏览器
        hot: true,//开启HMR功能（只能用于开发环境，生产环境不需要）
    },

然后执行命令

npx webpack serve --config ./config/webpack.dev.js

进行开发模式的运行

此时css文件已经可以实现HMR了，修改css文件保存，整个页面不会刷新，只会更新修改的模块。

此时控制台会打印出哪个模块进行了HMR

3.实现JS文件的HMR

对于JS文件webpack不会在配置后自动进行HMR，需要手动进行配置

在打包的入口文件中即main.js文件中对需要HMR的模块进行逐个的引入

添加如下代码

//添加JS热更新
if (module.hot) {
    console.log('支持热更新');
    //判断是否支持热更新
    module.hot.accept('./js/sum.js')
    module.hot.accept('./js/count.js')
}

 然后重新运行

修改count.js模块，在查看控制台，发现count.js已经可以进行HMR了。

 4.完整代码

webpack.dev.js

const path = require('path');//nodejs用来处理路径问题的模块
const ESLintPlugin = require('eslint-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const WebpackDevServer = require('webpack-dev-server');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const loader = require('sass-loader');
function getCssLoader(pre) {
    return [MiniCssExtractPlugin.loader, 'css-loader',
    {
        loader: 'postcss-loader',
        options: {
            postcssOptions: {
                plugins: [
                    'postcss-preset-env'
                ]
            }
        }
    }, pre
    ].filter(Boolean)
}
module.exports = {
    /**入口 */
    entry: './src/main.js',
    /**输出 相对路径*/
    output: {
        /**文件输出路径 绝对路径*/
        //__dirname 表示当前文件的文件夹目录
        path: undefined,//所有文件的输出目录
        /**文件名 */
        filename: 'static/js/dist.js',//入口文件输出文件名
        clean: true,//在打包前将path整个目录内容情况

    },
    /**加载器 */
    module: {
        rules: [
            //loader的配置
            {
                /**test 代表要检测的文件 */
                test: /\.css$/, //只检测.css文件
                use: getCssLoader() //对检测到文件使用哪些loader

            },
            {
                test: /\.less$/,//只检测.less文件
                //loader:'xxx',loader只能使用一个loader，use可以使用多个loader
                use: getCssLoader('less-loader'),//对检测到文件使用哪些loader
            },
            {
                test: /\.s[ac]ss$/,//只检测.sass文件
                use: getCssLoader('sass-loader'),
            },
            {
                test: /\.styl$/,//只检测.stylus文件
                use: getCssLoader('stylus-loader')
            },
            {
                test: /\.(png|jpe?g|gif|webp)$/,
                type: 'asset/resource',
                parser: {
                    dataUrlCondition: {
                        //小于10kb的图标转base64，减少请求数量
                        maxSize: 10 * 1024 // 10kb
                    }
                },
                generator: {
                    //输出图片名称
                    //[hash:10]hash值取前10位
                    filename: 'static/imgs/[hash:10][ext][query]'
                }
            },
            /**图标字体相关配置 */
            {
                test: /\.(ttf|woff2?|mp3|mp4|avi)$/,//只对ttf、woff2资源起作用
                type: 'asset/resource',//加上/resource表示将资源原封不动的打包出来
                generator: {
                    filename: "static/media/[hash][ext][query]"
                }
            },
            {
                test: /\.js$/,
                /**排除哪些文件 */
                exclude: /(node_modules)/,
                loader: 'babel-loader',
                // options: {
                //     presets: ['@babel/preset-env'],
                // },
            },
        ]
    },
    /**插件 */
    plugins: [
        //plugin配置
        new ESLintPlugin({
            /** 检测哪些文件 */
            context: path.resolve(__dirname, '../src')
        }),
        new HtmlWebpackPlugin({
            /**模板 */
            template: path.resolve(__dirname, '../src/public/index.html')
        }),
        new MiniCssExtractPlugin()
    ],
    /**开发服务器 */
    devServer: {
        host: 'localhost',//启动服务器域名
        port: "3000",//启动服务器端口号
        open: true,//是否自动打开浏览器
        hot: true,//开启HMR功能（只能用于开发环境，生产环境不需要）
    },
    /**模式 */
    mode: 'development',
    devtool: 'cheap-module-source-map'
}

 main.js

import sum from "./js/sum";
import count from "./js/count";
//要想webpack打包资源，必须引入该资源
import "./css/file.css"
import "./css/box.less"
import "./css/box2.scss"
import "./css/box3.styl"
import "../src/css/iconfont.css"
console.log(count(1, 2));
console.log(sum(1, 2, 3, 4, 5))
//添加JS热更新
if (module.hot) {
    console.log('支持热更新');
    //判断是否支持热更新
    module.hot.accept('./js/sum.js')
    module.hot.accept('./js/count.js')
}