HMR的理解:就是在不刷新浏览器的情况下，你修改代码页面自动更改
官网解释请看-->https://webpack.js.org/concepts/hot-module-replacement/
CSS中的模块热更新
1.配置webpack.config.js
hot module reqlacement已经内置到webpack中了，所以直接引入webpack配置hmr即可.
详细配置可看:https://webpack.js.org/plugins/hot-module-replacement-plugin/
//这里只要引入两行代码
const webpack=require('webpack');
new webpack.HotModuleReplacementPlugin();
完整webpack.config.js文件:
const path=require('path');
const HtmlWebpackPlugin=require('html-webpack-plugin');
const {CleanWebpackPlugin}= require('clean-webpack-plugin');
const webpack=require('webpack');
module.exports={
mode:'development',
devtool:'cheap-module-eval-source-map',
entry:{
main:'./index.js'
},
devServer:{
contentBase:'./dist',
open:true,
port:8000,
hot:true,
hotOnly:true
},
module:{
rules:[
{
test:/\.jpg$/,
use:{
loader:'file-loader',
options:{
outputPath:'images',
name:'img.jpg'
}
}
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader'],
},{
test: /\.scss$/,
use: [
"style-loader", // creates style nodes from JS strings
"css-loader", // translates CSS into CommonJS
"sass-loader" // compiles Sass to CSS, using Node Sass by default
]
}
]
},
output:{
path:path.resolve(__dirname,'./dist'),
filename:'index_bundle.js'
},
plugins:[
new HtmlWebpackPlugin({template:'./index.html'}),
new CleanWebpackPlugin(),
new webpack.HotModuleReplacementPlugin()
]
}
2.小demo
index.js中
引入的index.css内容为
//实现隔行变色
div:nth-child(odd){
background: green;
}
//此时你改变background颜色页面不刷新也会改变.
js中的模块热更新
demo
新建二两js文件counter.js
//点击++
export default function counter(){
var dom=document.createElement('div');
dom.setAttribute("id","counter");
dom.innerHTML=1;
dom.onclick=function(){
dom.innerHTML=(parseInt(dom.innerHTML)+1);
}
document.body.appendChild(dom);
}
number.js
//显示2000
export default function number(){
var dom=document.createElement('div');
dom.setAttribute("id","number");
dom.innerHTML='2000';
document.body.appendChild(dom);
}
当你改变了number中显示的数字代码变了页面却没有更着改变,这是因为CSS文件，我们是使用了loader来进行处理，有些loader已经帮我们写好了模块热更新的代码，我们直接使用即可(类似的还有.vue文件，vue-loader也帮我们处理好了模块热更新)。而对于js代码，还需要我们写一点点额外的代码，像下面这样子：
if(module.hot) {
module.hot.accept('./number.js', () => {
document.body.removeChild(document.getElementById('number'));
number();
})
}
这样就可以用了.
