__webpack_hmr進入錯誤的端口並失敗

Question

我正在嘗試熱重新加載以使用我的設置。 目前，它的工作原理如下 -

server.js

// this is the main server, which connects to db, serves react components, etc

const app = express();

app.get('/:params?*', (req, res) => {
  res.status(200).send(`
    <!doctype html>
    <html>
      <head>
        <meta charset="utf-8">
      </head>
      <body>
        hi
        <script src="http://localhost:3000/build/client.js"></script>
      </body>
    </html>
  `);
});

...
app.listen(5000);

gulpfile.babel.js

const CLIENT_DEV_CONFIG = {
  entry: [
    CLIENT_ENTRY,
    'webpack-hot-middleware/client',
    'eventsource-polyfill',
  ],
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
  ],
  output: {
    ...CLIENT_OUTPUT,
    publicPath: 'http://localhost:3000/build/',
  },
  module: {
    loaders: [BABEL_LOADER]
  },
}

gulp.task('client-watch', done => {
  console.log(CLIENT_DEV_CONFIG.output.publicPath);
  const opts = {
    hot: true,
    publicPath: CLIENT_DEV_CONFIG.output.publicPath,
    headers: {'Access-Control-Allow-Origin': '*'},
  };
  const app = new express();
  const compiler = webpack(CLIENT_DEV_CONFIG);
  app.use(webpackDevMiddleware(compiler, opts));
  app.use(webpackHotMiddleWare(compiler));
  app.listen(3000, (err) => {
    console.log(err || '[webpack-hot-devserver] running on 3000');
    done();
  });
});

現在，

如果我訪問localhost:5000 。 有用
如果我訪問localhost:3000/build/client.js ，它也可以

但是，如果我更新的東西我沒有得到實時更新，我需要刷新...... :(

查看網絡選項卡，我看到對http://localhost:5000/__webpack_hmr請求失敗，我認為這可能是一個問題。

http://localhost:5000/__webpack_hmr實際上應該是http://localhost:3000/__webpack_hmr

但是，我不知道如何糾正這個問題

Answer 1

您可以在entry數組的行中的webpack配置中指定URL，如下所示：

const CLIENT_DEV_CONFIG = {
  entry: [
    CLIENT_ENTRY,
    `webpack-hot-middleware/client?path=${HOT_SERVER_URL}/__webpack_hmr`,
    'eventsource-polyfill',
  ],
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
  ],
  output: {
    ...CLIENT_OUTPUT,
    publicPath: `${HOT_SERVER_URL}/build/`,
  },
  module: {
    loaders: [
      {
        ...BABEL_LOADER,
        query: {...BABEL_QUERY, presets: [...BABEL_QUERY.presets, 'react-hmre']},
      },
    ],
  },
}

所以這一行特別是：

`webpack-hot-middleware/client?path=${HOT_SERVER_URL}/__webpack_hmr`,

path選項允許設置熱模塊重新加載應該訪問的位置以訪問__webpack_hmr端點。 例如，可以將其設置為：

'webpack-hot-middleware/client?path=//localhost:3000/__webpack_hmr'

__webpack_hmr進入錯誤的端口並失敗

問題描述

1 個解決方案

解決方案1
9 已采納 2016-02-17 01:27:12

__webpack_hmr進入錯誤的端口並失敗

問題描述

1 個解決方案

解決方案1 9 已采納 2016-02-17 01:27:12

解決方案1
9 已采納 2016-02-17 01:27:12