Laravel-mix: How to hide webpack output result table ?

Created on 11 Jan 2021  Β·  7Comments  Β·  Source: JeffreyWay/laravel-mix

  • Laravel Mix Version: 6.0.6
  • Node Version: 14.15.4
  • NPM Version: 6.13.7
  • Webpack Version: 5.11.1
  • cross-env Version: 7.0.3
  • OS: Windows 10

Hi,

When i build for production with the command below, i have the webpack results in a table.
npm run production
Where script is:
cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --config=node_modules/laravel-mix/setup/webpack.config.js

How could i hide the table below and just show "Compiled Successfully in xxxx ms"

   Laravel Mix v6.0.6   


βœ” Compiled Successfully in 13063ms
β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”¬β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”
β”‚ File                              β”‚ Size     β”‚
β”œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”Όβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€
β”‚ fonts/vendor/@fortawesome/fontaw… β”‚ 896 KiB  β”‚
β”œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”Όβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€
β”‚ fonts/vendor/@fortawesome/fontaw… β”‚ 730 KiB  β”‚
β”œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”Όβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€
β”‚ /js/app.js                        β”‚ 310 KiB  β”‚
β”œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”Όβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€
β”‚ css/app.css                       β”‚ 290 KiB  β”‚
β”œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”Όβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€
................................

Thanks for you help

enhancement

Most helpful comment

I had the same issue when using a package that copied a few hundred images to the public folder. Mix would just print every single file on every compilation. I invested some time since it was really annoying.

Turns out you can simply add an event hook and overwrite the assets object.

mix.after((stats) => {
  stats.compilation.assets = {}
})

This however prevents mix from displaying any files at all.
If you only want to remove unimportant files like images you can just do this.

mix.after((stats) => {
  const assets = { ...stats.compilation.assets }
  stats.compilation.assets = {}

  for (const [path, asset] of Object.entries(assets)) {
    if (path.endsWith('.js')) {
      stats.compilation.assets[path] = asset
    }
  }
})

Since you get the whole target path of the asset you can also filter them based on their destination folder or use a regex to apply a more complex filter logic.

All 7 comments

I don't think we currently expose an option to hide that. You're the only person I've seen request it, so I'm not sure it's overly necessary.

We have a logging function in our CI/CD process which has a fairly low limit on the number of bytes it stores, so having the option to disable the output table at the end would be very helpful in that case, since otherwise errors later in the CI process get hidden because the table takes up a lot of space.

In Mix 5 the output was hidden in our production deployments, and I was sad to see no option to disable it in 6.

I might be the second person.

I have two .copy() processes in my build.
That means that I end up with a table that's about two screens-high of image filenames.

The previous version discarded this information and I only saw the affected files.
( It also did a clear so it was more of a status panel )

Can I, at the very least, choose "which processes" to exclude from that table?
It also doesn't say "when" it concluded so I'm never sure which of the humongous lists were the last ones when trying to scroll up (because of the lack of clearing the terminal).

Hello,

same issue here,

the new table is unusable, nearly 50+ rows,

every file is listed, woff2 / css / json / svg and so on

βœ” Compiled Successfully in 80995ms

