From c81e77e4b834a50ea7f3aa7dadbcb4867190e618 Mon Sep 17 00:00:00 2001 From: sakhisheikh Date: Sun, 16 Sep 2018 00:23:16 +0500 Subject: [PATCH 1/6] docs(config): Example 3 - custom vendor chunk using RegEx --- src/content/plugins/split-chunks-plugin.md | 25 ++++++++++++++++++++++ 1 file changed, 25 insertions(+) diff --git a/src/content/plugins/split-chunks-plugin.md b/src/content/plugins/split-chunks-plugin.md index f46a251cba6a..89aad4d3d53e 100644 --- a/src/content/plugins/split-chunks-plugin.md +++ b/src/content/plugins/split-chunks-plugin.md @@ -8,6 +8,7 @@ contributors: - EugeneHlushko - byzyk - madhavarshney + - sakhisheikh related: - title: webpack's automatic deduplication algorithm example url: https://github.com/webpack/webpack/blob/master/examples/many-pages/README.md @@ -344,3 +345,27 @@ module.exports = { ``` W> This might result in a large chunk containing all external packages. It is recommended to only include your core frameworks and utilities and dynamically load the rest of the dependencies. + +### Split Chunks: Example 3 + + Create a `custom vendors` chunk, which includes only those `node_modules` from the whole application which passes the RegEx Test + + __webpack.config.js__ + +```js +module.exports = { + //... + optimization: { + splitChunks: { + cacheGroups: { + vendor: { + test: /[\\/]node_modules[\\/](react|react-dom)[\\/]/, + name: 'vendor', + chunks: 'all', + } + } + } + } +}; +``` + T> This will result into a vendor chunk containing desired libraries provided in RegEx patter. A better understanding of chunks can be visualized by [webpack-visualizer](https://chrisbateman.github.io/webpack-visualizer/). From 628528ef8340213f290c488f33d343c654c402cd Mon Sep 17 00:00:00 2001 From: sakhisheikh Date: Sun, 16 Sep 2018 00:59:12 +0500 Subject: [PATCH 2/6] docs(config): Example 3 SplitChunks Fenced blank added --- src/content/plugins/split-chunks-plugin.md | 1 + 1 file changed, 1 insertion(+) diff --git a/src/content/plugins/split-chunks-plugin.md b/src/content/plugins/split-chunks-plugin.md index 89aad4d3d53e..3bab43ca61de 100644 --- a/src/content/plugins/split-chunks-plugin.md +++ b/src/content/plugins/split-chunks-plugin.md @@ -368,4 +368,5 @@ module.exports = { } }; ``` + T> This will result into a vendor chunk containing desired libraries provided in RegEx patter. A better understanding of chunks can be visualized by [webpack-visualizer](https://chrisbateman.github.io/webpack-visualizer/). From 759a67a88ca62861e7d03758faadb86cda212515 Mon Sep 17 00:00:00 2001 From: sakhisheikh Date: Sun, 16 Sep 2018 21:19:41 +0500 Subject: [PATCH 3/6] docs(config): (typo) Example 3 - custom vendor chunk using RegEx --- 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 3bab43ca61de..c899166115b7 100644 --- a/src/content/plugins/split-chunks-plugin.md +++ b/src/content/plugins/split-chunks-plugin.md @@ -369,4 +369,4 @@ module.exports = { }; ``` - T> This will result into a vendor chunk containing desired libraries provided in RegEx patter. A better understanding of chunks can be visualized by [webpack-visualizer](https://chrisbateman.github.io/webpack-visualizer/). + T> This will result into a vendor chunk containing desired libraries provided in RegEx pattern. A better understanding of chunks can be visualized by [webpack-visualizer](https://chrisbateman.github.io/webpack-visualizer/). From bc327775d8762fd3d069344016af2e2cadf6d37c Mon Sep 17 00:00:00 2001 From: sakhisheikh Date: Mon, 17 Sep 2018 18:14:47 +0500 Subject: [PATCH 4/6] sakhisheikh docs(config): (reworded) Example 3 - custom vendor chunk using RegEx --- 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 c899166115b7..12922c543b43 100644 --- a/src/content/plugins/split-chunks-plugin.md +++ b/src/content/plugins/split-chunks-plugin.md @@ -348,7 +348,7 @@ W> This might result in a large chunk containing all external packages. It is re ### Split Chunks: Example 3 - Create a `custom vendors` chunk, which includes only those `node_modules` from the whole application which passes the RegEx Test + Create a `custom vendor` chunk, which contains certain `node_modules` packages matched by `RegExp`. __webpack.config.js__ @@ -369,4 +369,4 @@ module.exports = { }; ``` - T> This will result into a vendor chunk containing desired libraries provided in RegEx pattern. A better understanding of chunks can be visualized by [webpack-visualizer](https://chrisbateman.github.io/webpack-visualizer/). + T> This will result in splitting `react` and `react-dom` into a separate chunk. From 45208d04ec202fe1a70739018d94675eddbb5d46 Mon Sep 17 00:00:00 2001 From: sakhisheikh Date: Tue, 18 Sep 2018 01:05:44 +0500 Subject: [PATCH 5/6] docs(config): (Reword) Example 3 - custom vendor chunk using RegEx --- 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 12922c543b43..a747fa0effbc 100644 --- a/src/content/plugins/split-chunks-plugin.md +++ b/src/content/plugins/split-chunks-plugin.md @@ -369,4 +369,4 @@ module.exports = { }; ``` - T> This will result in splitting `react` and `react-dom` into a separate chunk. + T> This will result in splitting `react` and `react-dom` into a separate chunk. If you're not sure what packages have been included in a chunk you may refer to [Bundle Analysis](https://webpack.js.org/guides/code-splitting/#bundle-analysis) section for details. From 8c59781d471c26b773d5a1ae1c9371f5b044eac1 Mon Sep 17 00:00:00 2001 From: sakhisheikh Date: Tue, 18 Sep 2018 05:57:37 +0500 Subject: [PATCH 6/6] docs(config): (Reword) Example 3 - custom vendor chunk using RegEx --- 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 a747fa0effbc..a390804bdbca 100644 --- a/src/content/plugins/split-chunks-plugin.md +++ b/src/content/plugins/split-chunks-plugin.md @@ -369,4 +369,4 @@ module.exports = { }; ``` - T> This will result in splitting `react` and `react-dom` into a separate chunk. If you're not sure what packages have been included in a chunk you may refer to [Bundle Analysis](https://webpack.js.org/guides/code-splitting/#bundle-analysis) section for details. + T> This will result in splitting `react` and `react-dom` into a separate chunk. If you're not sure what packages have been included in a chunk you may refer to [Bundle Analysis](/guides/code-splitting/#bundle-analysis) section for details.