配置 webpack-dev-server 以很好地与资产和应用程序的不同现有虚拟主机配合使用

Question

我正在尝试设置非标准的 webpack-dev-server 代理配置。

以下阅读：http://webpack.github.io/docs/webpack-dev-server.html#combining-with-an-existing-server

基本上我的本地Web服务器Web根目录是：http://website.dev，我的本地资产服务器是http://website.assets

我想配置 webpack-dev-server 来代理我从 http://website.dev 提供的现有站点，并代理其将从 http://website.assets 提供的 javascript 资产。

这是我尝试过的：

var webpackConfig = {
        output: {
            path: '../dist/js',
            publicPath: 'http://website.assets/js/',
            filename: '[name].js'
        },
        devServer: {
            //publicPath: '',
            contentBase: 'http://website.dev',
            proxy: {
                'js/*': {
                    target: "http://website.assets/js"
                }
            }
        }
    };

和

var webpackConfig = {
        output: {
            path: '../dist/js',
            publicPath: 'http://website.assets/js/',
            filename: '[name].js'
        },
        devServer: {
            publicPath: 'http://website.assets/js/',
            contentBase: 'http://website.dev'
        }
    };

和

var webpackConfig = {
        output: {
            path: '../dist/js',
            publicPath: 'http://website.assets/js/',
            filename: '[name].js'
        },
        devServer: {
            publicPath: 'http://website.assets/js/',
            proxy: {
                '*': "http://website.dev",
                'js/*': "http://website.assets/js/"
            }
        }
    };

我不知道如何让配置与我的排列很好地配合。我不确定我的开发服务器配置是否正确。请帮忙:)

Answer 1

webpack 开发服务器代理 1.14.1 中有一个错误（我认为这是一个错误）

webpack-dev-server 使用"node-http-proxy"来代理请求，但是代理服务器似乎将虚拟主机名预先解析为 IP 地址（或本地主机）。

您需要在开发服务器配置文件中添加一些特殊配置：

var server = new webpackDevServer(compiler, {
  quiet: false,
  stats: { colors: true },
  proxy: {
    "/api": {
      "target": {
        "host": "action-js.dev",
        "protocol": 'http:',
        "port": 80
      },
      ignorePath: true,
      changeOrigin: true,
      secure: false
    }
  }
});
server.listen(8080);