D[0] docs(config): Example 3 - custom vendor chunks using RegEx #2518

sakhisheikh · 2018-09-15T19:35:34Z

What kind of change does this PR introduce?
An example added to SplitChunksPlugin in split-chunks-plugin.md

Did you add tests for your changes?

Not necessary.

Does this PR introduce a breaking change?

No breaking change.

What needs to be documented once your changes are merged?

No update required.

When we have to split chunks on vendor basis we write test function in splitChunks.cacheGroups.test. I have added an example which demonstrate how we can use RegEx pattern to extract custom node_modules in vendor chunk.

For this I have gone through SplitChunksPlugin.js from webpack/lib/optimize/. I have tried so many times to extract only react and react-dom at the first place with exact string matching pattern. But I failed to do this as soon as I figured it out while printing module.nameForCondition()) and got to know how modules are added in vendor chunks with RegEx test. I added '/' in the end of library name just to make sure it extracts all code under hood of the library.

byzyk · 2018-09-17T12:57:17Z

src/content/plugins/split-chunks-plugin.md

+
+### Split Chunks: Example 3
+
+ Create a `custom vendors` chunk, which includes only those `node_modules` from the whole application which passes the RegEx Test


I think this can be slightly reworded to something like:
Create a custom vendor chunk, which contains certain node_modules packages matched by RegExp.

byzyk · 2018-09-17T12:58:59Z

src/content/plugins/split-chunks-plugin.md

