如何在Webpack Dev Server热重装中从URL中删除端口？

问题描述

我正在使用别名在本地主机端口80上运行我的应用程序（PHP后端需要此程序） 前端使用代理在端口3000上与VueJs + Webpack + Hot Module Reload一起运行。

我设置了it，一切都很好，但是我不知道如何从网址中删除webpack.config.js。

如果我打开:3000而不是http://my-alias，则热模块重新加载将失败，并且

http://my-alias:3000

---

以下是我的[HMR] Update Failed: SyntaxError: Unexpected token < in JSON at position 0 的摘录：

webpack.config.js

有什么主意吗？

解决方法

您需要设置服务器的公共URL。

module.exports = (env,argv) => {
    return {
        ...
        devServer: {
            ...
            public: 'http://my-alias',...
        },

https://webpack.js.org/configuration/dev-server/#devserverpublic

,

就我而言，它是一个带有 PHP 后端的 React 应用程序，我没有使用别名，我只是在我的 index.php 中添加了脚本名称并定义了根 div（这仅用于开发配置环境）。

<?php
// index.php at http://localhost/
?>
  <div id="root"></div>
  <script src="http://localhost:3000/">
  <script src="http://192.168.1.111:3000/static/js/bundle.js">
  <script src="http://192.168.1.111:3000/static/js/vendors~main.chunk.js">
  <script src="http://192.168.1.111:3000/static/js/main.chunk.js">
 //...

在 webpack 中添加 CORS 中间件，以便能够从其他域（不同端口）加载 js 文件。

const corsMiddleWare = (req,res,next) => {
 res.append('Access-Control-Allow-Origin',['*']);
 res.append('Access-Control-Allow-Methods','GET,PUT,POST,DELETE');
 res.append('Access-Control-Allow-Headers','Content-Type');
 next();
}
//...
before(app,server) {
//...
  app.use(corsMiddleWare);
//...

Webpack 输出配置中的 crossOriginLoading 和 publicPath

 output: {
  /* your config */
  crossOriginLoading: 'anonymous',publicPath: 'http://localhost:3000/',}

使用此配置，我可以访问 http://localhost，运行 React 应用程序，并且热重载工作正常，在您的情况下，您可以执行相同的步骤或仅更新 publicPath。>