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')
}