如何让 webpack devServer 将代理调试信息输出到控制台？答案

【问题标题】：How do I get webpack devServer to output proxy debug info to the console?如何让 webpack devServer 将代理调试信息输出到控制台？
【发布时间】：2022-10-01 12:43:50
【问题描述】：

我知道 webpack 5 使用 http-proxy-middleware 来代理 http 请求，但我正在尝试设置开发服务器并努力调试为什么我的代理不起作用，因为我看不到任何日志正在发生，无论好坏。

http-proxy-middleware has a logLevel property but this doesn\'t seem to be passed down from the webpack config (or I\'m doing it wrong).

我确实在 webpack 中发现了一些名为 \"infrastructureLogging\" 的东西，但是没有运气搞砸这个，我不确定这是否是为了调试我的插件和加载器（在 webpack.config 中添加）或包含内部依赖项，如 http-proxy-middleware。对于像我这样的新手来说，文档非常模糊。

当我运行启动 devServer 时，我确实从配置的代理中收到一条消息，例如：

[webpack-dev-server] [HPM] 代理创建：/api -> https://pokeapi.co/api/v2/\"

但那是我唯一看到的。当我发出 api 请求（无论它们是否有效）时，我再也不会在 devserver 控制台中看到任何来自 HPM 的输出。有人可以帮忙吗？

网络包配置：

const path = require(\'path\');
const HtmlWebPackPlugin = require(\'html-webpack-plugin\');

module.exports = {
    mode: \'development\',
    entry: {
        ui: path.resolve(__dirname, \'src/app.js\')
    },
    output: {
        path: path.resolve(__dirname, \'dist\'),        
        filename: \'[name].js\',
        clean: true,
        assetModuleFilename: \'[name][ext]\'
    },
    devtool: \'source-map\',
    devServer: {
        static: {
            directory: path.resolve(__dirname, \'dist\')            
        },
        port: 5000,
        open: true,
        hot: true,
        historyApiFallback: true,
        client: {
            overlay: true,
        },
        proxy: {
            \"/api\": {
              target: \"https://pokeapi.co/api/v2/\",
              https: true,
              changeOrigin: true,
              secure: false,
              historyApiFallback: true,
              logLevel: \'debug\'
            }
          } 
    },
    module: {
        rules: [
            {
                test:/\\.css$/,
                use: [
                    \'style-loader\',
                    { 
                        loader: \'css-loader\', 
                        options: {
                            modules: \'icss\',
                          },
                    }
                ],                
            },
            {
                test: /\\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: \'babel-loader\',
                    options: {
                        presets: [\'@babel/preset-env\', \'@babel/preset-react\', \'@babel/preset-typescript\']
                    }
                }
            },
            {
                test: /\\.(jpe?g|svg|png|gif|ico|eot|ttf|woff2?)(\\?v=\\d+\\.\\d+\\.\\d+)?$/i,
                type: \'asset/resource\',
            },
            {
                test: /\\.tsx?$/,
                loader: \'ts-loader\',
                exclude: /node_modules|\\.d\\.ts$/
            },
            {
                test: /\\.d\\.ts$/,
                loader: \'ignore-loader\'
            },            
            {
                test: /\\.html$/i,
                loader: \"html-loader\",
            }
        ]
    },
    plugins: [
        new HtmlWebPackPlugin({
            title: \'Webpack App Config\',
            inject: \'body\',
            filename: \'index.html\',
            template: \'src/template.html\'
        })
  ]
}

标签： webpack webpack-dev-server webpack-5 http-proxy-middleware

【解决方案1】：

自从v4, webpack-dev-server 正在使用 webpack 的内置记录器 (see changelog)

这意味着，除非您在 webpack 的 InfrastructureLogging 配置中启用它，否则不会显示任何调试消息，如 here 所述。

我发现在调试选项中使用字符串 (debug: 'webpack-dev-server') 对我不起作用，但这个配置解决了这个问题：

module.exports = {
  ...
  infrastructureLogging: {
    debug: [name => name.includes('webpack-dev-server')],
  },
  ...
};

【讨论】：