1.HMR（Hot Module Replacement）热模块替换

在开发环境，可以使用热模块替换（HMR）去实现如果一个模块发生变化，只会重新打包这一个模块（而不是所有模块都进行打包），而无需重新加载整个页面。

生产环境不需要使用HMR

作用：极大提高构建速度

样式文件、js文件使用HMR功能：

样式文件：style-loader自带HMR功能

js文件：

默认不能使用HMR功能 --> 需要修改js代码，添加支持HMR功能的代码，可以在入

口文件添加如下代码，配置需要监听的js代码文件

if(module.hot) {// 一旦module.hot为true，说明开启了HMR功能。 --> 让HMR功能代码生效module.hot.accept("./print.js", function() {// 方法会监听print.js文件的变化，一旦发生变化，其他模块默认不会重新打包构建。// 会执行后面的回调函数print()})
}

html文件：默认不能使用HMR功能，同时会导致问题：html文件不能热更新。但html文

件不需要使用HMR功能，因为只有一个html文件

2.相关代码段文件

1）相关代码文件

2）webpack.config.js

/*** HMR: hot module replacement 热模块替换 / 模块热替换*  作用：一个模块发生变化，只会重新打包这一个模块（而不是打包所有模块）*      极大提升构建速度*      *      样式文件：可以使用HMR功能：因为style-loader内部实现了*          开发环境使用style-loader，HMR功能可以让性能更好，打包速度更快；*          生产环境使用mini-css-extract-plugin*      js文件：默认不能使用HMR功能 -->  需要修改js代码，添加支持HMR功能的代码*          只能处理入口js文件*      html文件：默认不能使用HMR功能，同时会导致问题：html文件不能热更新了~（不用做HMR功能，因为只有一个html文件）*          解决：修改entry入口，将html文件引入*      */const { resolve } = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin")
/*** webpack.config.js webpack的配置文件* 默认只能处理js和json文件，html、css、图片、文字需要另外引入loader* 作用：指示webpack 干哪些活（当运行webpack指令时，会加载里面的配置）* 所有构建工具都是基于nodejs平台运行的，模块化默认采用commonjs** 运行项目指令:*  webpack 会将打包结果输出出去*  npx webpack-dev-server只会在内存中编译打包，没有输出*/
module.exports = {// 配置webpack入口起点entry: ["./src/js/index.js","./src/index.html"],output: {// 配置输出文件名filename: "js/built.js",// 配置输出文件路径path: resolve(__dirname,"build")},module: {rules: [// 打包样式资源// loader的配置// less{// 匹配哪些文件test: /\.less/,use: ["style-loader","css-loader",// 需要下载less和less-loader"less-loader"]},]},// plugins的配置plugins: [// html-webpack-plugin// 功能：默认会创建一个空的html，自动引入打包输出的所有资源（JS/CSS）// 需求：需要有结构的HTML文件new HtmlWebpackPlugin({// 复制一个HTML文件，并自动引入打包输出的所有资源（JS/CSS）template: "./src/index.html"})],// 配置开发服务器 devServer: 用来自动化（自动编译、自动打开浏览器、自动刷新浏览器）// 特点：只会在内存中编译打包，本地代码不会有任何输出// 运行的指令如果是webpack、会有输出。运行的指令如果是npx，则不会有输出// 启动devServer指令为：npx webpack-dev-serverdevServer: {// 要运行的项目的路径（指构建后的目录）// contentBase在webpack5中已经废弃，而使用static替代// static: resolve(__dirname,"build"),contentBase: resolve(__dirname,"build"),// 启动gzip压缩compress: true,// 开发服务器端口号port: 3000,// 自动打开浏览器open: true,// 开启HMR功能// 当修改了webpack配置，新配置想要生效，必须重启webpack服务hot: true},mode: "development"
}

3）index.js

// 引入 iconfont 样式文件
import print from "./print.js";
import '../css/index.less';console.log("index.js文件被")function add(x,y) {return x + y;
}
console.log(add(1,2));if(module.hot) {// 一旦module.hot为true，说明开启了HMR功能。 --> 让HMR功能代码生效module.hot.accept("./print.js", function() {// 方法会监听print.js文件的变化，一旦发生变化，其他模块默认不会重新打包构建。// 会执行后面的回调函数print()})
}

4）print.js

console.log("print.js")
function print() {const content = 'hello print';console.log(content);console.log("123")
}
export default print

5）index.less

#box1 {width: 100px;height: 100px;background-repeat: no-repeat;background-size: 100% 100%;background-color: pink;
}#box2 {width: 200px;height: 200px;background-repeat: no-repeat;background-size: 100% 100%;background-color: skyblue;
}#box3 {width: 300px;height: 300px;// background-image: url('../imgs/angular.jpg');background-repeat: no-repeat;background-size: 100% 100%;background-color: yellowgreen;
}#title {color: #fff;
}