Can't seem to find any debug option or plugin in webpack to show what exactly went into a chunk.
Why do I need this? I've noticed cases where code splitting literally makes everything much larger then just sticking everything in a single file. This is a bit counter intuitive since I don't believe the bootstrap code from webpack is that significant; I suspect it might be minification/deduping, but with out knowing which modules are actually being chunked togheter it's very hard to do some isolated tests to confirm.
My build process uses gulp; if that makes any difference.
Webpack 5.x:
$ webpack --stats-modules-space 999
Before Webpack 5.x:
It seems that it has the parameter called --display-modules
to show all the modules as follows:
$ webpack --display-modules
Then you will get the list of used modules similar the following:
Asset Size Chunks Chunk Names javascripts/webpack/app.js 211 kB 0 [emitted] javascripts/webpack/app stylesheets/webpack/app.js 4.13 kB 1 [emitted] stylesheets/webpack/app stylesheets/webpack/app.scss 2.99 kB 1 [emitted] stylesheets/webpack/app [0] ./app/webpack/js/behaviors/lory-icon-slider.js.coffee 1.1 kB {0} [optional] [built] [1] ./app/webpack/css/components (\.scss|\.css)$ 160 bytes {1} [built] [2] ./app/webpack/js/behaviors (\.js|\.js.jsx|\.js.coffee)$ 252 bytes {0} [built] [3] ./~/pickmeup/css/pickmeup.scss 41 bytes {1} [built] [4] ./app/webpack/css/app.js 205 bytes {1} [built] [5] ./app/webpack/js/app.js 250 bytes {0} [built] [6] ./app/webpack/js/behaviors/pickmeup-fixed-calendar.js 3.47 kB {0} [optional] [built] [7] ./~/lory.js/dist/jquery.lory.js 25 kB {0} [built] [8] ./~/pickmeup/js/pickmeup.js 41.4 kB {0} [built] [9] (webpack)/buildin/global.js 509 bytes {0} [built] Child extract-text-webpack-plugin: [0] ./~/css-loader/lib/css-base.js 1.51 kB {0} [built] [1] ./~/css-loader!./~/sass-loader/lib/loader.js!./~/pickmeup/css/pickmeup.scss 3.23 kB {0} [built]
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