+};
+```
+
+ 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/).


Not sure we need to promote webpack-visualizer here as there might be more appropriate places in docs. Instead, we might wanna say:
This will result in splitting react and react-dom into a separate chunk.

@byzyk Thanks for the needful input. I'll make recommended changes. I have one concern here sometimes users aren't sure if they custom vendor actually contains only those libraries in RegEx so they can verify it with weback visualizer. Anyways, I'm taking your feedback and making changes in the PR. If you say, I can remove webpack-visualizer tip from here

I have pushed the latest changes.

This plugin is already mentioned in docs, so if you feel like we need to add a note about that here you can just reference the links I shared, saying something like:

If you're not sure what packages have been included in a chunk you may refer to Bundle Analysis section(link) for details.

Thanks @byzyk added requested changes.

docs(config): (reworded) Example 3 - custom vendor chunk using RegEx

…kh/webpack.js.org into SplitChunksPluginRegex

montogeek · 2018-09-17T21:54:10Z

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.


Please use relative URLs /guides/code-splitting/#bundle-analysis

@montogeek pushed the requested changes. Thanks

montogeek

Please see comment

EugeneHlushko

more examples, good

montogeek · 2018-09-18T16:23:24Z

Thanks!

* fix(contribute) Use consistent plugin name in code snippet (#2496) * fix(configuration) Fix small typo (#2511) * docs(manifest) Corrections and small update to concept manifest page (#2504) Small updates and corrections for manifest concepts page * docs(concepts) Update dependency graph concepts page (#2495) * docs(concepts) Update dependency graph concepts page * docs(concepts) Dependency graph minor tweak * docs(concepts) Use common formatting, provide more links, mention mod… (#2472) * docs(concepts) use common formatting, provide more links, mention mode in core of the concepts * docs(concepts) duplicate links on the list for better ux * docs(concepts) forgot to add EugeneHlushko to contributors * docs(configuration) Add externals examples (#2515) Update the external docs with an example on how to combine the different syntaxes. I felt it was not clear how to achieve this from the existing docs. * docs(plugins) Update Writing plugin and Plugin pattern page (#2200) * Update Writing plugin and Plugin pattern page * Fixed formatting issues * Fix markdown lint issues * Update plugin-patterns.md * Update plugin-patterns.md * docs(concepts) Using vendors as entry is not recommended (#2525) * Using vendors as entry is not recommended fixes webpack/webpack#6647 * add note about vendor entrypoints * fix(guides) Correct misspelling and punctuation errors (#2513) * Correct misspelling and punctuation errors * Update build-performance.md * docs(plugins): Add custom vendor chunks using RegEx example (#2518) * docs(config): Example 3 - custom vendor chunk using RegEx * docs(config): Example 3 SplitChunks Fenced blank added * docs(config): (typo) Example 3 - custom vendor chunk using RegEx * sakhisheikh docs(config): (reworded) Example 3 - custom vendor chunk using RegEx * docs(config): (Reword) Example 3 - custom vendor chunk using RegEx * docs(config): (Reword) Example 3 - custom vendor chunk using RegEx * chore(plugins) Remove space (#2527) * docs(config): Example 3 - custom vendor chunk using RegEx * squashed everything after c81e77e * docs(plugins) Add .mjs to the defaults (#2493) This should be updated once webpack/webpack#7947 is released. * chore(plugins) Minor SplitChunks Documentation Clean Up (#2252) * Minor Documentation Clean Up Originally, i was just trying to change defer => differ, but I ended up doing a bit more editing. * Lower the case * fix(api) Clarify module section (#2529) Change wording from "bind an extension" to "bind a file extension" in order to distinguish from a webpack extension. _describe your changes..._ - [ ] Read and sign the [CLA][1]. PRs that haven't signed it won't be accepted. - [ ] Make sure your PR complies with the [writer's guide][2]. - [ ] Review the diff carefully as sometimes this can reveal issues. - __Remove these instructions from your PR as they are for your eyes only.__ [1]: https://cla.js.foundation/webpack/webpack.js.org [2]: https://webpack.js.org/writers-guide/ * docs(plugins): Update links in htmlwebpackplugin (#2530) * docs(plugins) Fix reuseExistingChunk title nesting (#2526) * docs(plugins) scp reuseExistingChunk title nesting fix * docs(plugins) scp reuseExistingChunk title notation * docs(guides) Fix typo (#2537) * chore(guides) Import needs to be highlighted with '+' mark (#2536) import webpack needs to be highlighted since we are adding webpack.HashedModuleIdsPlugin() * docs(config) Optimization moduleIds option (#2543)

sakhisheikh added 2 commits September 16, 2018 00:23

docs(config): Example 3 - custom vendor chunk using RegEx

c81e77e

docs(config): Example 3 SplitChunks Fenced blank added

628528e

montogeek added the Plugins label Sep 15, 2018

sakhisheikh changed the title ~~docs(config): Example 3 - custom vendor chunks using RegEx~~ D[0] docs(config): Example 3 - custom vendor chunks using RegEx Sep 15, 2018

docs(config): (typo) Example 3 - custom vendor chunk using RegEx

759a67a

byzyk reviewed Sep 17, 2018

View reviewed changes

sakhisheikh and others added 6 commits September 17, 2018 18:09

Merge branch 'master' into SplitChunksPluginRegex

750721e

sakhisheikh

bc32777

docs(config): (reworded) Example 3 - custom vendor chunk using RegEx

Merge branch 'SplitChunksPluginRegex' of https://github.com/sakhishei…

331f1d5

…kh/webpack.js.org into SplitChunksPluginRegex

Merge branch 'master' into SplitChunksPluginRegex

85d56d1

docs(config): (Reword) Example 3 - custom vendor chunk using RegEx

45208d0

Merge branch 'SplitChunksPluginRegex' of https://github.com/sakhishei…

7d0ab4e

…kh/webpack.js.org into SplitChunksPluginRegex

montogeek approved these changes Sep 17, 2018

View reviewed changes

montogeek requested changes Sep 17, 2018

View reviewed changes

sakhisheikh and others added 2 commits September 18, 2018 05:57

docs(config): (Reword) Example 3 - custom vendor chunk using RegEx

8c59781

Merge branch 'master' into SplitChunksPluginRegex

2ef7e29

EugeneHlushko approved these changes Sep 18, 2018

View reviewed changes

Merge branch 'master' into SplitChunksPluginRegex

84e0e46

montogeek approved these changes Sep 18, 2018

View reviewed changes

Merge branch 'master' into SplitChunksPluginRegex

ae791e2

montogeek merged commit 9e959d2 into webpack:master Sep 18, 2018

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

D[0] docs(config): Example 3 - custom vendor chunks using RegEx #2518

D[0] docs(config): Example 3 - custom vendor chunks using RegEx #2518

Uh oh!

sakhisheikh commented Sep 15, 2018 •

edited

Loading

Uh oh!

byzyk Sep 17, 2018

Uh oh!

byzyk Sep 17, 2018

Uh oh!

sakhisheikh Sep 17, 2018 •

edited

Loading

Uh oh!

sakhisheikh Sep 17, 2018

Uh oh!

byzyk Sep 17, 2018

Uh oh!

sakhisheikh Sep 17, 2018

Uh oh!

montogeek Sep 17, 2018

Uh oh!

sakhisheikh Sep 18, 2018

Uh oh!

montogeek left a comment

Uh oh!

EugeneHlushko left a comment

Uh oh!

montogeek commented Sep 18, 2018

Uh oh!

Uh oh!


		### Split Chunks: Example 3

		Create a `custom vendors` chunk, which includes only those `node_modules` from the whole application which passes the RegEx Test

Uh oh!

D[0] docs(config): Example 3 - custom vendor chunks using RegEx #2518

D[0] docs(config): Example 3 - custom vendor chunks using RegEx #2518

Uh oh!

Conversation

sakhisheikh commented Sep 15, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

byzyk Sep 17, 2018

Choose a reason for hiding this comment

Uh oh!

byzyk Sep 17, 2018

Choose a reason for hiding this comment

Uh oh!

sakhisheikh Sep 17, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

sakhisheikh Sep 17, 2018

Choose a reason for hiding this comment

Uh oh!

byzyk Sep 17, 2018

Choose a reason for hiding this comment

Uh oh!

sakhisheikh Sep 17, 2018

Choose a reason for hiding this comment

Uh oh!

montogeek Sep 17, 2018

Choose a reason for hiding this comment

Uh oh!

sakhisheikh Sep 18, 2018

Choose a reason for hiding this comment

Uh oh!

montogeek left a comment

Choose a reason for hiding this comment

Uh oh!

EugeneHlushko left a comment

Choose a reason for hiding this comment

Uh oh!

montogeek commented Sep 18, 2018

Uh oh!

Uh oh!

sakhisheikh commented Sep 15, 2018 •

edited

Loading

sakhisheikh Sep 17, 2018 •

edited

Loading