Webpack 开发服务器“之前”功能答案

【问题标题】：Webpack dev server "before" functionalityWebpack 开发服务器“之前”功能
【发布时间】：2018-07-24 09:45:27
【问题描述】：

我正在处理一个弹出的 Create React App 项目，并查看 webpack 开发服务器上的文档，它们似乎有点裸露：https://webpack.js.org/configuration/dev-server/#devserver-before

但我正在尝试看看是否可以执行以下操作：

before(app){
  // read cookie for user session
  // send user ID in cookie to external API
  // retrieve user object from API
  // attach user object to response, to be _somehow_ accessed via the React app client side
}

我知道这是伪代码，但我非常不清楚您可以在这个中间件中做什么确切，就挂钩到 Create React App 的 index.html 和上述客户端的呈现而言-side React 应用程序

在文档中，它说您可以定义一个路由处理程序，如下所示：

app.get('/some/path', function(req, res) { }

但我不觉得这会有用，因为您将无法重新连接到 Webpack 开发服务器的渲染过程？

【问题讨论】：

标签： node.js express webpack webpack-dev-server create-react-app

【解决方案1】：

您可以尝试将其添加到您的 webpack 配置文件中，实际上您可以将其用作模拟服务器。这是我如何配置我的示例，希望对您有所帮助。

devServer: {
    historyApiFallback: true,
    noInfo: true,
    overlay: true,
    before:(app) => {
        app.post('/user/login', function(req, res, next) {
            res.json({success: true})
        });
    }
},

【讨论】：

我们可以使用这个配置属性来设置自定义响应头吗？我可以尝试，但事先询问。
对我来说这只是返回：Cannot GET /user/login
@EugenKonkov 上面的配置只设置了一个POST 路由。您的错误表明您正在尝试GET。

【解决方案2】：

在 Webpack 5 中，您可以通过配置 devServer.onBeforeSetupMiddleware 来获得这种好处。 Angies 的回答适用于 Webpack 4 devServer.before 配置。

【讨论】：