如何在 webpack 开发服务器中启用根代理？答案

【问题标题】：How do enable root proxying in webpack dev server?如何在 webpack 开发服务器中启用根代理？
【发布时间】：2018-10-23 13:34:41
【问题描述】：

我有一个在 localhost:5474 上运行的服务器，我有一个 webpack 开发服务器。我希望 webpack 开发服务器代理到 localhost:5474。

如果我提供 URL 的额外部分，我的代理工作正常，但我不想这样做。

按照here 的指示，上面写着

请注意，默认情况下不会代理对 root 的请求。启用根代理，应该将 devServer.index 选项指定为 falsy 价值：

devServer: {
  index: '', // specify to enable root proxying
  host: '...',
  contentBase: '...',
  proxy: {
    context: () => true,
    target: 'http://localhost:1234'
  }
}

我不太确定这些点是什么意思。这是否意味着我在其中添加了点，还是意味着我应该为host 和contentBase 提供我自己的值？

这是我目前的 webpack 配置：

const path = require("path");
const webpack = require("webpack");

module.exports = {
  entry: ["./src/js/app.js"],
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "js/app.js"
  },
  devServer: {
    port:3037,


    open: true,
    hot: true,

    index: '', //needed to enable root proxying

    proxy: {
      //root proxying (doesn't work yet)
      context: () => true,
      target: 'http://localhost:5474',

      //proxying with a URL value (works)
      /*
      "/api": {
        target: "http://localhost:5474",
        pathRewrite: {"^/api" : ""}
      }*/
    },
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      }
    ]
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin()
  ],
  mode:'development'
};

但是当我运行命令时，它会打开 http://localhost:3037/ 并显示列表目录。

如何使用 webpack-dev-server 将 localhost:3037 代理到 localhost:5474？

【问题讨论】：

你有没有机会得到这个工作？我也想将 *.js 之外的所有内容代理到后端服务器
不这么认为...我想我最终意识到我喜欢在 URL 中包含 /proxy/。虽然有一段时间没有访问过它......来自我放弃的一个项目。

标签： webpack

【解决方案1】：

在最新版本的 webpack 中是可能的。正如文档在https://webpack.js.org/configuration/dev-server/

所说

请注意，默认情况下不会代理对 root 的请求。要启用根代理，应该将 devServer.index 选项指定为假值

该页面提供了一个在我的设置中有效的空字符串示例。

【讨论】：

【解决方案2】：

尝试使用类似的东西。请注意publicPath: '/public/'，它是您的 bundle.js 所在的地方，可以随时重新加载。

devServer: {
    index: '', //needed to enable root proxying
    port: 10001,
    publicPath: '/public/',
    proxy: {
        context: () => true,
        '/': 'http://localhost:10000'
    }
},

【讨论】：