Long term caching - separate chunks for app, vendor libs, webpack man…

…ifest.

Current use case & Webpack 3.8.1 didn't appear to need any of various
plugins and techniques described:
- https://webpack.js.org/plugins/hashed-module-ids-plugin
- https://webpack.js.org/plugins/named-modules-plugin
- NamedChunksPlugin (built-in, mentioned in predictable caching article)
- https://webpack.js.org/guides/caching/#conclusion
- https://medium.com/webpack/predictable-long-term-caching-with-webpack-d3eee1d3fa31
- webpack/webpack#1315
- webpack/webpack.js.org#652
- webpack/webpack#4913
- https://gist.github.com/jouni-kantola/1c1e2bfaebf30de50d1b6a71b869da13
- https://gist.github.com/sokra/ff1b0290282bfa2c037bdb6dcca1a7aa

README.md

@@ -15,6 +15,8 @@ Build:
 * Webpack
 * Minification
 * Tree-shaking
+* App/vendor code split
+* Long-term caching
 * Bundle analysis
 * Source maps (TypeScript, styles)
 

config/webpack.common.js

@@ -1,5 +1,6 @@
 const path = require('path');
 
+const webpack = require('webpack');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 
 const rootPath = path.resolve(__dirname, '../');
@@ -40,11 +41,19 @@ module.exports = {
     ]
   },
 
-  output: {
-    filename: '[name].bundle.js'
-  },
-
   plugins: [
+    // Vendor chunk for libraries, separate from application code
+    new webpack.optimize.CommonsChunkPlugin({
+      name: 'vendor',
+      minChunks: (module, count) => module.context.includes('node_modules')
+    }),
+
+    // Webpack runtime & manifest chunk (needs to be the last CommonsChunk)
+    new webpack.optimize.CommonsChunkPlugin({
+      name: 'runtime-manifest',
+      minChunks: Infinity // ensures no modules go in the chunk
+    }),
+
     // Creates index.html
     new HtmlWebpackPlugin({
       favicon: './src/favicon.ico',

config/webpack.dev.js

@@ -12,5 +12,9 @@ module.exports = Object.assign({}, common, {
 
   // Cheaper alternative to eval-source-map, since column mappings (for inline breakpoints) are
   // broken in Chrome 62 anyway - even for the most basic standalone tsc-only or webpack-only examples.
-  devtool: 'cheap-module-eval-source-map'
+  devtool: 'cheap-module-eval-source-map',
+
+  output: {
+    filename: '[name].js'
+  }
 });

config/webpack.prod.js

@@ -11,9 +11,10 @@ const rootPath = path.resolve(__dirname, '../');
 module.exports = Object.assign({}, common, {
   devtool: 'source-map',
 
-  output: Object.assign({}, common.output, {
+  output: {
+    filename: '[name].[chunkhash].js',
     path: path.resolve(rootPath, 'dist')
-  }),
+  },
 
   performance: {
     // Prevent limit breaches going unnoticed

docs/backlog.md

@@ -38,20 +38,9 @@ Testing:
 * Workflows - debugging, watching
 
 Build:
-* App/vendor code split
-  <details>
-    https://webpack.js.org/concepts/entry-points/#separate-app-and-vendor-entries
-    https://webpack.js.org/guides/build-performance/#dlls
-  </details>
 * Compression
 * Continuous integration target (build, check, & test) & server config
 * ES6 build for modern browsers
-* Long-term caching
-  <details>
-    https://medium.com/webpack/predictable-long-term-caching-with-webpack-d3eee1d3fa31
-    https://survivejs.com/webpack/optimizing/separating-manifest/
-    https://webpack.js.org/guides/build-performance/#minimal-entry-chunk
-  </details>
 
 Development:
 * Hot reloading