Webpackホットモジュールのノード構成による交換？

Question

Webpack HMRのドキュメントを見て、サーバー側のファイルを読み込むホットモジュールへの道を見つけることができないようです。例えば、私はtypescriptで書かれた設定ファイルを持っています。その設定ファイルに変更を加えてリロードする必要があります。だから私はコンパイル後に更新する必要があります。ドキュメントはすべて、webpack dev serverを使用する方に好意的です。この1つを除いて、HMRは、HMRを使用するために私のwebpack設定がどのように見えるかを説明しません。どんな助けや提案もすばらしいでしょう。

Answer 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）はウォッチモードでバンドルをコンパイルします。