From 98d4384542716df0aaaec419580f60222d06d580 Mon Sep 17 00:00:00 2001 From: Baldur Helgason Date: Wed, 31 Jan 2018 10:04:07 +0000 Subject: [PATCH 1/2] Adds and updates plugins dealing with chunk hashes --- config/extenders/codeSplitting.js | 25 ++++++++++++++++++++++--- package.json | 5 +++-- yarn.lock | 16 ++++++++++------ 3 files changed, 35 insertions(+), 11 deletions(-) diff --git a/config/extenders/codeSplitting.js b/config/extenders/codeSplitting.js index 31e43da..070158c 100644 --- a/config/extenders/codeSplitting.js +++ b/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__', })), @@ -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({ diff --git a/package.json b/package.json index 80ace2b..70c2b70 100644 --- a/package.json +++ b/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", diff --git a/yarn.lock b/yarn.lock index 74532c5..7eef70a 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2995,9 +2995,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" @@ -3006,9 +3006,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" @@ -5161,6 +5161,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" From 1dcac588a28d2de275fde622efbcbcc8b11b9420 Mon Sep 17 00:00:00 2001 From: Baldur Helgason Date: Wed, 31 Jan 2018 13:50:23 +0000 Subject: [PATCH 2/2] Remove dev condition --- config/extenders/codeSplitting.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/config/extenders/codeSplitting.js b/config/extenders/codeSplitting.js index 070158c..626f43f 100644 --- a/config/extenders/codeSplitting.js +++ b/config/extenders/codeSplitting.js @@ -110,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'),