Merge pull request #89 from ueno-llc/fix/chunk-hashes

Fix issues with chunk hashes

config/extenders/codeSplitting.js

@@ -7,6 +7,7 @@ import webpack from 'webpack';
 import ExtractCssChunks from 'extract-css-chunks-webpack-plugin';
 import ExtractTextPlugin from 'extract-text-webpack-plugin';
 import ChunkManifestWebpackPlugin from 'chunk-manifest-webpack-plugin';
+import NameAllModulesPlugin from 'name-all-modules-plugin';
 
 import config from '../';
 import { removeNil } from '../../internal/utils/arrays';
@@ -78,9 +79,25 @@ export default (webpackConfig, buildOptions) => {
   webpackConfig.plugins.push(
     ...removeNil([
 
-      ifClient(new ExtractCssChunks({ filename: '[name]-[contenthash].css' })),
+      // NamedModulesPlugin, NamedChunksPlugin and NameAllModulesPlugin (see below) are all here to
+      // deal with chunk hashes.
+      // See https://medium.com/webpack/predictable-long-term-caching-with-webpack-d3eee1d3fa31
+      ifClient(new webpack.NamedModulesPlugin()),
 
-      ifProdClient(() => new ChunkManifestWebpackPlugin({
+      ifClient(
+        new webpack.NamedChunksPlugin((chunk) => {
+          if (chunk.name) {
+            return chunk.name;
+          }
+          return chunk.mapModules(m => path.relative(m.context, m.request)).join('_');
+        }),
+      ),
+
+      ifClient(new ExtractCssChunks({
+        filename: isDev ? '[name].js' : '[name]-[contenthash].css',
+      })),
+
+      ifProdClient(new ChunkManifestWebpackPlugin({
         filename: '../manifest.json',
         manifestVariable: '__WEBPACK_MANIFEST__',
       })),
@@ -93,7 +110,7 @@ export default (webpackConfig, buildOptions) => {
       ifProdClient(
         new webpack.optimize.CommonsChunkPlugin({
           name: 'vendor',
-          filename: isDev ? '[name].js' : '[name]-[chunkhash].js',
+          filename: '[name]-[chunkhash].js',
           // Put all node_modules into one chunk
           // see: https://webpack.js.org/plugins/commons-chunk-plugin/#passing-the-minchunks-property-a-function
           minChunks: module => module.context && module.context.includes('node_modules'),
@@ -104,10 +121,12 @@ export default (webpackConfig, buildOptions) => {
       ifClient(
         new webpack.optimize.CommonsChunkPlugin({
           name: 'bootstrap', // needed to put webpack bootstrap code before chunks
-          filename: isDev ? '[name]-[hash].js' : '[name]-[chunkhash].js',
+          filename: isDev ? '[name].js' : '[name]-[chunkhash].js',
         }),
       ),
 
+      ifClient(new NameAllModulesPlugin()),
+
       // We only want one server chunk
       ifNode(
         new webpack.optimize.LimitChunkCountPlugin({

package.json

@@ -108,8 +108,8 @@
     "enzyme": "3.2.0",
     "enzyme-adapter-react-16": "1.1.0",
     "express": "4.15.4",
-    "extract-css-chunks-webpack-plugin": "2.0.17",
-    "extract-text-webpack-plugin": "3.0.0",
+    "extract-css-chunks-webpack-plugin": "2.0.18",
+    "extract-text-webpack-plugin": "3.0.2",
     "file-loader": "0.11.2",
     "glob": "7.1.2",
     "happypack": "3.1.0",
@@ -123,6 +123,7 @@
     "mobx": "3.2.2",
     "mobx-react": "4.2.2",
     "mobx-react-devtools": "4.2.15",
+    "name-all-modules-plugin": "1.0.1",
     "node-notifier": "5.1.2",
     "node-sass": "4.5.3",
     "normalize.css": "7.0.0",

yarn.lock

@@ -2985,9 +2985,9 @@ extglob@^0.3.1:
   dependencies:
     is-extglob "^1.0.0"
 
-extract-css-chunks-webpack-plugin@2.0.17:
-  version "2.0.17"
-  resolved "https://registry.yarnpkg.com/extract-css-chunks-webpack-plugin/-/extract-css-chunks-webpack-plugin-2.0.17.tgz#2ded0d3ed1e507f1fe058b9242baec007b98f2e2"
+extract-css-chunks-webpack-plugin@2.0.18:
+  version "2.0.18"
+  resolved "https://registry.yarnpkg.com/extract-css-chunks-webpack-plugin/-/extract-css-chunks-webpack-plugin-2.0.18.tgz#74951e5d7c3bb683914922f339b1851116356412"
   dependencies:
     ajv "4.11.2"
     async "^2.5.0"
@@ -2996,9 +2996,9 @@ extract-css-chunks-webpack-plugin@2.0.17:
     style-loader "^0.18.2"
     webpack-sources "^1.0.1"
 
-extract-text-webpack-plugin@3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/extract-text-webpack-plugin/-/extract-text-webpack-plugin-3.0.0.tgz#90caa7907bc449f335005e3ac7532b41b00de612"
+extract-text-webpack-plugin@3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/extract-text-webpack-plugin/-/extract-text-webpack-plugin-3.0.2.tgz#5f043eaa02f9750a9258b78c0a6e0dc1408fb2f7"
   dependencies:
     async "^2.4.1"
     loader-utils "^1.1.0"
@@ -5042,6 +5042,10 @@ mute-stream@0.0.7:
   version "0.0.7"
   resolved "https://registry.yarnpkg.com/mute-stream/-/mute-stream-0.0.7.tgz#3075ce93bc21b8fab43e1bc4da7e8115ed1e7bab"
 
+name-all-modules-plugin@1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/name-all-modules-plugin/-/name-all-modules-plugin-1.0.1.tgz#0abfb6ad835718b9fb4def0674e06657a954375c"
+
 nan@^2.3.0, nan@^2.3.2:
   version "2.7.0"
   resolved "https://registry.yarnpkg.com/nan/-/nan-2.7.0.tgz#d95bf721ec877e08db276ed3fc6eb78f9083ad46"