We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
As you can see in this screenshot. Alle asset titles are way too big for the outlining box.
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)
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
new BundleAnalyzerPlugin({ analyzerMode: 'disabled', generateStatsFile: true })
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, }, } }
The text was updated successfully, but these errors were encountered:
What is the browser? What plugins/addons are enabled? Does it happen in incognito mode (with all the plugins/addons disabled)?
Sorry, something went wrong.
Possibly duplicate of #318
@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!
No branches or pull requests
Issue description
As you can see in this screenshot. Alle asset titles are way too big for the outlining box.
Technical info
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 optionsWhat other Webpack plugins were used?
webpack.config.js:
The text was updated successfully, but these errors were encountered: