Stats

Control webpack compilation output statistics and logging

The stats option controls what bundle information gets displayed in the console after compilation. It can also be used to generate detailed JSON output for analysis.

Basic Configuration

webpack.config.js

module.exports = {
  stats: 'normal' // or 'errors-only', 'minimal', 'verbose', etc.
};

Stats Presets

stats · string | boolean | object

Control stats output.

stats: 'errors-only'
// or
stats: { colors: true, modules: false }

Preset Strings

errors-only

Only output when errors happen.

stats: 'errors-only'

Perfect for CI/CD pipelines.

errors-warnings

Only output errors and warnings.

stats: 'errors-warnings'

Good balance for production builds.

minimal

Only output when errors or new compilation happens.

stats: 'minimal'

Clean output with essential information.

normal

Standard output (default).

stats: 'normal'

Shows assets, chunks, modules, and errors/warnings.

detailed

Output everything except chunkModules and chunkRootModules.

stats: 'detailed'

More information than normal.

verbose

Output everything.

stats: 'verbose'

Maximum information for debugging.

none or false

No output.

stats: 'none'
// or
stats: false

Completely silent.

summary

Output only webpack version, warnings count, and errors count.

stats: 'summary'

Stats Object Options

Customize what information is displayed:

Assets

Assets Information

stats.assets · boolean

Show assets information.

stats: {
  assets: true
}

Default: true

stats.assetsSort · string | false

Sort assets by field.

stats: {
  assetsSort: 'size' // or 'name', 'id', etc.
}

stats.assetsSpace · number

Space to display assets.

stats: {
  assetsSpace: 15 // Show top 15 assets
}

stats.excludeAssets · string | RegExp | function | array

Exclude assets from being displayed.

stats: {
  excludeAssets: /\.map$/
}

stats.cachedAssets · boolean

Show cached (not emitted) assets.

stats: {
  cachedAssets: false
}

Default: true

Modules

Modules Information

stats.modules · boolean

Show modules information.

stats: {
  modules: true
}

Default: true

stats.modulesSort · string | false

Sort modules by field.

stats: {
  modulesSort: 'size' // or 'name', 'id', etc.
}

stats.modulesSpace · number

Space to display modules.

stats: {
  modulesSpace: 15
}

stats.excludeModules · string | RegExp | function | array

Exclude modules from being displayed.

stats: {
  excludeModules: /node_modules/
}

stats.cachedModules · boolean

Show cached (not built) modules.

stats: {
  cachedModules: false
}

Chunks

Chunks Information

stats.chunks · boolean

Show chunk information.

stats: {
  chunks: true
}

Default: true

stats.chunksSort · string | false

Sort chunks by field.

stats: {
  chunksSort: 'size'
}

stats.chunkModules · boolean

Show modules inside chunks.

stats: {
  chunkModules: true
}

stats.chunkGroups · boolean

Show chunk groups.

stats: {
  chunkGroups: true
}

Errors and Warnings

Errors and Warnings

stats.errors · boolean

Show errors.

stats: {
  errors: true
}

Default: true

stats.errorsCount · boolean

Show errors count.

stats: {
  errorsCount: true
}

stats.errorDetails · boolean | 'auto'

Show details for errors.

stats: {
  errorDetails: true
}

stats.warnings · boolean

Show warnings.

stats: {
  warnings: true
}

Default: true

stats.warningsCount · boolean

Show warnings count.

stats: {
  warningsCount: true
}

stats.warningsFilter · string | RegExp | function | array

Filter warnings to be shown.

stats: {
  warningsFilter: /size limit/
}

Other Options

Display Options

stats.colors · boolean | object

Enable/disable colors in output.

stats: {
  colors: true
}

Default: false (auto-detected in terminal)

stats.hash · boolean

Show compilation hash.

stats: {
  hash: true
}

stats.version · boolean

Show webpack version.

stats: {
  version: true
}

stats.timings · boolean

Show timing information.

stats: {
  timings: true
}

stats.builtAt · boolean

Show build timestamp.

stats: {
  builtAt: true
}

stats.entrypoints · boolean | 'auto'

Show entry points.

stats: {
  entrypoints: true
}

Grouping Options

stats.groupAssetsByPath · boolean

Group assets by path.

stats: {
  groupAssetsByPath: true
}

stats.groupAssetsByExtension · boolean

Group assets by extension.

