Menu
Is there a way to see which files are included in a webpack build and preferably, their size? The reason I want this is to gain insight into my builds and also keep an eye out for accidental inclusion of files that should not be in there.
216
Webpack will generate the files and put them in the /dist folder for you, but it doesn't keep track of which files are actually in use by your project. In general it's good practice to clean the /dist folder before each build, so that only used files will be generated.
Webpack is a free and open-source module bundler for JavaScript. It is made primarily for JavaScript, but it can transform front-end assets such as HTML, CSS, and images if the corresponding loaders are included. Webpack takes modules with dependencies and generates static assets representing those modules.
Webpack is first and foremost a bundler. Webpack's base functionality is to take a JavaScript file, resolve any dependencies ( require() , import , etc.), and output a bundled JavaScript file that contains all those dependencies. You can then run the bundled file without having to load those dependencies again.
By default, the webpack CLI will print the path of all included modules and their respective size.
Webpack can also generate a stats.json file for you, which contains information about every module included in your build.
From the CLI:
webpack --json > stats.json
From the NodeJS API:
webpack(config, function(err, stats) {
fs.writeFileSync('./stats.json', JSON.stringify(stats.toJson()));
});
You can then either write your own stats analyser tool, or use already existing tools like the excellent webpack stats analyser.
121
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
