Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

How to run bundle analyzer with Webpacker?

See original GitHub issue

I’m having issues with running webpack bundle analyzer with webpacker. I have such config in my environment.js:

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

environment.plugins.append(
  'BundleAnalyzer',
  new BundleAnalyzerPlugin(),
);

module.exports = environment;

What do I need to do next to run it? I cannot find any commands in docs

I tried commands

node_modules/.bin/webpack --config config/webpack/environment.js --profile --json > stats.json 
node_modules/.bin/webpack-bundle-analyzer stats.json

but have this error generated in stats file

/app/node_modules/webpack/bin/convert-argv.js:507
				throw new Error("'output.filename' is required, either in config file or as --output-filename");
				^

Error: 'output.filename' is required, either in config file or as --output-filename
    at processOptions (/app/node_modules/webpack/bin/convert-argv.js:507:11)
    at processConfiguredOptions (/app/node_modules/webpack/bin/convert-argv.js:150:4)
    at module.exports (/app/node_modules/webpack/bin/convert-argv.js:112:10)
    at yargs.parse (/app/node_modules/webpack/bin/webpack.js:171:41)
    at Object.Yargs.self.parse (/app/node_modules/webpack/node_modules/yargs/yargs.js:533:18)
    at Object.<anonymous> (/app/node_modules/webpack/bin/webpack.js:152:7)
    at Module._compile (module.js:653:30)
    at Object.Module._extensions..js (module.js:664:10)
    at Module.load (module.js:566:32)
    at tryModuleLoad (module.js:506:12)
    at Function.Module._load (module.js:498:3)
    at Function.Module.runMain (module.js:694:10)
    at startup (bootstrap_node.js:204:16)
    at bootstrap_node.js:625:3

Issue Analytics

State:
Created 4 years ago
Comments:5 (1 by maintainers)

Top GitHub Comments

8reactions

jackocnrcommented, Oct 23, 2019

Instructions here: https://medium.com/flatiron-labs/faster-page-loads-90c347ec952f

4reactions

zedtuxcommented, Sep 9, 2020

In the case you’re using Docker (and docker-compose), after having opened the port 8888 on the service where is running webpack, you need to update the webpack-bundle-analyzer’s config so that it runs on 0.0.0.0 rather than 127.0.0.1 otherwise it is not accessible:

environment.plugins.append('BundleAnalyzer', new BundleAnalyzerPlugin({
  analyzerHost: '0.0.0.0'
}))

Top Results From Across the Web

The webpack plugin I can't live without - rossta.net

The webpack-bundle-analyzer is a tool that you can use to visualize the contents of a webpack build. It parses the "stats" output of...

Using webpack-bundle-analyzer in rails - Thejspr

First, install the dependency yarn add -D webpack-bundle-analyzer . Then add the following to yout webpack developmen configuration: config/ ...

Webpack Bundle Analyzer (Example) - GoRails

Webpack bundles can be confusing as to what actually ships in production. Using the bundle analyzer plugin, we can visualize and see exactly ......

How to use the webpack bundle analyzer - Jakob Lind

There are two things you need to do. First, generate a stats.json file. And secondly, run webpack-bundle-analyzer with the generated stats.json file from ......

Getting the most out of Webpack(er), Part 1 | by Gabe Jackson

Most examples showing how to use the Bundle Analyzer plugin have it being used in development mode, but we've found that it actually...