Webpack-bundle-analyzer: Font size does not fit into box

[muuvmuuv]

Issue description

As you can see in this screenshot. Alle asset titles are way too big for the outlining box.

Technical info

• Webpack Bundle Analyzer version: 3.6.0
• Webpack version: 4.41.2
• Node.js version: v10.16.3
• npm/yarn version: npm 6.9.0
• OS: macOS 10.15

Debug info

How do you use this module? As CLI utility or as plugin? => Plugin

If CLI, what command was used? (e.g. webpack-bundle-analyzer -O path/to/stats.json)

If plugin, what options were provided? (e.g. new BundleAnalyzerPlugin({ analyzerMode: 'disabled', generateStatsFile: true })) => blank, no options

What other Webpack plugins were used?

webpack.config.js:

const { ProvidePlugin } = require('webpack')
const path = require('path')
const { red, green } = require('kleur')
const TerserPlugin = require('terser-webpack-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const ManifestPlugin = require('webpack-manifest-plugin')
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin

module.exports = (_, argv) => {
  const root = path.resolve(__dirname)
  const dist = path.resolve(root, 'dist')
  const cache = path.resolve(root, '.cache')
  const isProd = argv.mode === 'production'
  const isDev = argv.mode === 'development'

  console.log('devMode:', isDev ? green(isDev) : red(isDev), '\n')

  return {
    entry: {
      // Main
      main: './source/js/app.js',

      // Business Units
      academy: './source/js/pages/academy.js',
      additive: './source/js/pages/additive.js',
      'it-service': './source/js/pages/it-service.js',
      messtechnik: './source/js/pages/messtechnik.js',
      software: './source/js/pages/software.js',
      solutions: './source/js/pages/solutions.js',

      // Styles
      style: './source/scss/main.scss',
    },
    target: 'web',
    devtool: isDev ? 'cheap-module-eval-source-map' : 'source-map',
    output: {
      path: dist,
      filename: isDev ? '[name].js' : '[name].[chunkhash].js',
    },
    externals: {
      jquery: 'jQuery',
    },

    optimization: {
      concatenateModules: true,
      namedModules: true,
      namedChunks: true,
      runtimeChunk: 'single',
      splitChunks: {
        minSize: 10,
        cacheGroups: {
          vendor: {
            test: /[\\/]node_modules[\\/]/,
            reuseExistingChunk: true,
            name: 'vendor',
            chunks: 'all',
          },
          jquery: {
            test: /[\\/]node_modules[\\/]jquery[\\/]/,
            reuseExistingChunk: true,
            name: 'jquery',
            chunks: 'all',
            priority: 10,
            enforce: true,
          },
        },
      },
      minimize: isProd,
      minimizer: [
        new TerserPlugin({
          extractComments: 'some',
          sourceMap: false,
          cache: cache,
        }),
        new OptimizeCSSAssetsPlugin({
          cssProcessor: require('cssnano'),
          cssProcessorPluginOptions: {
            preset: [
              'advanced',
              {
                discardComments: { removeAll: true },
              },
            ],
          },
        }),
      ],
    },

    plugins: [
      new ManifestPlugin(),
      new CleanWebpackPlugin({
        cleanStaleWebpackAssets: false,
        protectWebpackAssets: true,
        cleanOnceBeforeBuildPatterns: ['**/*'],
      }),
      new ProvidePlugin({
        $: 'jquery',
        jQuery: 'jquery',
      }),
      new MiniCssExtractPlugin({
        filename: isDev ? '[name].css' : '[name].[chunkhash].css',
        chunkFilename: isDev ? '[id].css' : '[id].[chunkhash].css',
      }),
      new BundleAnalyzerPlugin(),
    ],

    module: {
      rules: [
        {
          test: /\.(j|t)sx?$/,
          exclude: /node_modules/,
          use: {
            loader: 'babel-loader',
            options: {
              plugins: ['lodash'],
              presets: [['@babel/preset-env', { modules: false }]],
            },
          },
        },
        {
          test: /\.s?(c|a)ss$/,
          use: [
            {
              loader: MiniCssExtractPlugin.loader,
              options: {
                hmr: isDev,
              },
            },
            {
              loader: 'css-loader',
              options: {
                sourceMap: isDev,
              },
            },
            {
              loader: 'postcss-loader',
              options: {
                sourceMap: isDev,
                ident: 'postcss', // https://github.com/postcss/postcss-loader#plugins
                plugins: () => [require('postcss-color-mod-function')()],
              },
            },
            {
              loader: 'sass-loader',
              options: {
                sourceMap: isDev,
              },
            },
          ],
        },
        {
          test: /\.(jpe?g|png|gif|svg|webp)$/i,
          use: [
            {
              loader: 'file-loader',
              options: {
                name: isDev ? '[name].[ext]' : '[name].[hash].[ext]',
                outputPath: 'images/',
              },
            },
          ],
        },
        {
          test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
          use: [
            {
              loader: 'file-loader',
              options: {
                name: isDev ? '[name].[ext]' : '[name].[hash].[ext]',
                outputPath: 'fonts/',
              },
            },
          ],
        },
        {
          test: require.resolve('jquery'),
          use: [
            {
              loader: 'expose-loader',
              options: 'jQuery',
            },
            {
              loader: 'expose-loader',
              options: '$',
            },
          ],
        },
      ],
    },

    stats: {
      hash: false,
      version: false,
      timings: true,
      children: false,
      errorDetails: true,
      entrypoints: false,
      performance: isProd,
      chunks: false,
      modules: false,
      reasons: false,
      source: false,
      publicPath: false,
      builtAt: false,
    },

    performance: {
      hints: false,
    },
  }
}

[th0r]

What is the browser? What plugins/addons are enabled? Does it happen in incognito mode (with all the plugins/addons disabled)?

[valscion]

Possibly duplicate of https://github.com/webpack-contrib/webpack-bundle-analyzer/issues/318

[muuvmuuv]

@th0r it is Brave. Yes it's a duplicate @valscion. Have not seen this one. Really strange. I'll open an issue on their end!