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

Question

我有一个运行在localhost:5474上的服务器和一个webpack开发服务器。我想让webpack开发服务器代理到localhost:5474。

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

按照这里的指示，它说：

请注意，默认情况下根目录的请求不会被代理。要启用根代理，请将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？

- Nick Manning

---

你有没有偶然间搞定这个问题？我也想将除 *.js 以外的所有东西代理到后端服务器。 - ANewGuyInTown

不这么想...我觉得我最终意识到我喜欢在URL中有/proxy/。虽然已经有一段时间没有访问它了...那是一个我放弃的项目。 - Nick Manning

Answer 1

尝试使用类似以下的内容。注意publicPath: '/public/'，这是你的bundle.js文件所在的位置，以便能够实现动态更新。

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

- Yuriy Perevoznikov

Answer 2

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

请注意，默认情况下不会代理根目录的请求。要启用根代理，devServer.index选项应指定为falsy值。

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

- Guyondowy