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

Question

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

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

按照指示 here ， 它说

Note that requests to root won't be proxied by default. To enable root proxying, the devServer.index option should be specified as a falsy value:

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/并显示列表目录。

我如何代理 localhost:3037至 localhost:5474使用 webpack-dev-server？

Answer 1

尝试使用这样的东西。关注 publicPath: '/public/'它是您的 bundle.js 所在的地方，可以即时重新加载。

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