使用 Node Config 替换 Webpack 热模块？答案

【问题标题】：Webpack Hot Module Replacement with Node Config?使用 Node Config 替换 Webpack 热模块？
【发布时间】：2017-02-27 19:01:07
【问题描述】：

所以我查看了 webpack HMR 的文档，似乎无法找到一种方法来热模块加载服务器端文件。例如，我有一个用 typescript 编写的配置文件，我需要能够在更改该配置文件时重新加载该文件。所以我需要在编译后更新。除了这个HMR 之外，这些文档都倾向于使用 webpack 开发服务器，它没有解释我的 webpack 配置应该是什么样子才能使用 HMR。任何帮助或建议都会很棒。

【问题讨论】：

github.com/webpack/docs/issues/45 可能是一个不错的起点。

标签： javascript node.js typescript webpack

【解决方案1】：

您可以通过与客户端 HMR 非常相似的方式进行设置：

1) 目标“节点”：

// webpack.config.js
module.exports = {
    ...
    target: 'node'
    ...
}

2) 启用热模块更换，通过 cli 选项 --hot 或通过配置：

// webpack.config.js
module.exports = {
    ...
    plugins: [new webpack.HotModuleReplacementPlugin()]
    ...
};

3) 在入口点中包含 HMR 管理代码：

// webpack.config.js
module.exports = {
    ...
    entry: [
        'webpack/hot/poll?1000', // This differs from client side HMR
        'app.js'
    ]
    ...
};

4) 教你的代码如何使用module.hot.accept进行热更新：

注意：这通常由加载器抽象出来。

// app.js
let config = require('./config');
setInterval(() => {
    console.log(config.FOO_BAR);
}, 2000);

// NOTE: This would need to be done everywhere you use './config' so you might want to create a loader to generate it.
if (module.hot) {
    module.hot.accept('./config', () => {
        config = require('./config');
    });
}

4) 在监视模式下编译包。

【讨论】：