javascript - 如何在 webpack 中应用 createProxyMiddleware？

Question

如何在webpack中应用createProxyMiddleware？

我有一个带有默认代理的 webpack.config.js:

// development config
require('dotenv').config()
const package = require('../../package.json')
const { merge } = require('webpack-merge')
const webpack = require('webpack')
const commonConfig = require('./common')
const agent = require('agentkeepalive')

module.exports = (webpackConfigEnv, argv) =>
    merge(commonConfig(argv), {
        mode: 'development',
        entry: [
            'react-hot-loader/patch', // activate HMR for React
            'webpack-dev-server/client?http://localhost:3030', 
            'webpack/hot/only-dev-server', 
            './index.tsx', // the entry point of our app
        ],
        devServer: {
            port: 3030,
            hot: true, // enable HMR on the server
            historyApiFallback: true, 
            proxy: {
                '/api/*': {
                    target: 'http://foobar:8080/',
                    secure: false,
                    changeOrigin: true,
                    agent: new agent({
                        maxSockets: 100,
                        keepAlive: true,
                        maxFreeSockets: 10,
                        keepAliveMsecs: 100000,
                        timeout: 6000000,
                        freeSocketTimeout: 90000, // free socket keepalive for 90 seconds
                    }),
                    onProxyRes: (proxyRes) => {
                        var key = 'www-authenticate'
                        proxyRes.headers[key] =
                            proxyRes.headers[key] && proxyRes.headers[key].split(',')
                    },
                },
            },
        },
        // ... other code is omitted for the brevity
    })
    

现在我想用这个 http-proxy-middleware因为this .

所以我将上面的配置编辑为:

         // ... other code is omitted for the brevity
            proxy: createProxyMiddleware('/api/*', {
                target: 'http://foobar:8080/',
                secure: false,
                changeOrigin: true,
                agent: new agent({
                    maxSockets: 100,
                    keepAlive: true,
                    maxFreeSockets: 10,
                    keepAliveMsecs: 100000,
                    timeout: 6000000,
                    freeSocketTimeout: 90000, // free socket keepalive for 90 seconds
                }),
                onProxyRes: (proxyRes) => {
                    var key = 'www-authenticate'
                    proxyRes.headers[key] =
                        proxyRes.headers[key] && proxyRes.headers[key].split(',')
                },
            }),
        },
        // ... other code is omitted for the brevity
    })

但是，当我尝试构建我的应用程序时，它会抛出一个错误:

> [webpack-cli] webpack Dev Server Invalid Options

> options.proxy should be {Object|Array} (https://webpack.js.org/configuration/dev-server/#devserverproxy)

请告诉我如何在 webpack 配置中为 proxy 应用 createProxyMiddleware？

Answer 1

据我所知，使用 Webpack 的开发服务器无法使用自定义中间件。如果您非常需要代理，您可以将自定义 Express 服务器连接到 Webpack 并因此使用中间件。

确保另外安装 express , webpack-dev-middleware , 和 webpack-hot-middleware (如果你仍然想要 HMR)。然后使用以下(类似)内容创建您的服务器文件:

const express = require("express");
const { createProxyMiddleware } = require("http-proxy-middleware");
const webpack = require("webpack");
const webpackHotMiddleware = require("webpack-hot-middleware");
const webpackDevMiddleware = require("webpack-dev-middleware");
const webpackConfig = require("./webpack.config"); // path to your `webpack.config.js`

const webpackCompiler = webpack(webpackConfig); // create webpack compiler with config

const app = express();
app.use(createProxyMiddleware(/* ... */));
app.use(webpackDevMiddleware(webpackCompiler, {
  publicPath: webpackConfig.output.publicPath, // provide the public path for the middleware
}));
// if you need HMR:
app.use(webpackHotMiddleware(webpackCompiler));

// you need "*" if you're creating a SPA like if you're using react router
app.get("*", (req, res) => {
  res.sendFile(/* absolute path to index.html */);
});

app.listen(3030, () => console.log("Webpack running on express server"));

要使 HMR 正常工作，您需要稍微更改 webpack.config.js。将config.entry中的第二个和第三个元素替换为"webpack-hot-middleware/client"，然后在config.plugins中添加新的 webpack.HotModuleReplacementPlugin()。

现在用 node server.js 启动你的服务器并处理 http://localhost:3030作为您普通的 Webpack 开发服务器_{并希望一切顺利}。

请记住，我们只是为了开发而这样做。在产品中运行时，我们不需要 webpack。

你的 webpack.config.js 应该是这样的:

// development config
require('dotenv').config()
const package = require('../../package.json')
const {
  merge
} = require('webpack-merge')
const webpack = require('webpack')
const commonConfig = require('./common')
const agent = require('agentkeepalive')

module.exports = (webpackConfigEnv, argv) =>
  merge(commonConfig(argv), {
    mode: 'development',
    entry: [
      'webpack-hot-middleware/client', // this powers our HMR
      'react-hot-loader/patch', // activate HMR for React'
      './index.tsx', // the entry point of our app
    ],
    devServer: {
      port: 3030,
      hot: true, // enable HMR on the server
      historyApiFallback: true,
    },
    plugins: [new webpack.HotModuleReplacementPlugin()]
    // ... other code is omitted for the brevity
  })