# 热替换

模块热替换(Hot Module Replacement 或 HMR)是 webpack 提供的最有用的功能之一。它允许在运行时更新各种模块,而无需进行完全刷新

# 需要热替换的模块

如果你刚好在开发这个模块, 而刚好测试的层次又比较深,就可以试试热替换了

// saysome.js
export default function() {
    console.log("hello world");
}

# 配置

只需要在 devServer 中设置 hottrue 即可

开发过程中遇到一个问题, 当设置多个入口的时候出现了错误,具体原因不明

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
    entry:'./src/index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, '..', 'dist')
    },
    mode: "development",
    devtool: 'source-map',
    devServer: {
        hot: true
    },
    plugins: [
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            title: 'aaa',
            template: 'index.html'
        })
    ]
};

# 调用

这就是以前比较不懂的地方, 为什么热更新不是在模块内完成的,因为只用调用者才更清楚需不需要更新。

另外 module.hot 是模块内的内容,不要试图在浏览器中找到它

import say from './saysome.js';

say();
if(module.hot) {
    module.hot.accept('./saysome.js', function() {
        say();
    })
}

# Node.js 中配置

webpack-dev-server 的配置需要单独传递(第二个参数),看下,以后可能需要退出自己的脚手架

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

const config = require('./webpack.config.js');
const options = {
  contentBase: './dist',
  hot: true,
  host: 'localhost',
};

webpackDevServer.addDevServerEntrypoints(config, options);
const compiler = webpack(config);
const server = new webpackDevServer(compiler, options);

server.listen(5000, 'localhost', () => {
  console.log('dev server listening on port 5000');
});