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

Question

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

http-proxy-middleware 有一个 logLevel 属性，但这似乎不是从 webpack 配置传递下来的（或者我做错了）。

我确实在 webpack 中发现了一些名为“infrastructionLogging”的东西，但没有运气搞乱它，并且不确定它是否用于调试我的插件和加载器（在 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'
        })
  ]
}

Answer 1

从v4开始，webpack-dev-server 使用 webpack 的内置记录器（请参阅变更日志）

这意味着，除非您在 webpack 的基础设施日志配置中启用它，否则不会显示任何调试消息，如此处所述。

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

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