Search code examples
webpackprogresswebpack-dev-serverwebpack-dev-middleware

Is it possible to have the progress displayed when using webpack-dev-middleware like the --progress option from webpack-dev-server?


I have an express server that uses webpack-dev-middleware.

If you run webpack-dev-server from the cli there's a "progress" option that causes the progress to be displayed on the console. This is a nice to have feature that I would like when using the middleware as well.

Is this achievable or is it for the standalone dev server only?

I searched the documentation but couldn't find anything relevant to this.


Solution

  • It is possible by using webpack.ProgressPlugin before passing it to the webpack-dev-middleware.

    const compiler = webpack(yourWebpackConfig);
    compiler.apply(new webpack.ProgressPlugin());
    

    webpack-dev-server uses webpack-dev-middleware under the hood and the progress option is handled in webpack-dev-server.js.

    As you can see from that source code, you can also set the profile (boolean) option, which shows how long each processing step took.