CODEWITHSUNDEEP
webpacknuxt.js
Dipu
Dipu

Reputation: 8279

How can I stop showing build logs from webpack?

I want is to stop displaying build logs like this:

Hash: 5a2a3d23f88174970ed8
Version: webpack 3.12.0
Time: 22209ms
                                         Asset       Size  Chunks                    Chunk Names
   pages/widgets/index.51838abe9967a9e0b5ff.js    1.17 kB      10  [emitted]         pages/widgets/index
                       img/icomoon.7f1da5a.svg    5.38 kB          [emitted]         
                     fonts/icomoon.2d429d6.ttf    2.41 kB          [emitted]         
           img/fontawesome-webfont.912ec66.svg     444 kB          [emitted]  [big]  
         fonts/fontawesome-webfont.b06871f.ttf     166 kB          [emitted]         
                        img/mobile.8891a7c.png    39.6 kB          [emitted]         
                   img/play_button.6b15900.png    14.8 kB          [emitted]         
                  img/keyword-back.f95e10a.jpg    43.4 kB          [emitted]         
                    fonts/icomoon.16db67c.woff    2.49 kB          [emitted]         
                     fonts/icomoon.2fcbf50.eot    2.58 kB          [emitted]         
         fonts/fontawesome-webfont.674f50d.eot     166 kB          [emitted]         
        fonts/fontawesome-webfont.fee66e7.woff      98 kB          [emitted]         

.
.
.

I was using ava to run tests. But these logs are annoying me. I tried to set webpack stats config in nuxt.config.js, but it is not working. Can someone provide any help?

// Does not work
{
  ...
  build: {
    ...
    extend (config, { isClient }) {
      ...
      if (process.env.NODE_ENV === 'test') {
        config.stats = 'errors-only'
      }
    }
  }
 ...
}

Update: The following can hide assets logs, but it still shows warnings:

// Works, but does not hide warnings
{
  ...
  build: {
    stats: process.env.NODE_ENV === 'test' ? 'errors-only' {
      chunks: false,
      children: false,
      modules: false,
      colors: true,
      assets: true,
      warnings: true,
      errors: true,
      excludeAssets: [
        /.map$/,
        /index\..+\.html$/,
        /vue-ssr-client-manifest.json/
      ]
    },
    ...
  }
 ...
}

But this does not hide the warnings:

 WARNING  Compiled with 2 warnings

 warning  

asset size limit: The following asset(s) exceed the recommended size limit (300 kB).
This can impact web performance.
Assets: 
  img/fontawesome-webfont.912ec66.svg (444 kB)
  vendor.4db9bb219a2a9c02d939.js (726 kB)
  app.f14777ec0017fec245a3.js (546 kB)

 warning  

entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (1 MB). This can impact web performance.
Entrypoints:
  app (1.27 MB)
      manifest.4eb49c6cde9aa836f4d4.js
      vendor.4db9bb219a2a9c02d939.js
      app.f14777ec0017fec245a3.js

Upvotes: 5

Views: 2698

Answers (2)

Aldarund
Aldarund

Reputation: 17621

You could do something like this 

build: {

          stats: process.env.NODE_ENV === 'test' ? 'errors-only' : { // default config here for non test build. Nuxt default could be seen here
 https://github.com/nuxt/nuxt.js/blob/567dc860c1393ccf0e849b032b69edddd5b6b7bb/lib/common/nuxt.config.js#L93
 }

         ...
        }

Upvotes: 3

Ted Nyberg
Ted Nyberg

Reputation: 7391

Here's a suggestion for your webpack config:

module.exports = {
 devServer: {
  stats: {
    colors: true,
    hash: false,
    version: false,
    timings: false,
    assets: false,
    chunks: false,
    modules: false,
    reasons: false,
    children: false,
    source: false,
    errors: false,
    errorDetails: false,
    warnings: false,
    publicPath: false
  }
 }
}

The key ones to disable are hash, version, timings, assets, chunks.

This should reduce build times and suppress logging.

Note: this suggestion comes from Webpack: silence output. I couldn't flag this question as a duplicate though, as it has a bounty. :)

Upvotes: 2

Related Questions