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

时间:2018-06-18 00:53:33

标签: reactjs express webpack hot-module-replacement

我一直在尝试使用上述设置永久执行热模块更换;失败。这是我的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更新在Developer Console上为我提供了这个。

enter image description here

我一直试图用很少的运气来解决这个问题。

我在Webpack 4上!

1 个答案:

答案 0 :(得分:0)

似乎与webpack或插件无关,您是否尝试过将“ 0.0.0.0”替换为“ localhost”?或使用此Chrome插件-https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi