Hot Module Replacement

热更新，由于大型项目开发中会有很多组件，如果开发某个组件时，每次修改都刷新页面，一方面比较耗时，一方面比较慢，热更新会只刷新你修改的组件，在开发时算是比较有用，不过非大型项目刷新页面和hmr感知差不多

Enabling HMR

开启热更新功能，在webpack配置文件中的devServer中添加hot:true即可，

webpack-dev-server在4.0.0版本后默认会开启，看了下目前已经是4.5.0版本了，所以不修改配置文件也是默认开启的

对应的需要开启hmr的组件，需要添加一段代码

如果开发完成后，建议挪掉这些代码

构建依旧没问题

启动后控制台信息如下

这是修改一下print.js中的代码，查看控制台内的信息

可以看到执行了index.js中添加的代码段

代码见：https://github.com/uikoo9/webpack-guides/tree/0.3.0?

Via the Node.js API

这里讲了通过nodejs的方式运行webpack时，hmr相关如何配置，

给出的示例有两个问题，

1.文件名字叫做dev-server.js，和webpack源码中的dev-server.js会混淆，开发者可能不知道说的是哪个

2.这个dev-server.js的代码是错误的，config的部分错误，直接运行会报错，如下

截取了一部分，实际上有很多异常信息，大概是说config部分没有按规范来

正确的代码如下，修改了config部分

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

const webpack = require('webpack');
const DevServer = require('webpack-dev-server');

const config = {
    mode: 'development',
    entry: [
        // Runtime code for hot module replacement
        'webpack/hot/dev-server.js',
        // Dev server client for web socket transport, hot and live reload logic
        'webpack-dev-server/client/index.js?hot=true&live-reload=true',
        // Your entry
        './src/index.js',
    ],
    devtool: 'inline-source-map',
    // devServer: {
    //     static: './dist',
    //     hot: true,
    // },
    plugins: [
        new webpack.HotModuleReplacementPlugin(),
        new HtmlWebpackPlugin({
            title: 'Hot Module Replacement',
        }),
    ],
    output: {
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, 'dist'),
        clean: true,
    },
};
const compiler = webpack(config);

// `hot` and `client` options are disabled because we added them manually
const server = new DevServer({ hot: false, client: false }, compiler);

(async () => {
  await server.start();
  console.log('dev server is running');
})();

其实就是将webpack.config.js当做一个对象传入compiler然后运行，注意要去掉之前devServer的配置项部分

修改后构建依旧没有问题