β”‚/css/iconfont.css β”‚ 12.9 KiB β”‚
β”‚icons/fonts/MaterialIcons-Regular.eot β”‚ 91.6 KiB β”‚
β”‚icons/fonts/MaterialIcons-Regular.json β”‚ 42.2 KiB β”‚
β”‚icons/fonts/MaterialIcons-Regular.ttf β”‚ 225 KiB  β”‚
β”‚icons/fonts/MaterialIcons-Regular.woff β”‚ 103 KiB  β”‚
β”‚icons/fonts/MaterialIcons-Regular.woff2 β”‚ 80.6 KiB β”‚
β”‚icons/material-icons.css β”‚ 98.1 KiB β”‚
β”‚/css/prism-tomorrow.css β”‚ 1.72 KiB β”‚
β”‚/css/framework.css β”‚ 189 KiB  β”‚
β”‚/fonts/MaterialIcons-Regular.woff β”‚ 77.7 KiB β”‚
β”‚/fonts/brandon-grotesque-medium.otf β”‚ 87.5 KiB β”‚
β”‚/fonts/feather.eot β”‚ 60.6 KiB β”‚
β”‚/fonts/feather.svg β”‚ 209 KiB  β”‚
β”‚/fonts/feather.ttf β”‚ 60.5 KiB β”‚
β”‚/fonts/feather.woff β”‚ 28.8 KiB β”‚
β”‚/js/app.js β”‚ 1.5 MiB  β”‚
β”‚/js/manifest.js β”‚ 15.5 KiB β”‚
β”‚/js/vendor.js β”‚ 10.9 MiB β”‚
β”‚css/app.css β”‚ 74.2 KiB β”‚
β”‚css/main.css β”‚ 1.56 MiB β”‚
β”‚c576abad9184bbb211ea6e64eb39d2e3 β”‚ 6.02 KiB β”‚
β”‚js/chunks/ag-grid.js β”‚ 6.02 MiB β”‚
β”‚js/chunks/module18.js β”‚ 3.22 MiB β”‚
β”‚js/chunks/module17/form.js β”‚ 1.57 MiB β”‚
β”‚js/chunks/module16/index.js β”‚ 1.04 MiB β”‚
β”‚js/chunks/module15/form.js β”‚ 3.3 MiB  β”‚
β”‚js/chunks/module14/index.js β”‚ 1.21 MiB β”‚
β”‚js/chunks/fabric.js β”‚ 2.49 MiB β”‚
β”‚js/chunks/filestack.js β”‚ 668 KiB  β”‚
β”‚js/chunks/module12.js β”‚ 109 KiB  β”‚
β”‚js/chunks/module12b.js β”‚ 63 KiB   β”‚
β”‚js/chunks/module11.js β”‚ 1.14 MiB β”‚
β”‚js/chunks/module10.js β”‚ 89.3 KiB β”‚
β”‚js/chunks/pdfjs-dist.js β”‚ 1010 KiB β”‚
β”‚js/chunks/module9.js β”‚ 1.11 MiB β”‚
β”‚js/chunks/module8/diagnostic.js β”‚ 977 KiB  β”‚
β”‚js/chunks/module8/form.js β”‚ 1.11 MiB β”‚
β”‚js/chunks/module8/index.js β”‚ 945 KiB  β”‚
β”‚js/chunks/module8/order.js β”‚ 1.09 MiB β”‚
β”‚js/chunks/module8/stat.js β”‚ 63 KiB   β”‚
β”‚js/chunks/module7.js β”‚ 119 KiB  β”‚
β”‚js/chunks/module6.js β”‚ 1.16 MiB β”‚
β”‚js/chunks/module5/form.js β”‚ 1.9 MiB  β”‚
β”‚js/chunks/module4/index.js β”‚ 1.24 MiB β”‚
β”‚js/chunks/module3.js β”‚ 20.1 KiB β”‚
β”‚js/chunks/module2.js β”‚ 2.04 MiB β”‚
β”‚js/chunks/module1.js β”‚ 4.16 MiB β”‚
β”‚pdf.worker.worker.js β”‚ 3.4 MiB  β”‚

I had the same issue when using a package that copied a few hundred images to the public folder. Mix would just print every single file on every compilation. I invested some time since it was really annoying.

Turns out you can simply add an event hook and overwrite the assets object.

mix.after((stats) => {
  stats.compilation.assets = {}
})

This however prevents mix from displaying any files at all.
If you only want to remove unimportant files like images you can just do this.

mix.after((stats) => {
  const assets = { ...stats.compilation.assets }
  stats.compilation.assets = {}

  for (const [path, asset] of Object.entries(assets)) {
    if (path.endsWith('.js')) {
      stats.compilation.assets[path] = asset
    }
  }
})

Since you get the whole target path of the asset you can also filter them based on their destination folder or use a regex to apply a more complex filter logic.

I'm gonna re-open this. I think showing 100s of files is overkill and we need at least some way to filter them. Also we need to investigate if we can show only changed files when watching.

I won't have the time to put forth to this today (maybe this week?) but we'd definitely welcome a PR and I'll be more than happy to help whoever work through it.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

Micaso picture Micaso  Β·  3Comments

pixieaka picture pixieaka  Β·  3Comments

kpilard picture kpilard  Β·  3Comments

terion-name picture terion-name  Β·  3Comments

jpmurray picture jpmurray  Β·  3Comments