How do I get webpack devServer to output proxy debug info to the console?

Question

I understand that webpack 5 uses http-proxy-middleware to proxy http requests but I'm trying to setup up a dev server and struggling to debug why my proxy doesn't work because I can't see any logs of what is happening, good or bad.

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).

I did discover something in webpack called "infrastructureLogging" but had no luck messing around with this and am not sure if that's for debuging my plugins and loaders (added in webpack.config) or includes internal dependencies like http-proxy-middleware. Docs are very vague for a newbie like me.

When I run start up the devServer, I do get a message from the configured proxy like:

[webpack-dev-server] [HPM] Proxy created: /api -> https://pokeapi.co/api/v2/"

But that's the only thing I see. When I make api requests (whether they work or not), I never see any more output from HPM in the devserver console. Can someone please help?

Webpack config:

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

Since v4 , webpack-dev-server is using webpack's built-in logger ( see changelog )

That means, that any debug message won't be showed unless you enable it in webpack's infrastructureLogging configuration, as explained here .

I've found out that using a string in debug option ( debug: 'webpack-dev-server' ) does not work for me, but this configuration solved the issue:

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