Large console output produced by mini-css-extract-plugin

Question

Been trying to research this but it doesn't seem as if any else has this, or see this as an issue.

I am using mini-css-extract-plugin(MiniCssExtractPlugin) in my webpack.config.js.

However, when I run webpack the console is littered with hundreds of instances of something similar to this...

Child mini-css-extract-plugin ../../../node_modules/css-loader/index.js??ref--6-1!../../../node_modules/postcss-loader/src/index.js!../../../node_modules/sass-loader/lib/loader.js!ui/radiolist-toggler/RadioListToggler.scss:
    Entrypoint mini-css-extract-plugin = *
    [../../../node_modules/css-loader/index.js?!../../../node_modules/postcss-loader/src/index.js!../../../node_modules/sass-loader/lib/loader.js!./ui/radiolist-toggler/RadioListToggler.scss] /Users/~~~/git/user-section/node_modules/css-loader??ref--6-1!/Users/~~~/git/user-section/node_modules/postcss-loader/src!/Users/~~/git/user-section/node_modules/sass-loader/lib/loader.js!./ui/radiolist-toggler/RadioListToggler.scss 5.33 KiB {mini-css-extract-plugin} [built]
        + 1 hidden module

I need to scroll up for a good few seconds to be able to see all my assets etc.

I am pretty new to webpack, so not exactly sure how to prevent this from being output to the console?

Below is my webpack.config.js

const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const OptimizeCssAssetsPlugin = require("optimize-css-assets-webpack-plugin");
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const modernizr = require("modernizr");
const CopyWebpackPlugin = require('copy-webpack-plugin');
const CompressionPlugin = require('compression-webpack-plugin');


module.exports = {
  context: path.resolve(__dirname, 'src/main/client'),
  entry: './index',
  devtool: 'cheap-module-source-map',
  optimization: {
    minimizer: [
      new UglifyJsPlugin({
        cache: true,
        parallel: true,
        uglifyOptions: {
          mangle: true,
          compress: true,
          ecma: 6
        },
        sourceMap: true
      }),
      new OptimizeCssAssetsPlugin({}),
    ],
    splitChunks: {
      chunks: 'all'
    }
  },
  plugins: [
    new CompressionPlugin({
      test: /\.js$|\.css$|\.html$|\.(png|svg|jpg|gif)$/,
      cache: true,
      filename: '[path].gz[query]',
      algorithm: 'gzip',
      threshold: 10240
    }),
    new CleanWebpackPlugin([
      './target/webapp'
    ]),
    new HtmlWebpackPlugin({
      template: './index.html',
      filename: '../index.html',
      xhtml: true
    }),
    new MiniCssExtractPlugin({
      filename: "[name].css",
    }),
    new CopyWebpackPlugin([{
      from: '../webapp/**/*',
      to: '../'
    }]),
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': '"production"'
    }),
  ],
  output: {
    publicPath: '/app/',
    filename: '[name].bundle.js',
    chunkFilename: '[id].js',
    path: path.resolve(__dirname, 'target/webapp/app/')
  },
  module: {
    rules: [{
        loader: "webpack-modernizr-loader",
        test: /\.modernizrrc\.js$/
      },
      {
        test: /\.html$/,
        exclude: /node_modules/,
        use: {
          loader: 'html-loader'
        }
      },
      {
        test: /\.s?css$/,
        use: [
          MiniCssExtractPlugin.loader,
          {
            loader: 'css-loader',
            options: {
              importLoaders: 1
            }
          },
          {
            loader: 'postcss-loader'
          },
          {
            loader: 'sass-loader'
          }
        ]
      },
      {
        test: /\.(png|svg|jpg|gif)$/,
        use: [
          'file-loader'
        ]
      },
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/,
        use: [{
          loader: 'file-loader',
          options: {
            name: '[name].[ext]',
            outputPath: './assets/fonts/'
          }
        }]
      },
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        loader: "babel-loader",
        options: {
          presets: ["@babel/env"]
        }
      }
    ],
  },
  resolve: {
    alias: {
      // You can add comment "Please do not delete this file" in this file
      modernizr$: path.resolve(__dirname, "./.modernizrrc.js")
    }
  }
}

Answer 1

@mcclosa mentioned this as a comment but in case anyone should look at this question, see no answer and click away, the solution is to add the stats option to your webpack.config.js file as follows:

module.exports = {
   stats: { children: false },
}

The above option uses the children: false option suggested by @mcclosa, which does successfully remove the junk output by mini-css-extract-plugin, but I find using the preset stats: "minimal" produces a much nicer overall output. Using:

module.exports = {
   stats: "minimal",
}

..gives me the following tiny output whenever my build has no errors:

i ｢wdm｣: Compiling...
i ｢wdm｣:    69 modules
i ｢wdm｣: Compiled successfully.

..as opposed to dozens of lines of useless build data, but it will continue to give give error information when errors are present.

Answer 2

Unfortunately, mini-css-extract-loader does not have a setting to control the verbosity of its log output.

Setting stats.children to false or "minimal" in your webpack.config.js can remove a lot of other useful output like your bundle names and sizes, entry point information, time taken to build, legitimate warnings and errors from other plugins that you may want to keep, etc.

Instead it seems that we must add a plugin that executes on the compiler's done hook to remove items from the stats.compilation object associated with mini-css-extract-plugin.

This example plugin should work:

class CleanupMiniCssExtractPlugin {
  apply(compiler) {
    compiler.hooks.done.tap("CleanupMiniCssExtractPlugin", stats => {
      if (this._children) {
        const children = stats.compilation.children;
        if (Array.isArray(children)) {
          stats.compilation.children = children.filter(
            child => child.name.indexOf("mini-css-extract-plugin") == -1
          );
        }
      }
    });
  }
}

Or you can use this npm package: https://www.npmjs.com/package/cleanup-mini-css-extract-plugin