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

Question

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

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

按照这里的指示，它说

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

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

我不太确定这些点是什么意思。这是否意味着我在那里放了点，还是意味着我应该为hostand提供我自己的值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/并显示列表目录。

我怎么能代理localhost:3037到localhost:5474使用的WebPack-dev的服务器？

Answer 1

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

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

该页面给出了在我的设置中起作用的空字符串的示例。