From c81e77e4b834a50ea7f3aa7dadbcb4867190e618 Mon Sep 17 00:00:00 2001 From: sakhisheikh Date: Sun, 16 Sep 2018 00:23:16 +0500 Subject: [PATCH 1/2] 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 5d7e681626bd9fa7c2567b3fcb1688cb18075e86 Mon Sep 17 00:00:00 2001 From: sakhisheikh Date: Wed, 19 Sep 2018 00:54:23 +0500 Subject: [PATCH 2/2] squashed everything after c81e77e --- src/content/concepts/index.md | 32 +++++++++++---------- src/content/configuration/externals.md | 33 ++++++++++++++++++++++ src/content/plugins/split-chunks-plugin.md | 5 ++-- 3 files changed, 53 insertions(+), 17 deletions(-) diff --git a/src/content/concepts/index.md b/src/content/concepts/index.md index d3cf10af141a..7ae708e55876 100644 --- a/src/content/concepts/index.md +++ b/src/content/concepts/index.md @@ -14,22 +14,24 @@ contributors: - arjunsajeev - byzyk - yairhaimo + - EugeneHlushko --- -At its core, **webpack** is a _static module bundler_ for modern JavaScript applications. When webpack processes your application, it internally builds a _dependency graph_ which maps every module your project needs and generates one or more _bundles_. +At its core, __webpack__ is a _static module bundler_ for modern JavaScript applications. When webpack processes your application, it internally builds a [dependency graph](/concepts/dependency-graph/) which maps every module your project needs and generates one or more _bundles_. T> Learn more about JavaScript modules and webpack modules [here](/concepts/modules). -Since version 4.0.0, **webpack does not require a configuration file** to bundle your project, nevertheless it is [incredibly configurable](/configuration) to better fit your needs. +Since version 4.0.0, __webpack does not require a configuration file__ to bundle your project, nevertheless it is [incredibly configurable](/configuration) to better fit your needs. -To get started you only need to understand its **Core Concepts**: +To get started you only need to understand its __Core Concepts__: -- Entry -- Output -- Loaders -- Plugins +- [Entry](#entry) +- [Output](#output) +- [Loaders](#loaders) +- [Plugins](#plugins) +- [Mode](#mode) -This document is intended to give a **high-level** overview of these concepts, while providing links to detailed concept specific use cases. +This document is intended to give a __high-level__ overview of these concepts, while providing links to detailed concept specific use cases. For a better understanding of the ideas behind module bundlers and how they work under the hood consult these resources: @@ -40,9 +42,9 @@ For a better understanding of the ideas behind module bundlers and how they work ## Entry -An **entry point** indicates which module webpack should use to begin building out its internal *dependency graph*. webpack will figure out which other modules and libraries that entry point depends on (directly and indirectly). +An __entry point__ indicates which module webpack should use to begin building out its internal [dependency graph](/concepts/dependency-graph/). webpack will figure out which other modules and libraries that entry point depends on (directly and indirectly). -By default its value is `./src/index.js`, but you can specify a different (or multiple entry points) by configuring the **entry** property in the [webpack configuration](/configuration). For example: +By default its value is `./src/index.js`, but you can specify a different (or multiple entry points) by configuring the __entry__ property in the [webpack configuration](/configuration). For example: __webpack.config.js__ @@ -57,7 +59,7 @@ T> Learn more in the [entry points](/concepts/entry-points) section. ## Output -The **output** property tells webpack where to emit the *bundles* it creates and how to name these files. It defaults to `./dist/main.js` for the main output file and to the `./dist` folder for any other generated file. +The __output__ property tells webpack where to emit the *bundles* it creates and how to name these files. It defaults to `./dist/main.js` for the main output file and to the `./dist` folder for any other generated file. You can configure this part of the process by specifying an `output` field in your configuration: @@ -82,11 +84,11 @@ T> The `output` property has [many more configurable features](/configuration/ou ## Loaders -Out of the box, webpack only understands JavaScript files. **Loaders** allow webpack to process other types of files and convert them into valid [modules](/concepts/modules) that can be consumed by your application and added to the dependency graph. +Out of the box, webpack only understands JavaScript files. __Loaders__ allow webpack to process other types of files and convert them into valid [modules](/concepts/modules) that can be consumed by your application and added to the dependency graph. W> Note that the ability to `import` any type of module, e.g. `.css` files, is a feature specific to webpack and may not be supported by other bundlers or task runners. We feel this extension of the language is warranted as it allows developers to build a more accurate dependency graph. -At a high level, **loaders** have two properties in your webpack configuration: +At a high level, __loaders__ have two properties in your webpack configuration: 1. The `test` property identifies which file or files should be transformed. 2. The `use` property indicates which loader should be used to do the transforming. @@ -110,7 +112,7 @@ module.exports = { The configuration above has defined a `rules` property for a single module with two required properties: `test` and `use`. This tells webpack's compiler the following: -> "Hey webpack compiler, when you come across a path that resolves to a '.txt' file inside of a `require()`/`import` statement, **use** the `raw-loader` to transform it before you add it to the bundle." +> "Hey webpack compiler, when you come across a path that resolves to a '.txt' file inside of a `require()`/`import` statement, __use__ the `raw-loader` to transform it before you add it to the bundle." W> It is important to remember that when defining rules in your webpack config, you are defining them under `module.rules` and not `rules`. For your benefit, webpack will warn you if this is done incorrectly. @@ -125,7 +127,7 @@ T> Check out the [plugin interface](/api/plugins) and how to use it to extend we In order to use a plugin, you need to `require()` it and add it to the `plugins` array. Most plugins are customizable through options. Since you can use a plugin multiple times in a config for different purposes, you need to create an instance of it by calling it with the `new` operator. -**webpack.config.js** +__webpack.config.js__ ```javascript const HtmlWebpackPlugin = require('html-webpack-plugin'); //installed via npm diff --git a/src/content/configuration/externals.md b/src/content/configuration/externals.md index 856ad56a3d58..93523d7a6c53 100644 --- a/src/content/configuration/externals.md +++ b/src/content/configuration/externals.md @@ -7,6 +7,7 @@ contributors: - pksjce - fadysamirsadek - byzyk + - zefman --- The `externals` configuration option provides a way of excluding dependencies from the output bundles. Instead, the created bundle relies on that dependency to be present in the consumer's environment. This feature is typically most useful to __library developers__, however there are a variety of applications for it. @@ -148,5 +149,37 @@ module.exports = { In this case any dependency named `jQuery`, capitalized or not, or `$` would be externalized. +### Combining syntaxes + +Sometimes you may want to use a combination of the above syntaxes. This can be done in the following manner: + +```js +module.exports = { + //... + externals: [ + { + // String + react: 'react', + // Object + lodash : { + commonjs: 'lodash', + amd: 'lodash', + root: '_' // indicates global variable + }, + // Array + subtract: ['./math', 'subtract'] + }, + // Function + function(context, request, callback) { + if (/^yourregex$/.test(request)){ + return callback(null, 'commonjs ' + request); + } + callback(); + }, + // Regex + /^(jquery|\$)$/i + ] +}; +``` For more information on how to use this configuration, please refer to the article on [how to author a library](/guides/author-libraries). diff --git a/src/content/plugins/split-chunks-plugin.md b/src/content/plugins/split-chunks-plugin.md index 89aad4d3d53e..f572618d05c8 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__ @@ -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/). + +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.