Move webpack manifest out from index chunk(Improve long term caching of index chunk)

config/values.js

@@ -117,6 +117,10 @@ const values = {
   // containing details of all output files for a bundle?
   bundleAssetsFileName: 'assets.json',
 
+  // What should we name the manifest generated by chunk-manifest-webpack-plugin
+  // containing mappings for chunk ids and names?
+  bundleManifestFileName: 'manifest.json',
+
   // node_modules are not included in any bundles that target "node" as a
   // runtime (e.g.. the server bundle) as including them often breaks builds
   // due to thinks like require statements containing expressions..

internal/webpack/configFactory.js

@@ -5,6 +5,7 @@ import nodeExternals from 'webpack-node-externals';
 import path from 'path';
 import webpack from 'webpack';
 import WebpackMd5Hash from 'webpack-md5-hash';
+import InlineChunkManifestWebpackPlugin from 'inline-chunk-manifest-html-webpack-plugin';
 
 import { happyPackPlugin, log } from '../utils';
 import { ifElse } from '../../shared/utils/logic';
@@ -233,6 +234,19 @@ export default function webpackConfigFactory(buildOptions) {
       // even though 1 or 2 may have only changed.
       ifClient(() => new WebpackMd5Hash()),
 
+      // Since chunk-manifest-webpack-plugin doesn't work with webpack-dev-server
+      // https://github.com/soundcloud/chunk-manifest-webpack-plugin/issues/26
+      // we generate manifest only in production mode.
+      // Also this optimisation is to prevent better long term caching of
+      // index chunk which can be compromised in development mode.
+      ifProdClient(
+        () =>
+          new InlineChunkManifestWebpackPlugin({
+            filename: config('bundleManifestFileName'),
+            manifestVariable: 'webpackManifest',
+          }),
+      ),
+
       // These are process.env flags that you can use in your code in order to
       // have advanced control over what is included/excluded in your bundles.
       // For example you may only want certain parts of your code to be