This task encompasses the work to replace the NamedModulesPlugin with the HashedModuleIdsPlugin and achieve better bundle file sizes.
The NamedModulesPlugin is increasing the size of production chunks. Without the plugin:
-rw-r--r-- 1 stephen stephen 15K Nov 2 09:20 dist/public/index.963be46b3a8fc5979a51.js
-rw-r--r-- 1 stephen stephen 1.9K Nov 2 09:20 dist/public/pages/about.8f9e782e03c78d470e9b.js
-rw-r--r-- 1 stephen stephen 1.8K Nov 2 09:20 dist/public/pages/home.89d8ce82fec9c270bdf5.js
-rw-r--r-- 1 stephen stephen 349 Nov 2 09:20 dist/public/pages/not-found.ae4138657c7fcb91d789.js
-rw-r--r-- 1 stephen stephen 1.8K Nov 2 09:20 dist/public/pages/style-guide.0f48ad45dd8e071ae5de.js
-rw-r--r-- 1 stephen stephen 6.6K Nov 2 09:20 dist/public/pages/summary.dcafeb02d897b697f8bd.js
-rw-r--r-- 1 stephen stephen 8.1K Nov 2 09:20 dist/public/pages/wiki.262ca3785b12453e6be6.js
-rw-r--r-- 1 stephen stephen 1.8K Nov 2 09:20 dist/public/runtime.02254e25583a10ccf9b2.js
-rw-r--r-- 1 stephen stephen 21K Nov 2 09:20 dist/public/vendor.ee6ba16b7a12f3c5a5b2.js
With the plugin:
-rw-r--r-- 1 stephen stephen 19K Nov 2 09:21 dist/public/index.a8757c8c7eed7e8ba5f2.js
-rw-r--r-- 1 stephen stephen 2.1K Nov 2 09:21 dist/public/pages/about.63b5b679ae4cc5035873.js
-rw-r--r-- 1 stephen stephen 2.0K Nov 2 09:21 dist/public/pages/home.f56b2a6f1a25b594defc.js
-rw-r--r-- 1 stephen stephen 453 Nov 2 09:21 dist/public/pages/not-found.80e7c5ed475fca1c618a.js
-rw-r--r-- 1 stephen stephen 2.1K Nov 2 09:21 dist/public/pages/style-guide.e011b9c1615366f13640.js
-rw-r--r-- 1 stephen stephen 8.2K Nov 2 09:21 dist/public/pages/summary.1e9e00ff3e1b1c9cc1e5.js
-rw-r--r-- 1 stephen stephen 11K Nov 2 09:21 dist/public/pages/wiki.d0cab286783c949ad925.js
-rw-r--r-- 1 stephen stephen 1.8K Nov 2 09:21 dist/public/runtime.259d41978d90caaf1aad.js
-rw-r--r-- 1 stephen stephen 22K Nov 2 09:21 dist/public/vendor.ddf5e72cf229878fcbb3.js
The first and last are expected -- it's the vendor hash we want to fix. Luckily, there are two plugins we can use to resolve this issue. The first is the NamedModulesPlugin, which will use the path to the module rather than a numerical identifier. While this plugin is useful during development for more readable output, it does take a bit longer to run. The second option is the HashedModuleIdsPlugin, which is recommended for production builds: https://webpack.js.org/guides/caching/#module-identifiers