I have an ideal for the profile part, currently, the incremental build time is accumulative. How about we add option to display time cost for each build?

I can submit a PR if you like.

• Operating System: OSX
• Node Version: 8.11.3
• NPM Version: 5.6
• webpack Version: 4ish
• webpack-serve Version: Unknown

This issue is for a:

• <input type="checkbox" disabled style="margin: 0px 0.35em 0.25em -1.6em; vertical-align: middle;" checked> bug
• <input type="checkbox" disabled style="margin: 0px 0.35em 0.25em -1.6em; vertical-align: middle;"> feature request
• <input type="checkbox" disabled style="margin: 0px 0.35em 0.25em -1.6em; vertical-align: middle;"> modification request

Code

webpack.config.js

https://github.com/lucleray/next-progressbar

Expected Behavior

Bar to be filled completely

Actual Behavior

Bars are partially filled before reporting success

How Do We Reproduce?

https://github.com/lucleray/next-progressbar

Not sure if this is intended behavior or not. Related ticket: https://github.com/lucleray/next-progressbar/issues/4#issuecomment-407702276

• Operating System: Windows 7
• Node Version: 8.9.4
• NPM Version: 5.6.0
• webpack Version: 4.16
• webpack-serve Version: 2.0.2

This issue is for a:

• <input type="checkbox" disabled style="margin: 0px 0.35em 0.25em -1.6em; vertical-align: middle;" checked> bug
• <input type="checkbox" disabled style="margin: 0px 0.35em 0.25em -1.6em; vertical-align: middle;"> feature request
• <input type="checkbox" disabled style="margin: 0px 0.35em 0.25em -1.6em; vertical-align: middle;"> modification request

Code

webpack.config.js

  plugins: [
                new WebpackBar({
                    profile: true,
                    minimal: false,
                    compiledIn: false,
                    done
                }),
                new HardSourceWebpackPlugin(),
                new HtmlWebpackPlugin({
                    ...htmlDefault,
                    env: 'development',
                    filename: 'index.html',
                }),
]

Expected Behavior

I expect to see the profile information only once in the console.

Actual Behavior

The profiling information is outputted before Webpack is done.
So, it first appears in the middle of compiling and then again once Webpack is done.

The done callback is also called twice - but both times (looking at the stats object) webpack says it's done….

How Do We Reproduce?

This is what the output looks like:

i ｢serve｣: Serving Static Content from: src\lib\config\parts\
i ｢hot｣: WebSocket Server Listening on 172.25.14.140:55368
i ｢serve｣: Project is running at http://172.25.14.140:5600
i ｢serve｣: Server URI copied to clipboard
[hardsource:133d4ee0] Using 43 MB of disk space.
[hardsource:133d4ee0] Writing new cache 133d4ee0…
[hardsource:133d4ee0] Tracking node dependencies with: package-lock.json.

Stats by Ext

╔════════╤══════════╤═══════╤══════════════╤══════════════════╗
║ Ext │ Requests │ Time │ Time/Request │ Description ║
╟────────┼──────────┼───────┼──────────────┼──────────────────╢
║ js │ 1 │ 33ms │ 33ms │ JavaScript files ║
╟────────┼──────────┼───────┼──────────────┼──────────────────╢
║ scss │ 10 │ 752ms │ 75ms │ SASS files ║
╟────────┼──────────┼───────┼──────────────┼──────────────────╢
║ scss 0 │ 1 │ 69μs │ 69μs │ scss 0 files ║
╟────────┼──────────┼───────┼──────────────┼──────────────────╢
║ Total │ 12 │ 785ms │ │ ║
╚════════╧══════════╧═══════╧══════════════╧══════════════════╝

Stats by Loader

╔════════════════════╤══════════╤═══════╤══════════════╤════════════════════╗
║ Loader │ Requests │ Time │ Time/Request │ Description ║
╟────────────────────┼──────────┼───────┼──────────────┼────────────────────╢
║ babel-loader │ 1 │ 33ms │ 33ms │ Babel Loader ║
╟────────────────────┼──────────┼───────┼──────────────┼────────────────────╢
║ css-loader │ 11 │ 752ms │ 68ms │ Css Loader ║
╟────────────────────┼──────────┼───────┼──────────────┼────────────────────╢
║ postcss-loader │ 11 │ 752ms │ 68ms │ Postcss Loader ║
╟────────────────────┼──────────┼───────┼──────────────┼────────────────────╢
║ resolve-url-loader │ 11 │ 752ms │ 68ms │ Resolve Url Loader ║
╟────────────────────┼──────────┼───────┼──────────────┼────────────────────╢
║ sass-loader │ 11 │ 752ms │ 68ms │ Sass Loader ║
╟────────────────────┼──────────┼───────┼──────────────┼────────────────────╢
║ Total │ 45 │ 3s │ │ ║
╚════════════════════╧══════════╧═══════╧══════════════╧════════════════════╝

 Access project at:     

