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'
        })
  ]
}

Have you ever solved this? And, if yes, how? – Andre Kreienbring Oct 04 '22 at 15:30 — Andre Kreienbring, Oct 04 '22 at 15:30

score 5 · Answer 1 · answered Sep 02 '22 at 06:26

5

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')],
  },
  ...
};

answered Sep 02 '22 at 06:26

PWie

53
7

With this solution I can see logs from the webpack-dev-server. BUT I still don't see any logs that indicate that the proxy configuration is working, like asked in the original question. Do you have more information how to enable logging for every proxy request? – Andre Kreienbring Oct 04 '22 at 15:28
Need to combine the settings mentioned in the question and your answer. Logs are displayed only for entries with " logLevel: 'debug' " specified. – jornathan Jul 13 '23 at 04:19

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

1 Answers1