From 69a9262ab0aa3067f8c4b2df36c0d8b4b3231ca6 Mon Sep 17 00:00:00 2001 From: EugeneHlushko Date: Fri, 14 Jun 2019 13:22:27 +0300 Subject: [PATCH 1/5] docs(plugins) improve splitChunks name function doc --- src/content/plugins/split-chunks-plugin.md | 36 ++++++++++++++++++++++ 1 file changed, 36 insertions(+) diff --git a/src/content/plugins/split-chunks-plugin.md b/src/content/plugins/split-chunks-plugin.md index d6b73a3d456f..393ccbc5599e 100644 --- a/src/content/plugins/split-chunks-plugin.md +++ b/src/content/plugins/split-chunks-plugin.md @@ -165,6 +165,8 @@ T> `maxSize` takes higher priority than `maxInitialRequest/maxAsyncRequests`. Ac `boolean: true | function (module, chunks, cacheGroupKey) | string` +Also available for each cacheGroup: `splitChunks.cacheGroups.{cacheGroup}.name`. + The name of the split chunk. Providing `true` will automatically generate a name based on chunks and cache group key. Providing a string or a function allows you to use a custom name. Specifying either a string or a function that always returns the same string will merge all common modules and vendors into a single chunk. This might lead to bigger initial downloads and slow down page loads. @@ -189,6 +191,40 @@ module.exports = { }; ``` +Usage as a function: + +__main.js__ + +```js +import _ from 'lodash'; + +console.log(_.join(['Hello', 'webpack'], ' ')); +``` + +__webpack.config.js__ + +```js +module.exports = { + //... + optimization: { + cacheGroups: { + commons: { + test: /[\\/]node_modules[\\/]/, + // cacheGroupKey here is `commons` as the key of the cacheGroup + name(module, chunks, cacheGroupKey) { + const moduleFileName = module.identifier().split('/').reduceRight(item => item); + const allChunksNames = chunks.map((item) => item.name).join('~'); + return `${cacheGroupKey}-${allChunksNames}-${moduleFileName}`; + }, + chunks: 'all' + }, + } + } +}; +``` + +Running webpack with following configuration would also output a chunk of the group common with next name: `commons-main-lodash.js.e7519d2bb8777058fa27.js` (hash given as an example of real world output). + W> When assigning equal names to different split chunks, all vendor modules are placed into a single shared chunk, though it's not recommend since it can result in more code downloaded. ### `splitChunks.cacheGroups` From e0a7cc0384f15dd372d23a693f3574c0faa063df Mon Sep 17 00:00:00 2001 From: EugeneHlushko Date: Fri, 14 Jun 2019 14:08:44 +0300 Subject: [PATCH 2/5] docs(plugins) remove the empty example --- src/content/plugins/split-chunks-plugin.md | 18 ------------------ 1 file changed, 18 deletions(-) diff --git a/src/content/plugins/split-chunks-plugin.md b/src/content/plugins/split-chunks-plugin.md index 393ccbc5599e..513a0e806f62 100644 --- a/src/content/plugins/split-chunks-plugin.md +++ b/src/content/plugins/split-chunks-plugin.md @@ -175,24 +175,6 @@ If the `splitChunks.name` matches an [entry point](/configuration/entry-context/ T> It is recommended to set `splitChunks.name` to `false` for production builds so that it doesn't change names unnecessarily. -__webpack.config.js__ - -```js -module.exports = { - //... - optimization: { - splitChunks: { - name (module, chunks, cacheGroupKey) { - // generate a chunk name... - return; //... - } - } - } -}; -``` - -Usage as a function: - __main.js__ ```js From 107ec1ea9061818b6b0f88f9e7df3ef9cb26505b Mon Sep 17 00:00:00 2001 From: EugeneHlushko Date: Fri, 14 Jun 2019 14:09:56 +0300 Subject: [PATCH 3/5] docs(plugins) splitChunks.name nesting fixed --- src/content/plugins/split-chunks-plugin.md | 24 ++++++++++++---------- 1 file changed, 13 insertions(+), 11 deletions(-) diff --git a/src/content/plugins/split-chunks-plugin.md b/src/content/plugins/split-chunks-plugin.md index 513a0e806f62..741487cd4fdd 100644 --- a/src/content/plugins/split-chunks-plugin.md +++ b/src/content/plugins/split-chunks-plugin.md @@ -189,17 +189,19 @@ __webpack.config.js__ module.exports = { //... optimization: { - cacheGroups: { - commons: { - test: /[\\/]node_modules[\\/]/, - // cacheGroupKey here is `commons` as the key of the cacheGroup - name(module, chunks, cacheGroupKey) { - const moduleFileName = module.identifier().split('/').reduceRight(item => item); - const allChunksNames = chunks.map((item) => item.name).join('~'); - return `${cacheGroupKey}-${allChunksNames}-${moduleFileName}`; - }, - chunks: 'all' - }, + splitChunks: { + cacheGroups: { + commons: { + test: /[\\/]node_modules[\\/]/, + // cacheGroupKey here is `commons` as the key of the cacheGroup + name(module, chunks, cacheGroupKey) { + const moduleFileName = module.identifier().split('/').reduceRight(item => item); + const allChunksNames = chunks.map((item) => item.name).join('~'); + return `${cacheGroupKey}-${allChunksNames}-${moduleFileName}`; + }, + chunks: 'all' + } + } } } }; From e114a40a831203dd2c6aff44b35a9cc702f4846e Mon Sep 17 00:00:00 2001 From: EugeneHlushko Date: Fri, 14 Jun 2019 16:46:22 +0300 Subject: [PATCH 4/5] docs(plugins) splitChunks.name note that config is only partial --- src/content/plugins/split-chunks-plugin.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/plugins/split-chunks-plugin.md b/src/content/plugins/split-chunks-plugin.md index 741487cd4fdd..a00cea8cf349 100644 --- a/src/content/plugins/split-chunks-plugin.md +++ b/src/content/plugins/split-chunks-plugin.md @@ -207,7 +207,7 @@ module.exports = { }; ``` -Running webpack with following configuration would also output a chunk of the group common with next name: `commons-main-lodash.js.e7519d2bb8777058fa27.js` (hash given as an example of real world output). +Running webpack with following `splitChunks` configuration would also output a chunk of the group common with next name: `commons-main-lodash.js.e7519d2bb8777058fa27.js` (hash given as an example of real world output). W> When assigning equal names to different split chunks, all vendor modules are placed into a single shared chunk, though it's not recommend since it can result in more code downloaded. From 733e8068c01bc16457ba9c2106771b6966fe836f Mon Sep 17 00:00:00 2001 From: EugeneHlushko Date: Fri, 14 Jun 2019 21:20:24 +0300 Subject: [PATCH 5/5] docs(plugins) splitChunks.name and splitChunks.test function return type --- src/content/plugins/split-chunks-plugin.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/content/plugins/split-chunks-plugin.md b/src/content/plugins/split-chunks-plugin.md index a00cea8cf349..d6b08173619a 100644 --- a/src/content/plugins/split-chunks-plugin.md +++ b/src/content/plugins/split-chunks-plugin.md @@ -163,7 +163,7 @@ T> `maxSize` takes higher priority than `maxInitialRequest/maxAsyncRequests`. Ac ### `splitChunks.name` -`boolean: true | function (module, chunks, cacheGroupKey) | string` +`boolean: true | function (module, chunks, cacheGroupKey):string | string` Also available for each cacheGroup: `splitChunks.cacheGroups.{cacheGroup}.name`. @@ -261,7 +261,7 @@ module.exports = { #### `splitChunks.cacheGroups.{cacheGroup}.test` -`function (module, chunk) | RegExp | string` +`function (module, chunk):boolean | RegExp | string` Controls which modules are selected by this cache group. Omitting it selects all modules. It can match the absolute module resource path or chunk names. When a chunk name is matched, all modules in the chunk are selected.