http://172.25.14.140:5600

✔︎ Webpack compiled in: 1335ms
[hardsource:66f4e04f] Using 43 MB of disk space.
[hardsource:66f4e04f] Writing new cache 66f4e04f…
[hardsource:66f4e04f] Tracking node dependencies with: package-lock.json.
i ｢hot｣: Applying DefinePlugin:hotClientOptions
i ｢hot｣: webpack: Compiling…

Stats by Ext

╔════════╤══════════╤═══════╤══════════════╤══════════════════╗
║ Ext │ Requests │ Time │ Time/Request │ Description ║
╟────────┼──────────┼───────┼──────────────┼──────────────────╢
║ js │ 2 │ 34ms │ 17ms │ JavaScript files ║
╟────────┼──────────┼───────┼──────────────┼──────────────────╢
║ scss │ 19 │ 878ms │ 46ms │ SASS files ║
╟────────┼──────────┼───────┼──────────────┼──────────────────╢
║ scss 0 │ 2 │ 113μs │ 56μs │ scss 0 files ║
╟────────┼──────────┼───────┼──────────────┼──────────────────╢
║ Total │ 23 │ 912ms │ │ ║
╚════════╧══════════╧═══════╧══════════════╧══════════════════╝

Stats by Loader

╔════════════════════╤══════════╤═══════╤══════════════╤════════════════════╗
║ Loader │ Requests │ Time │ Time/Request │ Description ║
╟────────────────────┼──────────┼───────┼──────────────┼────────────────────╢
║ babel-loader │ 2 │ 34ms │ 17ms │ Babel Loader ║
╟────────────────────┼──────────┼───────┼──────────────┼────────────────────╢
║ css-loader │ 21 │ 878ms │ 42ms │ Css Loader ║
╟────────────────────┼──────────┼───────┼──────────────┼────────────────────╢
║ postcss-loader │ 21 │ 878ms │ 42ms │ Postcss Loader ║
╟────────────────────┼──────────┼───────┼──────────────┼────────────────────╢
║ resolve-url-loader │ 21 │ 878ms │ 42ms │ Resolve Url Loader ║
╟────────────────────┼──────────┼───────┼──────────────┼────────────────────╢
║ sass-loader │ 21 │ 878ms │ 42ms │ Sass Loader ║
╟────────────────────┼──────────┼───────┼──────────────┼────────────────────╢
║ Total │ 86 │ 4s │ │ ║
╚════════════════════╧══════════╧═══════╧══════════════╧════════════════════╝

 Access project at:     

http://172.25.14.140:5600

i ｢hot｣: webpack: Compiling Done

now

page.css /*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */ normalize.css

i want

normalize.css /*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */ page.css

• Operating System: Ubuntu
• Node Version: 9.9.0
• NPM Version: 5.6.0
• webpack Version: 4.6.0
• eslint Version: 4.19.1
• webpack-serve Version: -

This issue is for a:

• <input type="checkbox" disabled style="margin: 0px 0.35em 0.25em -1.6em; vertical-align: middle;" checked> bug
• <input type="checkbox" disabled style="margin: 0px 0.35em 0.25em -1.6em; vertical-align: middle;"> feature request
• <input type="checkbox" disabled style="margin: 0px 0.35em 0.25em -1.6em; vertical-align: middle;"> modification request

Code

CLI Command

yarn run lint

webpack.config.js

https://github.com/nobt-io/frontend/blob/f71c5079d3b35a1389ce5d7425c090b1963a9823/webpack.config.js

.eslintrc.js

https://github.com/nobt-io/frontend/blob/f71c5079d3b35a1389ce5d7425c090b1963a9823/.eslintrc.js

Expected Behavior

ESLint runs as usual

Actual Behavior

ESLint reports at lot of errors because it fails to resolve imports

How Do We Reproduce?

• git clone https://github.com/nobt-io/frontend
• git checkout feature/webpackbar
• yarn install
• yarn run lint

Lint fails.

• git checkout HEAD^1
• yarn run lint

Lint succeeds.

If you look at the commit, nothing else is changed besides adding the webpackbar plugin.
I think it has something do with the referencing the webpack config in .eslintrc.js. However, I don't understand why adding WebpackBar changes any of that.

• Operating System: OSX 10.13.4
• Node Version: 10.0.0
• NPM Version: 6.0.0
• webpack Version: 4.7.0

This issue is for a:

