Webpack HMR for NodeJS with React

Question

我擁有支持 SSR 的應用程序 React + Express（組件初始渲染將在 nodeJS 中完成）。 我想為應用程序實現 HMR。 為此，我使用webpack-hot-middleware和HotModuleReplacementPlugin 。 它在客戶端（瀏覽器）中按預期工作，但在節點端不工作。

場景：如果我更改了組件中的某些內容，它會立即反映在瀏覽器中，但如果我重新加載頁面，服務器包會返回舊代碼並從客戶端獲取更新。 所以我能夠在瀏覽器中看到閃爍。

客戶端 Webpack 配置：

{
entry: {
    client: ['@gatsbyjs/webpack-hot-middleware/client', resolvePath(process.cwd(), 'src/client/index.js')]
},
...loaders
plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new ReactRefreshPlugin({
        overlay: {
          sockIntegration: 'whm',
        },
      })
].filter(Boolean)
}

服務器 Webpack 配置：

 {
externals: nodeExternals({
    allowlist: ['webpack/hot/poll?1000']
}),
target: 'node',
...loaders
entry: {
    server: ['webpack/hot/poll?1000', resolvePath(process.cwd(), 'src/server/index.js')]
},
plugins: [
    
    new webpack.HotModuleReplacementPlugin(),
    new NodemonPlugin({
        script: path.join('../build', 'server.js')
    })
].filter(Boolean)
}

快速代碼配置

    const compiler = webpack(webpackConfig[0]);

    app = express();

    app.use(
        require('webpack-dev-middleware')(compiler, {
            publicPath: webpackConfig[0].output.publicPath,
            writeToDisk: true,
            serverSideRender: true,
        })
    );

    app.use(
        require(`@gatsbyjs/webpack-hot-middleware`)(compiler, {
          log: console.log,
          path: `/__webpack_hmr`,
          heartbeat: 1000,
        })
    );

Answer 1

一個可能的陷阱是 webpack 配置中的 externals 屬性應該是一個數組。

externals: [
  nodeExternals({
    allowlist: ['webpack/hot/poll?1000']
  })
]