Hot Module Replacement热模块更新(HMR)

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();
  })
}

这样就可以用了.