NodeJS反应型Webpack型HMR

Question

我有应用反应+快速与SSR支持(组件初始渲染将在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: [
  nodeExternals({
    allowlist: ['webpack/hot/poll?1000']
  })
]