stats: {
  groupAssetsByExtension: true
}

stats.groupModulesByPath · boolean

Group modules by path.

stats: {
  groupModulesByPath: true
}

Common Configurations

Development

webpack.dev.js

module.exports = {
  stats: 'minimal'
  // or
  stats: {
    colors: true,
    modules: false,
    children: false,
    chunks: false,
    chunkModules: false
  }
};

Production

webpack.prod.js

module.exports = {
  stats: 'normal'
  // or
  stats: {
    colors: true,
    hash: true,
    timings: true,
    assets: true,
    chunks: false,
    chunkModules: false,
    modules: false,
    children: false
  }
};

CI/CD

webpack.config.js

module.exports = {
  stats: 'errors-warnings'
  // or
  stats: {
    all: false,
    errors: true,
    warnings: true,
    errorDetails: true
  }
};

Detailed Analysis

webpack.config.js

module.exports = {
  stats: {
    assets: true,
    assetsSort: 'size',
    modules: true,
    modulesSort: 'size',
    chunks: true,
    chunkModules: true,
    reasons: true,
    depth: true,
    usedExports: true,
    providedExports: true,
    optimizationBailout: true,
    errorDetails: true,
    performance: true
  }
};

JSON Stats Output

Generate detailed JSON statistics:

webpack --json > stats.json

With specific stats options:

webpack --json=verbose > stats.json

Programmatic:

const webpack = require('webpack');
const config = require('./webpack.config.js');

webpack(config, (err, stats) => {
  if (err || stats.hasErrors()) {
    console.error(stats.toString('errors-only'));
  }
  
  const jsonStats = stats.toJson({
    all: false,
    assets: true,
    modules: true
  });
  
  console.log(JSON.stringify(jsonStats, null, 2));
});

Stats Utilities

webpack-bundle-analyzer

Visualize bundle content:

const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');

module.exports = {
  plugins: [
    new BundleAnalyzerPlugin({
      analyzerMode: 'static',
      reportFilename: 'bundle-report.html',
      openAnalyzer: false,
      generateStatsFile: true,
      statsFilename: 'stats.json'
    })
  ]
};

webpack-visualizer

Online tool at https://chrisbateman.github.io/webpack-visualizer/

Upload your stats.json file.

webpack-chart

Online tool at https://alexkuz.github.io/webpack-chart/

DevServer Stats

Configure stats for dev server:

webpack.config.js

module.exports = {
  devServer: {
    client: {
      logging: 'info' // or 'log', 'warn', 'error', 'none'
    }
  },
  stats: 'minimal'
};

Infrastructure Logging

Control webpack’s internal logging:

webpack.config.js

module.exports = {
  infrastructureLogging: {
    level: 'info', // 'none', 'error', 'warn', 'info', 'log', 'verbose'
    debug: /webpack/,
    colors: true
  }
};

Performance Tips

Reduce Stats Size

stats: {
  assets: true,
  chunks: false,
  modules: false,
  children: false,
  source: false
}

Focus on Errors

stats: {
  all: false,
  errors: true,
  errorDetails: true,
  warnings: true
}

Environment-Based Stats

webpack.config.js

module.exports = (env, argv) => {
  const isProduction = argv.mode === 'production';
  
  return {
    stats: isProduction ? 'normal' : 'minimal'
  };
};

Custom Stats Output

webpack.config.js

class CustomStatsPlugin {
  apply(compiler) {
    compiler.hooks.done.tap('CustomStatsPlugin', (stats) => {
      const info = stats.toJson({
        all: false,
        assets: true,
        errors: true
      });
      
      console.log('\n=== Build Summary ===');
      console.log(`Total Assets: ${info.assets.length}`);
      console.log(`Total Size: ${info.assets.reduce((sum, a) => sum + a.size, 0)} bytes`);
      console.log(`Errors: ${info.errors.length}`);
    });
  }
}

module.exports = {
  plugins: [new CustomStatsPlugin()],
  stats: 'none' // Disable default stats
};

Package.json Scripts

package.json

{
  "scripts": {
    "build": "webpack --mode production",
    "build:stats": "webpack --mode production --json > stats.json",
    "build:verbose": "webpack --mode production --stats verbose",
    "build:silent": "webpack --mode production --stats errors-only",
    "analyze": "webpack --mode production --json | webpack-bundle-analyzer --stdin"
  }
}