hooyantsing's Blog

P20 HMR

字数统计: 405阅读时长: 1 min
2020/12/01

尚硅谷2020最新版Webpack5实战教程

什么是HMR

用于开发环境下。

模块热更新。修改某个文件的源码,仅重新打包修改文件,不会导致全部文件重新打包。

如何开启

在 devServer 内配置 hot:true即可。

编写配置文件:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
/*
HMR: hot module replacement 热模块替换
作用:一个模块发生变化,只会重新打包这一模块(而不是打包所有模块)
极大的提升构建速度

css文件:可以使用HMR功能,因为style-loader内部实现了
js文件:默认不能使用HMR功能
html文件:默认不能使用HMR功能,同时会导致问题:html不能热更新了
*/
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { resolve } = require('path');

module.exports = {
// 解决html不能热更新,放入数组中
// ['./src/js/index.js','./src/js/index.html']
entry: './src/js/index.js',
output: {
filename: 'js/built.js',
path: resolve(__dirname,'build'),
publicPath:'./'
},
module: {
rules: [
{
test: /\.less$/,
use: ['style-loader','css-loader','less-loader']
},
{
test: /\.css$/,
use: ['style-loader','css-loader']
},
{
test: /\.(jpg|png|gif)$/,
loader: 'url-loader',
options: {
limit: 8 * 1024,
name: '[hash:10].[ext]',
esModule: false,
outputPath: 'imgs'
}
},
{
test: /\.html$/,
loader: 'html-loader'
},
{
exclude: /\.(html|js|css|less|jpg|png|gif)/,
loader: 'file-loader',
options: {
name: '[hash:10].[ext]',
outputPath: 'media'
}
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html'
})
],
mode: 'development',

devServer: {
contentBase: resolve(__dirname,'build'),
compress: true,
port: 3000,
// 开启HMR功能
// 当修改了 webpack,新配置要想生效,必须重启webpack服务
hot: true
}
}
CATALOG
  1. 1. 什么是HMR
  2. 2. 如何开启