如何將 webpack devServer 到 output 代理調試信息發送到控制台？

Question

我了解 webpack 5 使用 http-proxy-middleware 代理 http 請求，但我正在嘗試設置開發服務器並努力調試為什么我的代理不起作用，因為我看不到正在發生的任何日志，是好是壞。

http-proxy-middleware 有一個 logLevel 屬性，但這似乎不是從 webpack 配置中傳遞下來的（或者我做錯了）。

我確實在 webpack 中發現了一些名為“infrastructureLogging”的東西，但沒有運氣搞砸這個，我不確定這是否用於調試我的插件和加載器（在 webpack.config 中添加）或包含內部依賴項，如 http-proxy-middleware。 對於像我這樣的新手來說，文檔非常模糊。

當我運行啟動 devServer 時，我確實從配置的代理中收到一條消息，例如：

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

但這是我唯一看到的。 當我發出 api 請求（無論它們是否有效）時，我再也看不到來自開發服務器控制台中 HPM 的 output 了。 有人可以幫忙嗎？

Webpack 配置：

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 的內置記錄器（ 參見 changelog ）

這意味着，除非您在 webpack 的 InfrastructureLogging 配置中啟用它，否則不會顯示任何調試消息，如此處所述。

我發現在調試選項中使用字符串（ debug: 'webpack-dev-server' ）對我不起作用，但這個配置解決了這個問題：

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