Repository webpackbar

manniL

manniL resolved the question #c8

webpackbar • 2 days ago

Are there any examples about multiple concurrent builds (SSR) ?

Nuxt is using webpackbar for SSR and CSR builds in its latest nuxt-edge releases.

rustjason

rustjason posted a new question

webpackbar • 11 days ago

feature request

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.

mherodev

mherodev posted a new bug report

webpackbar • a month ago

bug Bars aren't filling completely before rendering success

image

  • 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

mherodev

mherodev posted a new question

webpackbar • a month ago

Bars aren't filling completely before rendering success

image

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

joacim-boive

joacim-boive posted a new question

webpackbar • a month ago

Duplicated profiling information in the console
  • 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

wuweijia

wuweijia posted a new question

webpackbar • 3 months ago

Why is the CSS bundle file "comm.css" at the end of the nuxt package, It's not supposed to be in front ?

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

thomaseizinger

thomaseizinger posted a new bug report

webpackbar • 3 months ago

bug ESLint is broken as soon as WebpackBar is added as a plugin
  • 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.

jimblue

jimblue posted a new question

webpackbar • 3 months ago

[feature request] add an option to only display the progress bar
  • 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.

screen shot 2018-05-06 at 03 55 38

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

Thanks!

sshmyg

sshmyg posted a new question

webpackbar • 4 months ago

Double progress
  • 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
    image
  • webpack
    image

How Do We Reproduce?

Start app with webpack dev server and with this plugin

yuhaoju

yuhaoju posted a new question

webpackbar • 4 months ago

Are there any examples about multiple concurrent builds (SSR) ?

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

dtothefp

dtothefp posted a new question

webpackbar • 4 months ago

Progress Bar Closes Before Compilation Completes
  • 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.

egoist

egoist posted a new question

webpackbar • 4 months ago

Use correct status for "compiledIn"

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.

le0nik

le0nik posted a new question

webpackbar • 5 months ago

[Bug]: Cannot find module "esm" required in "consola" package

invalid issue

pi0

pi0 implemented the feature request #c2

webpackbar • 5 months ago

idea Support Hex Colors
pi0

pi0 resolved the question #c4

webpackbar • 5 months ago

Don't run in CI
hipstersmoothie

hipstersmoothie posted a new question

webpackbar • 5 months ago

Don't run in CI

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

ahmadawais

ahmadawais posted a new question

webpackbar • 5 months ago

The Console Gets Cleared

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 👇

image

Help! ⚠️

huchenme

huchenme posted a new feature request

webpackbar • 5 months ago

idea Support Hex Colors

Can we also support hex colors as well?

arjunkomath

arjunkomath posted a new question

webpackbar • 5 months ago

Webpack Error after adding plugin

I'm unable to run webpack after adding the plugin, stack trace is as below:

Node version: v9.3.0
Webpack version: 3.10.0
Package version: 1.1.3

/usr/local/lib/node_modules/webpack/bin/webpack.js:348
            throw err;
            ^

TypeError: Cannot read property 'done' of undefined
    at WebpackBarPlugin.apply (/Users/arjun/Projects/dashboard/node_modules/webpackbar/dist/index.js:61:20)
    at Compiler.apply (/usr/local/lib/node_modules/webpack/node_modules/tapable/lib/Tapable.js:375:16)
    at webpack (/usr/local/lib/node_modules/webpack/lib/webpack.js:33:19)
    at processOptions (/usr/local/lib/node_modules/webpack/bin/webpack.js:335:15)
    at yargs.parse (/usr/local/lib/node_modules/webpack/bin/webpack.js:396:2)
    at Object.Yargs.self.parse (/usr/local/lib/node_modules/webpack/node_modules/yargs/yargs.js:533:18)
    at Object.<anonymous> (/usr/local/lib/node_modules/webpack/bin/webpack.js:152:7)
    at Module._compile (module.js:660:30)
    at Object.Module._extensions..js (module.js:671:10)
    at Module.load (module.js:573:32)
    at tryModuleLoad (module.js:513:12)
    at Function.Module._load (module.js:505:3)
    at Function.Module.runMain (module.js:701:10)
    at startup (bootstrap_node.js:194:16)
    at bootstrap_node.js:618:3