用于 NodeJS 的 Webpack HMR 与 React答案

【问题标题】：Webpack HMR for NodeJS with React用于 NodeJS 的 Webpack HMR 与 React
【发布时间】：2022-08-15 16:24:29
【问题描述】：

我拥有支持 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,
        })
    );

标签： javascript node.js reactjs webpack webpack-hot-middleware

【解决方案1】：

一个可能的陷阱是 webpack 配置中的 externals 属性应该是一个数组。

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

【讨论】：