Webpack Node.js 的 HMR

Question

我使用webpack來捆綁我的 nodejs 代碼。 眾所周知，我們可以使用webpack-dev-server搭建開發環境，那么nodejs呢？ 我知道nodemon可以工作，但它會重新啟動整個項目，我想要一種 HMR 方式。

Answer 1

你可以按照這個：

1. 運行npm i --save-dev webpack-node-externals run-script-webpack-plugin webpack
2. 在應用程序的根目錄中創建一個webpack-hmr.config.js文件並將其放入：

const nodeExternals = require('webpack-node-externals');
const { RunScriptWebpackPlugin } = require('run-script-webpack-plugin');

module.exports = function (options, webpack) {
  return {
    ...options,
    entry: ['webpack/hot/poll?100', options.entry],
    externals: [
      nodeExternals({
        allowlist: ['webpack/hot/poll?100'],
      }),
    ],
    plugins: [
      ...options.plugins,
      new webpack.HotModuleReplacementPlugin(),
      new webpack.WatchIgnorePlugin({
        paths: [/\.js$/, /\.d\.ts$/],
      }),
      new RunScriptWebpackPlugin({ name: options.output.filename }),
    ],
  };
};

3. 在你的main.js里面：

async function bootstrap() {
  <Your Express middleware and etc>
  if (module.hot) {
    module.hot.accept();
    module.hot.dispose(() => server.close());
  }
}

靈感來自Nest.js HMR