• <input type="checkbox" disabled style="margin: 0px 0.35em 0.25em -1.6em; vertical-align: middle;"> bug
• <input type="checkbox" disabled style="margin: 0px 0.35em 0.25em -1.6em; vertical-align: middle;" checked> feature request
• <input type="checkbox" disabled style="margin: 0px 0.35em 0.25em -1.6em; vertical-align: middle;"> modification request

Expected Behavior

When using friendly-errors-webpack-plugin with your plugin, some informations are provided twice, like the compiling message before the progress bar.

Is it possible to create an option to only display the progress bar?

Thanks!

• Operating System: osx 10.13.4
• Node Version: 10.0.0
• NPM Version: 5.6.0
• webpack Version: 4.6.0
• webpack-serve Version:

This issue is for a:

• <input type="checkbox" disabled style="margin: 0px 0.35em 0.25em -1.6em; vertical-align: middle;" checked> bug
• <input type="checkbox" disabled style="margin: 0px 0.35em 0.25em -1.6em; vertical-align: middle;"> feature request
• <input type="checkbox" disabled style="margin: 0px 0.35em 0.25em -1.6em; vertical-align: middle;"> modification request

Expected Behavior

Single progress

Actual Behavior

Double progress bars

• webpack dev server
  
• webpack
  

How Do We Reproduce?

Start app with webpack dev server and with this plugin

This plugin looks really good for me. I just can't find how to config for multiple concurrent builds. Are there any examples? thanks.

• Operating System: OSX Sierra
• Node Version: 8.11.0
• NPM Version: 5.6.0
• webpack Version: 3x & 4x
• webpack-serve Version: 2x & 3x

This issue is for a:

• <input type="checkbox" disabled style="margin: 0px 0.35em 0.25em -1.6em; vertical-align: middle;" checked> bug
• <input type="checkbox" disabled style="margin: 0px 0.35em 0.25em -1.6em; vertical-align: middle;"> feature request
• <input type="checkbox" disabled style="margin: 0px 0.35em 0.25em -1.6em; vertical-align: middle;"> modification request

Code

const app = new DevServer(compiler, serverOptions);

let hasRun = false;

app.middleware.waitUntilValid(() => {
  if (!hasRun) {
    app.listen(hotPort, host, (err) => {});
  }
});

or

compiler.run(() => {});

webpack.config.js

https://gist.github.com/dtothefp/7769a27293cf771dbd60fe46dcc99c3c

Expected Behavior

When progress bar finishes Webpack compilation finishes and task proceeds

Actual Behavior

Progress bar finishes and task hangs while webpack does some unknown work behind the scenes.

How Do We Reproduce?

This is most likely not an issue with webpackbar but with Webpack itself. I'm putting this issue here to gain clarity on what is happening so I can put an issue up on Webpack with pertinent information.

I'm using app.middleware.waitUntilValid to signal task completion although I've tried using compiler.hooks.done.tap or v3 compiler.plugin('done'. I see this same code in the webpackbar source but it seems the progress bar shows compilation completion well before the callback for done is called. I have a large app and completion of the initial build takes about 1min although subsequent reloads with WebpackDevServer or compiler.watch show completion in the progress bar in about 4s. Unfortunately, after progress bar completes a typical wait time for calling of the done callback is at least 30s. I'd like to understand this issue greater so I can figure out where the bottlenecks are in my Webpack build are as I'm trying to increase performance.

This issue is for a:

Not sure :(

• <input type="checkbox" disabled style="margin: 0px 0.35em 0.25em -1.6em; vertical-align: middle;" checked> bug
• <input type="checkbox" disabled style="margin: 0px 0.35em 0.25em -1.6em; vertical-align: middle;" checked> feature request
• <input type="checkbox" disabled style="margin: 0px 0.35em 0.25em -1.6em; vertical-align: middle;"> modification request

Expected Behavior

When build failed, it may output x webpack failed in 1000ms or something like that

Actual Behavior

https://github.com/nuxt/webpackbar/blob/0bc078f291f1ee392e513fafe67a72b205d5ba12/src/index.js#L124-L126

Currently it always uses consola.success no matter whether the build succeeds or not.

invalid issue

Yeah. It's already shipped in 1.3.0 ;)
https://github.com/nuxt/webpackbar/blob/master/CHANGELOG.md

When the progress bar runs in my CI (jenkins) it produces an insane amount of output. Maybe you could use the package 'isCi' to disable the progress bar in the CI environment

I'm trying to integrate it in create-guten-block.

I ejected and removed all the clear console functions so that nothing gets cleared.

Then I added webpackbar to it.

Configured it like you said and comment the stats comment so that we get all the stats.

But it still goes away after compiling.

Check 👇

Help! ⚠️

Can we also support hex colors as well?