个人中心
gpt4 book ai didi

javascript - __webpack_hmr 转到错误的端口并失败

转载 作者：行者123 更新时间：2023-12-03 11:23:39 26 4
gpt4 key购买 nike

我正在尝试让热重载与我的设置一起工作。目前，它是这样工作的——

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

但是，我不确定如何纠正这个问题

最佳答案

您可以在 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'

关于javascript - __webpack_hmr 转到错误的端口并失败，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35446109/

26 4 0
文章推荐： multithreading - 多核处理器的关键部分
文章推荐： tensorflow - 在连接的 tensorflow 图中初始化变量
文章推荐： Python3 查找字符串的 crc32
文章推荐： svn - 合并 Subversion 分支时保留历史记录
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com