什么是模块热替换？

这个功能会在程序运行过程中替换、添加或删除模块，而无需重新加载整个页面

有什么用呢？

• 保留在完全重新加载页面时丢失的应用程序状态.
• 只更新变更内容，以节省宝贵的开发时间。
  
  调整样式更加快速
• 几乎相当于在浏览器调试器中更改样式。

总而言之，它最主要的速度就是加快开发速度。

---

启用模块热更新这个功能需要更新webpack-dev-server的配置和使用webpack内置的HMR插件。

例子：

webpack.config.js

const path = require('path');

const HtmlWebpackPlugin = require('html-webpack-plugin');

const webpack = require('webpack');  //引入

module.exports = {

    entry: {

        app: './src/index.js'

    },

    devtool: 'inline-source-map',

    devServer: {

        contentBase:'./dist',

        hot: true

    },

    module:{

        rules:[

            {

                test: /\.css$/,

                use:['style-loader','css-loader']

            }

        ]

    },

    plugins:[

        new HtmlWebpackPlugin({

            title: 'Output Management'

        }),

        //方便查看修补依赖

        new webpack.NamedModulesPlugin(),

        //热更新模块

        new webpack.HotModuleReplacementPlugin()

    ],

    output:{

        filename: '[name].bundle.js',

        path: path.resolve(__dirname, 'dist')

    }

};

同时，也要在index.js中判断热模块更新后做处理：

import _ from 'lodash';

import printMe from './print.js';

import './style.css';

function component(){

    var element = document.createElement('div');

    var btn = document.createElement('button');

    element.innerHTML = _.join(['hello~world','我的家'], ' ');

    btn.innerHTML = 'Click me and check the console!';

    btn.onclick = printMe;

    element.appendChild(btn);

    return element;

}

let element = component();

document.body.appendChild(element);

if(module.hot){

    module.hot.accept('./print.js', function(){

        console.log('更新后:');

        document.body.removeChild(element);

        element = component();

        document.body.appendChild(element);

    })

}