Webpack-dev-server: devServer.progress is only available trough cmd and not trough webpack.config

[LeonFedotov]

Hi, for example activation of progress flag happens in webpack/bin/convert-argv.js#L333 and it is called in
webpack-dev-server/bin/webpack-dev-server.js#L46 before options is merged into argv so
devServer: { progress: false } isn't working.

[iMoses]

+1
I used devServer: {hot: true} in the webpack.config file and module.hot in webpack/hot/dev-server equals false which throws an error ([HMR] Hot Module Replacement is disabled.). Tried the CLI option webpack-dev-server --hot and it suddenly works great.
Would really appreciate a fix. Thanks.

[alexilyaev]

I'm having the same issues as mentioned above.

Simple config to test the progress flag:

var webpack = require('webpack');
var appRoot = __dirname + '/client';

module.exports = {
    context: appRoot,
    entry: './index.js',
    output: {
        filename: 'bundle.js'
    },
    module: {
        loaders: [
            {
                test: /\.js$/,
                loaders: ['babel']
            }
        ]
    },
    devServer: {
        contentBase: appRoot,
        colors: true,
        progress: true,
        inline: true
    }
};

Running webpack-dev-server doesn't show the progress.
Only when adding --progress it shows the progress.

[chemoish]

+1 :+1:

[mathieumg]

+1 :+1:

[wendellmva]

+1 :+1:

[mathieumg]

I think for hot you can get away with:

devServer: {
  hot: true,
  inline: true,
}

but there is no config equivalent for progress.

[satazor]

+1

[yieldinov]

Any update on this?

[martin-svk]

+1

[deibeljc]

+1

[chunkai1312]

+1

[leebenson]

+1

[mikeys]

+1

[oliverwehn]

+1

[LeonFedotov]

@sokra yo yo yo yo :)

[bensleveritt]

+1

[skleinei]

+1

[mori-dev]

+2

[betolink]

We can manually use the ProgressBarPlugin in the webpack config file and that should do it.

npm install --save-dev progress-bar-webpack-plugin

The in our development webpack config:

const ProgressBarPlugin = require('progress-bar-webpack-plugin');

...

plugins: plugins.concat([
  new ProgressBarPlugin({ clear: false })
])

[feel]

+1

[SpaceK33z]

This is not something that can be fixed in webpack-dev-server. The dev-server only passes the progress flag through to the webpack CLI options, as you can see here. If you want this to be fixed, you should create an issue in the webpack repo. It will automatically also work in dev-server if it's fixed over there (since dev-server has nothing to do with compiling to a bundle).

There are a couple of workarounds for this though. The answer from @betolink is an option, or you can use webpack.ProgressPlugin. Example: new ProgressPlugin(percentage => progressBar.update(percentage)). progressBar comes from the progress package.

[ikeq]

Simply you can use the webpack ProgressPlugin instead of any other third party plugin.

config.plugins.push(new webpack.ProgressPlugin({ profile: false }));

Cheers!😜

[alexilyaev]

@elmorec That worked, thanks.

Note colors doesn't do anything, it's not in the plugin's code as well.

[ikeq]

@alexilyaev Yeah, you are right, thx.

[PeterShershov]

Yo, any update on this?