reactjs - 使用 Express + Webpack Dev Middleware + Webpack Hot Middleware 无法重新加载

Question

我一直在尝试使用上述设置永远执行热模块更换；失败。这是我的 Webpack 配置

export default {
    entry: [
        DEVELOPMENT && "webpack-hot-middleware/client",
        PATH.SOURCE
    ].filter(Boolean),
    output: {
              path: path.join(PATH.ASSETS, "js"),
        publicPath: `http://${getenv("WEB_HOST")}:${getenv("WEB_PORT")}/assets/js`,
          filename: DEVELOPMENT ? "bundle.js" : "bundle.[hash].min.js"
    },
...
    plugins: [
...
        DEVELOPMENT && new webpack.HotModuleReplacementPlugin()
...
    ].filter(Boolean),

...这是我app.js正在运行的快速服务器

const compiler    = Webpack(WebpackConfig);
app.use(WebpackDevMiddleware(compiler, {
           hot: DEVELOPMENT,
    publicPath: WebpackConfig.output.publicPath,
      filename: WebpackConfig.output.filename
}));
app.use(WebpackHotMiddleware(compiler));

App/index.jsx

if ( module.hot ) {
    import("react-hot-loader").then(({ AppContainer }) => {
        module.hot.accept("containers/App", () => {
            render(App, AppContainer);
        });
    });
}

最后，在文件更改时，浏览器的 HMR 更新在开发者控制台上给了我这个。

我一直试图永远解决这个问题，但几乎没有运气。

我在 Webpack 4 上！

标签： reactjsexpresswebpackhot-module-replacement

Answer 1

它似乎与 webpack 或插件无关，您是否尝试过将“0.0.0.0”替换为“localhost”？或者使用这个 chrome 插件——https: //chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi