From 344dbcadcc2c7eb3e68e79452a55d6d9980b688c Mon Sep 17 00:00:00 2001 From: James Date: Tue, 18 Apr 2017 02:32:43 -0700 Subject: [PATCH 01/13] =?UTF-8?q?=F0=9F=A4=B8=20=F0=9F=94=8C=20?= =?UTF-8?q?=F0=9F=93=96=20dll=20plugin=20docs?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- content/plugins/dll-plugin.md | 115 ++++++++++++++++++++++++++++++++++ 1 file changed, 115 insertions(+) create mode 100644 content/plugins/dll-plugin.md diff --git a/content/plugins/dll-plugin.md b/content/plugins/dll-plugin.md new file mode 100644 index 000000000000..28428f986320 --- /dev/null +++ b/content/plugins/dll-plugin.md @@ -0,0 +1,115 @@ +--- +title: DllPlugin +contributors: + - aretecode + - sokra + - opiepj +--- + +The `DllPlugin` and `DllReferencePlugin` provide means to split bundles in a way that can drastically improve build time performance. + +[DllPlugin](#DllPlugin) is used in a separate webpack config exclusively to create a dll-only-bundle. It creates a `manifest.json` file, which used by the [DllReferencePlugin](#DllReferencePlugin) to map dependencies. + +[DllReferencePlugin](#DllReferencePlugin) is used in the primary webpack config, it references the dll-only-bundle(s) to require pre-built dependencies. + +[See a usage example](https://github.com/webpack/webpack/tree/master/examples/dll) + + +## `DllPlugin` + +* `path`: **absolute path** to the manifest json file (output) +* `name`: name of the exposed dll function +* `context` (optional): context of requests in the manifest file (defaults to the webpack context.) + +Creates a `manifest.json` which is written to the given `path`. It contains mappings from require and import requests, to module ids. It is used by the [DllReferencePlugin](#DllReferencePlugin). + + +W> Keep the `name` consistent with `output.library`. + +Combine this plugin with `output.library` option to expose (aka, put into the global scope) the dll function. + +```javascript +new DllPlugin({ + context: __dirname, + path: path.join(__dirname, "manifest.json"), + name: "[name]_[hash]" +}) +``` + + +### `DllReferencePlugin` + +* `context`: (**absolute path**) context of requests in the manifest (or content property) +* `scope` (optional): prefix which is used for accessing the content of the dll +* `manifest` (object): an object containing `content` and `name` +* `name` (optional): the name where the dll is exposed (defaults to `manifest.name`) (see also `externals`) +* `sourceType` (optional): how the dll is exposed (defaults to `"var"`) (see also `externals`) +* `content` (optional): the mappings from request to module id (defaults to `manifest.content`) + + +References a dll manifest file to map dependency names to module ids, then requires them as needed using the internal `__webpack_require__` function. + + +```javascript +new DllReferencePlugin({ + context: __dirname, + scope: "xyz", + manifest: require("./manifest.json"), + name: "./my-dll.js", + sourceType: "commonsjs2", + content: { ... } +}) +``` + +Can be used in two different modes: + +**Scoped mode** + +The content of the dll is accessible under a module prefix. i.e. with `scope = "xyz"` a file `abc` in the dll can be access via `require("xyz/abc")`. + +**Mapped mode** + +The content of the dll is mapped to the current directory. If a required file matches a file in the dll (after resolving), then the file from the dll is used instead. + +T> because this happens after resolving every file in the dll bundle, the same paths must be available for the consumer of the dll bundle. i.e. if the dll contains `jquery` and the file `abc`, `require("jquery")` and `require("./abc")` will be used from the dll, rather than building them into the main bundle. + +?> add a node.js example to [webpack/examples](https://github.com/webpack/webpack/tree/master/examples) + + + +### More + +#### Examples +[code splitting example][examples-explicit-vendor-chunk] +[usage example](https://github.com/webpack/webpack/tree/master/examples/dll) + +#### Source +- [DllPlugin source][src-DllPlugin] +- [DllReferencePlugin source][src-DllReferencePlugin] + +#### Tests +- [DllPlugin creation test][tests-DllPlugin-0] +- [DllPlugin without scope test][tests-DllPlugin-2] + +[examples-dll]: https://github.com/webpack/webpack/tree/master/examples/dll-user +[examples-explicit-vendor-chunk]: https://github.com/webpack/webpack/tree/master/examples/explicit-vendor-chunk/README.md +[src-DllReferencePlugin]: https://github.com/webpack/tree/master/lib/DllReferencePlugin.js +[src-DllPlugin]: https://github.com/webpack/webpack/tree/master/lib/DllPlugin.js +[tests-DllPlugin-0]: https://github.com/webpack/webpack/tree/master/test/configCases/dll-plugin/0-create-dll/webpack.config.js +[tests-DllPlugin-2]: https://github.com/webpack/webpack/tree/master/test/configCases/dll-plugin/2-use-dll-without-scope/webpack.config.js From 509d30b1549157231ca344f7f8ac251351360129 Mon Sep 17 00:00:00 2001 From: James Date: Tue, 18 Apr 2017 02:33:45 -0700 Subject: [PATCH 02/13] =?UTF-8?q?=F0=9F=94=97=20linked=20dll-plugin=20from?= =?UTF-8?q?=20plugin=20index?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- content/plugins/index.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/content/plugins/index.md b/content/plugins/index.md index 081225423049..125705dc3fd0 100644 --- a/content/plugins/index.md +++ b/content/plugins/index.md @@ -4,6 +4,7 @@ contributors: - simon04 - gonzoyumo - rouzbeh84 + - aretecode --- webpack has a rich plugin interface. Most of the features within webpack itself use this plugin interface. This makes webpack **flexible**. @@ -15,6 +16,7 @@ webpack has a rich plugin interface. Most of the features within webpack itself |[`CompressionWebpackPlugin`](/plugins/compression-webpack-plugin)|Prepare compressed versions of assets to serve them with Content-Encoding| |[`DefinePlugin`](/plugins/define-plugin)|Allows global constants configured at compile time, useful for allowing different behavior between dev/release builds| |[`EnvironmentPlugin`](/plugins/environment-plugin)|Shorthand for using the [`DefinePlugin`](./define-plugin) on `process.env` keys.| +|[`DllPlugin`](/plugins/dll-plugin)|provide means to split bundles in a way that can drastically improve build time performance.| |[`ExtractTextWebpackPlugin`](/plugins/extract-text-webpack-plugin)|Extracts Text (CSS) from your bundles into a separate file (app.bundle.css)| |[`HtmlWebpackPlugin`](/plugins/html-webpack-plugin)| Simplifies creation of HTML files (`index.html`) to serve your bundles| |[`I18nWebpackPlugin`](/plugins/i18n-webpack-plugin)|Adds i18n support to your bundles| From 4b907b26adecdb77c180caf3f5085422a3e61416 Mon Sep 17 00:00:00 2001 From: James Date: Tue, 18 Apr 2017 02:34:20 -0700 Subject: [PATCH 03/13] =?UTF-8?q?=E2=8C=A8=EF=B8=8F=20change=20casing?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- content/plugins/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/plugins/index.md b/content/plugins/index.md index 125705dc3fd0..041b3c1d703c 100644 --- a/content/plugins/index.md +++ b/content/plugins/index.md @@ -16,7 +16,7 @@ webpack has a rich plugin interface. Most of the features within webpack itself |[`CompressionWebpackPlugin`](/plugins/compression-webpack-plugin)|Prepare compressed versions of assets to serve them with Content-Encoding| |[`DefinePlugin`](/plugins/define-plugin)|Allows global constants configured at compile time, useful for allowing different behavior between dev/release builds| |[`EnvironmentPlugin`](/plugins/environment-plugin)|Shorthand for using the [`DefinePlugin`](./define-plugin) on `process.env` keys.| -|[`DllPlugin`](/plugins/dll-plugin)|provide means to split bundles in a way that can drastically improve build time performance.| +|[`DllPlugin`](/plugins/dll-plugin)|Provide means to split bundles in a way that can drastically improve build time performance.| |[`ExtractTextWebpackPlugin`](/plugins/extract-text-webpack-plugin)|Extracts Text (CSS) from your bundles into a separate file (app.bundle.css)| |[`HtmlWebpackPlugin`](/plugins/html-webpack-plugin)| Simplifies creation of HTML files (`index.html`) to serve your bundles| |[`I18nWebpackPlugin`](/plugins/i18n-webpack-plugin)|Adds i18n support to your bundles| From 440b6a77a1019694cbd048284d940e6b042201e5 Mon Sep 17 00:00:00 2001 From: James Date: Wed, 19 Apr 2017 04:29:19 -0700 Subject: [PATCH 04/13] =?UTF-8?q?=F0=9F=99=8F=20+collab,=20=F0=9F=9B=81=20?= =?UTF-8?q?clean=20//,=20=F0=9F=94=AC=20test,=20=F0=9F=93=98=20examples?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 🙏 add simon04 to collaborators 🛁 clean commented example 🔗🌽 link to example pull request 🔗 add more named links to other parts of the dll plugin & dll reference plugin source code 🌊👣 add TemplatePaths type for `name` 🔬 more source code test links 📘 add examples section 📘⎁⎂ descriptions for the examples, explain what functionality they demonstrate --- content/plugins/dll-plugin.md | 55 +++++++++++++++++++++++------------ 1 file changed, 36 insertions(+), 19 deletions(-) diff --git a/content/plugins/dll-plugin.md b/content/plugins/dll-plugin.md index 28428f986320..46fed9e19f4f 100644 --- a/content/plugins/dll-plugin.md +++ b/content/plugins/dll-plugin.md @@ -4,6 +4,7 @@ contributors: - aretecode - sokra - opiepj + - simon04 --- The `DllPlugin` and `DllReferencePlugin` provide means to split bundles in a way that can drastically improve build time performance. @@ -12,13 +13,12 @@ The `DllPlugin` and `DllReferencePlugin` provide means to split bundles in a way [DllReferencePlugin](#DllReferencePlugin) is used in the primary webpack config, it references the dll-only-bundle(s) to require pre-built dependencies. -[See a usage example](https://github.com/webpack/webpack/tree/master/examples/dll) ## `DllPlugin` * `path`: **absolute path** to the manifest json file (output) -* `name`: name of the exposed dll function +* `name`: name of the exposed dll function ([TemplatePaths][src-TemplatedPathPlugin]: `[hash]` & `[name]` ) * `context` (optional): context of requests in the manifest file (defaults to the webpack context.) Creates a `manifest.json` which is written to the given `path`. It contains mappings from require and import requests, to module ids. It is used by the [DllReferencePlugin](#DllReferencePlugin). @@ -43,7 +43,7 @@ new DllPlugin({ * `scope` (optional): prefix which is used for accessing the content of the dll * `manifest` (object): an object containing `content` and `name` * `name` (optional): the name where the dll is exposed (defaults to `manifest.name`) (see also `externals`) -* `sourceType` (optional): how the dll is exposed (defaults to `"var"`) (see also `externals`) +* `sourceType` (optional): how the dll is exposed ([libraryTarget][docs-libraryTarget]) * `content` (optional): the mappings from request to module id (defaults to `manifest.content`) @@ -73,43 +73,60 @@ The content of the dll is mapped to the current directory. If a required file ma T> because this happens after resolving every file in the dll bundle, the same paths must be available for the consumer of the dll bundle. i.e. if the dll contains `jquery` and the file `abc`, `require("jquery")` and `require("./abc")` will be used from the dll, rather than building them into the main bundle. -?> add a node.js example to [webpack/examples](https://github.com/webpack/webpack/tree/master/examples) - +T> Multiple DllPlugins and multiple DllReferencePlugins. -### More -#### Examples -[code splitting example][examples-explicit-vendor-chunk] -[usage example](https://github.com/webpack/webpack/tree/master/examples/dll) +### related +- [code splitting example][examples-explicit-vendor-chunk] + + +?> add a node.js example to [webpack/examples][examples-examples] + + + +## More #### Source - [DllPlugin source][src-DllPlugin] - [DllReferencePlugin source][src-DllReferencePlugin] +- [DllModuleFactory source][src-DllModuleFactory] +- [ManifestPlugin source][src-ManifestPlugin] #### Tests - [DllPlugin creation test][tests-DllPlugin-0] - [DllPlugin without scope test][tests-DllPlugin-2] +- [DllReferencePlugin use Dll test][tests-DllPlugin-1] -[examples-dll]: https://github.com/webpack/webpack/tree/master/examples/dll-user + +[examples-examples]: https://github.com/webpack/webpack/tree/master/examples +[examples-dll-vendor]: https://github.com/webpack/webpack/tree/master/examples/dll +[examples-dll-user]: https://github.com/webpack/webpack/tree/master/examples/dll-user +[examples-dll-app-and-vendor]: https://github.com/webpack/webpack/tree/master/examples/dll-app-and-vendor [examples-explicit-vendor-chunk]: https://github.com/webpack/webpack/tree/master/examples/explicit-vendor-chunk/README.md + [src-DllReferencePlugin]: https://github.com/webpack/tree/master/lib/DllReferencePlugin.js [src-DllPlugin]: https://github.com/webpack/webpack/tree/master/lib/DllPlugin.js +[src-DllEntryPlugin]: https://github.com/webpack/webpack/blob/master/lib/DllEntryPlugin.js +[src-DllModuleFactory]: https://github.com/webpack/webpack/blob/master/lib/DllModuleFactory.js +[src-ManifestPlugin]: https://github.com/webpack/webpack/blob/master/lib/LibManifestPlugin.js +[src-TemplatedPathPlugin]: https://github.com/webpack/webpack/blob/master/lib/TemplatedPathPlugin.js + [tests-DllPlugin-0]: https://github.com/webpack/webpack/tree/master/test/configCases/dll-plugin/0-create-dll/webpack.config.js +[tests-DllPlugin-1]: https://github.com/webpack/webpack/tree/master/test/configCases/dll-plugin [tests-DllPlugin-2]: https://github.com/webpack/webpack/tree/master/test/configCases/dll-plugin/2-use-dll-without-scope/webpack.config.js + +[docs-libraryTarget]: https://webpack.js.org/configuration/output/#output-librarytarget From 77c7690af854dda399db9b0bc39e370bd660637d Mon Sep 17 00:00:00 2001 From: James Date: Wed, 19 Apr 2017 14:30:08 -0700 Subject: [PATCH 05/13] =?UTF-8?q?=E2=9A=92=E2=8C=A8=EF=B8=8F=20fix=20typo,?= =?UTF-8?q?=20=F0=9F=8F=9B=EF=B8=8F=20update=20structure,=20=F0=9F=93=9D?= =?UTF-8?q?=20fin=20todos?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 🏛️ update structure as suggested by @simon04 [here](https://github.com/webpack/webpack.js.org/pull/1121#issuecomment-294779817) ⚒⌨️ fix typo found by @smashercosmo https://github.com/webpack/webpack.js.org/pull/1121#pullrequestreview-33613681 📘 added dll-example using `libraryTarget` + `sourceType` `"commonjs2"` to create a vendor bundle, and a dependency bundle, on nodejs. 📝 remove completed todos --- content/plugins/dll-plugin.md | 77 +++++++++++++++++++++++------------ 1 file changed, 52 insertions(+), 25 deletions(-) diff --git a/content/plugins/dll-plugin.md b/content/plugins/dll-plugin.md index 46fed9e19f4f..d7e706efd683 100644 --- a/content/plugins/dll-plugin.md +++ b/content/plugins/dll-plugin.md @@ -7,9 +7,11 @@ contributors: - simon04 --- +## Introduction + The `DllPlugin` and `DllReferencePlugin` provide means to split bundles in a way that can drastically improve build time performance. -[DllPlugin](#DllPlugin) is used in a separate webpack config exclusively to create a dll-only-bundle. It creates a `manifest.json` file, which used by the [DllReferencePlugin](#DllReferencePlugin) to map dependencies. +[DllPlugin](#DllPlugin) is used in a separate webpack config exclusively to create a dll-only-bundle. It creates a `manifest.json` file, which is used by the [DllReferencePlugin](#DllReferencePlugin) to map dependencies. [DllReferencePlugin](#DllReferencePlugin) is used in the primary webpack config, it references the dll-only-bundle(s) to require pre-built dependencies. @@ -21,6 +23,10 @@ The `DllPlugin` and `DllReferencePlugin` provide means to split bundles in a way * `name`: name of the exposed dll function ([TemplatePaths][src-TemplatedPathPlugin]: `[hash]` & `[name]` ) * `context` (optional): context of requests in the manifest file (defaults to the webpack context.) +```javascript +new webpack.DllPlugin(options) +``` + Creates a `manifest.json` which is written to the given `path`. It contains mappings from require and import requests, to module ids. It is used by the [DllReferencePlugin](#DllReferencePlugin). @@ -28,14 +34,6 @@ W> Keep the `name` consistent with `output.library`. Combine this plugin with `output.library` option to expose (aka, put into the global scope) the dll function. -```javascript -new DllPlugin({ - context: __dirname, - path: path.join(__dirname, "manifest.json"), - name: "[name]_[hash]" -}) -``` - ### `DllReferencePlugin` @@ -46,32 +44,58 @@ new DllPlugin({ * `sourceType` (optional): how the dll is exposed ([libraryTarget][docs-libraryTarget]) * `content` (optional): the mappings from request to module id (defaults to `manifest.content`) +```javascript +new webpack.DllReferencePlugin(options) +``` References a dll manifest file to map dependency names to module ids, then requires them as needed using the internal `__webpack_require__` function. -```javascript -new DllReferencePlugin({ - context: __dirname, - scope: "xyz", - manifest: require("./manifest.json"), - name: "./my-dll.js", - sourceType: "commonsjs2", - content: { ... } -}) -``` +### Modes Can be used in two different modes: -**Scoped mode** +#### **Scoped mode** The content of the dll is accessible under a module prefix. i.e. with `scope = "xyz"` a file `abc` in the dll can be access via `require("xyz/abc")`. -**Mapped mode** +T> [See an example use of scope][examples-dll-user] + + +#### **Mapped mode** The content of the dll is mapped to the current directory. If a required file matches a file in the dll (after resolving), then the file from the dll is used instead. -T> because this happens after resolving every file in the dll bundle, the same paths must be available for the consumer of the dll bundle. i.e. if the dll contains `jquery` and the file `abc`, `require("jquery")` and `require("./abc")` will be used from the dll, rather than building them into the main bundle. +Because this happens after resolving every file in the dll bundle, the same paths must be available for the consumer of the dll bundle. i.e. if the dll contains `lodash` and the file `abc`, `require("lodash")` and `require("./abc")` will be used from the dll, rather than building them into the main bundle. + +T> [See an example use of mapped mode][examples-dll-source-type-and-dependencies] + + + +# Usage + +W> DllReferencePlugin and DllPlugin are used in _separate_ webpack configs. + + +```javascript +// webpack.vendor.config.js +new webpack.DllPlugin({ + context: __dirname, + path: path.join(__dirname, "manifest.json"), + name: "[name]_[hash]" +}) +``` + +```javascript +// webpack.app.config.js +new webpack.DllReferencePlugin({ + context: __dirname, + scope: "xyz", + manifest: require("./manifest.json"), + name: "./my-dll.js", + sourceType: "commonsjs2" +}) +``` ## **Examples** @@ -82,6 +106,11 @@ _A config for vendor, and another config for app (most common use case.) Built s T> Single DllPlugin with a single DllReferencePlugin. +### [sourceType and dependencies][examples-dll-source-type-and-dependencies] + +_Uses `libraryTarget` + `sourceType` `"commonjs2"` to create a vendor bundle, and a dependency bundle, on nodejs._ + +T> Single DllPlugin, with multiple DllReferencePlugins. ### [vendor][examples-dll-vendor] and [user][examples-dll-user] @@ -94,9 +123,6 @@ T> Multiple DllPlugins and multiple DllReferencePlugins. - [code splitting example][examples-explicit-vendor-chunk] -?> add a node.js example to [webpack/examples][examples-examples] - - ## More @@ -116,6 +142,7 @@ T> Multiple DllPlugins and multiple DllReferencePlugins. [examples-dll-vendor]: https://github.com/webpack/webpack/tree/master/examples/dll [examples-dll-user]: https://github.com/webpack/webpack/tree/master/examples/dll-user [examples-dll-app-and-vendor]: https://github.com/webpack/webpack/tree/master/examples/dll-app-and-vendor +[examples-dll-source-type-and-dependencies]: https://github.com/webpack/webpack/tree/master/examples/dll-source-type-and-dependencies/README.md [examples-explicit-vendor-chunk]: https://github.com/webpack/webpack/tree/master/examples/explicit-vendor-chunk/README.md [src-DllReferencePlugin]: https://github.com/webpack/tree/master/lib/DllReferencePlugin.js From 7ff3725759a44181dd7c3b1c4205e7282c2dbecf Mon Sep 17 00:00:00 2001 From: James Date: Sun, 30 Apr 2017 16:16:17 -0700 Subject: [PATCH 06/13] backtick plugin names & order alphabetical --- content/plugins/dll-plugin.md | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/content/plugins/dll-plugin.md b/content/plugins/dll-plugin.md index d7e706efd683..cd0fee067ed0 100644 --- a/content/plugins/dll-plugin.md +++ b/content/plugins/dll-plugin.md @@ -19,9 +19,9 @@ The `DllPlugin` and `DllReferencePlugin` provide means to split bundles in a way ## `DllPlugin` -* `path`: **absolute path** to the manifest json file (output) -* `name`: name of the exposed dll function ([TemplatePaths][src-TemplatedPathPlugin]: `[hash]` & `[name]` ) * `context` (optional): context of requests in the manifest file (defaults to the webpack context.) +* `name`: name of the exposed dll function ([TemplatePaths][src-TemplatedPathPlugin]: `[hash]` & `[name]` ) +* `path`: **absolute path** to the manifest json file (output) ```javascript new webpack.DllPlugin(options) @@ -38,11 +38,11 @@ Combine this plugin with `output.library` option to expose (aka, put into the gl ### `DllReferencePlugin` * `context`: (**absolute path**) context of requests in the manifest (or content property) -* `scope` (optional): prefix which is used for accessing the content of the dll +* `content` (optional): the mappings from request to module id (defaults to `manifest.content`) * `manifest` (object): an object containing `content` and `name` * `name` (optional): the name where the dll is exposed (defaults to `manifest.name`) (see also `externals`) +* `scope` (optional): prefix which is used for accessing the content of the dll * `sourceType` (optional): how the dll is exposed ([libraryTarget][docs-libraryTarget]) -* `content` (optional): the mappings from request to module id (defaults to `manifest.content`) ```javascript new webpack.DllReferencePlugin(options) @@ -74,7 +74,7 @@ T> [See an example use of mapped mode][examples-dll-source-type-and-dependencies # Usage -W> DllReferencePlugin and DllPlugin are used in _separate_ webpack configs. +W> `DllReferencePlugin` and `DllPlugin` are used in _separate_ webpack configs. ```javascript @@ -104,19 +104,19 @@ new webpack.DllReferencePlugin({ _A config for vendor, and another config for app (most common use case.) Built scripts are used in example HTML file. Demonstrates library, multiple configs, minimal example._ -T> Single DllPlugin with a single DllReferencePlugin. +T> Single `DllPlugin` with a single `DllReferencePlugin`. ### [sourceType and dependencies][examples-dll-source-type-and-dependencies] _Uses `libraryTarget` + `sourceType` `"commonjs2"` to create a vendor bundle, and a dependency bundle, on nodejs._ -T> Single DllPlugin, with multiple DllReferencePlugins. +T> Single `DllPlugin`, with multiple `DllReferencePlugins`. ### [vendor][examples-dll-vendor] and [user][examples-dll-user] _Two separate example folders. Demonstrates scope, and context._ -T> Multiple DllPlugins and multiple DllReferencePlugins. +T> Multiple `DllPlugins` and multiple `DllReferencePlugins`. ### related From 9018dd84063d4619ec181c4360dc66addcee71f9 Mon Sep 17 00:00:00 2001 From: Arete Code Date: Sun, 30 Apr 2017 16:22:21 -0700 Subject: [PATCH 07/13] strip pending examples --- content/plugins/dll-plugin.md | 18 ++---------------- 1 file changed, 2 insertions(+), 16 deletions(-) diff --git a/content/plugins/dll-plugin.md b/content/plugins/dll-plugin.md index cd0fee067ed0..f617c8e0bac2 100644 --- a/content/plugins/dll-plugin.md +++ b/content/plugins/dll-plugin.md @@ -81,8 +81,8 @@ W> `DllReferencePlugin` and `DllPlugin` are used in _separate_ webpack configs. // webpack.vendor.config.js new webpack.DllPlugin({ context: __dirname, - path: path.join(__dirname, "manifest.json"), name: "[name]_[hash]" + path: path.join(__dirname, "manifest.json"), }) ``` @@ -90,9 +90,9 @@ new webpack.DllPlugin({ // webpack.app.config.js new webpack.DllReferencePlugin({ context: __dirname, - scope: "xyz", manifest: require("./manifest.json"), name: "./my-dll.js", + scope: "xyz", sourceType: "commonsjs2" }) ``` @@ -100,18 +100,6 @@ new webpack.DllReferencePlugin({ ## **Examples** -### [vendor and app][examples-dll-app-and-vendor] - -_A config for vendor, and another config for app (most common use case.) Built scripts are used in example HTML file. Demonstrates library, multiple configs, minimal example._ - -T> Single `DllPlugin` with a single `DllReferencePlugin`. - -### [sourceType and dependencies][examples-dll-source-type-and-dependencies] - -_Uses `libraryTarget` + `sourceType` `"commonjs2"` to create a vendor bundle, and a dependency bundle, on nodejs._ - -T> Single `DllPlugin`, with multiple `DllReferencePlugins`. - ### [vendor][examples-dll-vendor] and [user][examples-dll-user] _Two separate example folders. Demonstrates scope, and context._ @@ -141,8 +129,6 @@ T> Multiple `DllPlugins` and multiple `DllReferencePlugins`. [examples-examples]: https://github.com/webpack/webpack/tree/master/examples [examples-dll-vendor]: https://github.com/webpack/webpack/tree/master/examples/dll [examples-dll-user]: https://github.com/webpack/webpack/tree/master/examples/dll-user -[examples-dll-app-and-vendor]: https://github.com/webpack/webpack/tree/master/examples/dll-app-and-vendor -[examples-dll-source-type-and-dependencies]: https://github.com/webpack/webpack/tree/master/examples/dll-source-type-and-dependencies/README.md [examples-explicit-vendor-chunk]: https://github.com/webpack/webpack/tree/master/examples/explicit-vendor-chunk/README.md [src-DllReferencePlugin]: https://github.com/webpack/tree/master/lib/DllReferencePlugin.js From 4aeab5778335439fd646169cc7fc081a69b5ee9d Mon Sep 17 00:00:00 2001 From: Arete Code Date: Sun, 30 Apr 2017 16:28:14 -0700 Subject: [PATCH 08/13] =?UTF-8?q?=F0=9F=91=95=20fix=20markdown=20following?= =?UTF-8?q?=20linting=20rules?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- content/plugins/dll-plugin.md | 25 ++++++++++++++----------- 1 file changed, 14 insertions(+), 11 deletions(-) diff --git a/content/plugins/dll-plugin.md b/content/plugins/dll-plugin.md index f617c8e0bac2..39556d541be5 100644 --- a/content/plugins/dll-plugin.md +++ b/content/plugins/dll-plugin.md @@ -72,7 +72,7 @@ T> [See an example use of mapped mode][examples-dll-source-type-and-dependencies -# Usage +## Usage W> `DllReferencePlugin` and `DllPlugin` are used in _separate_ webpack configs. @@ -108,22 +108,25 @@ T> Multiple `DllPlugins` and multiple `DllReferencePlugins`. ### related -- [code splitting example][examples-explicit-vendor-chunk] + +* [code splitting example][examples-explicit-vendor-chunk] ## More -#### Source -- [DllPlugin source][src-DllPlugin] -- [DllReferencePlugin source][src-DllReferencePlugin] -- [DllModuleFactory source][src-DllModuleFactory] -- [ManifestPlugin source][src-ManifestPlugin] +### Source + +* [DllPlugin source][src-DllPlugin] +* [DllReferencePlugin source][src-DllReferencePlugin] +* [DllModuleFactory source][src-DllModuleFactory] +* [ManifestPlugin source][src-ManifestPlugin] + +### Tests -#### Tests -- [DllPlugin creation test][tests-DllPlugin-0] -- [DllPlugin without scope test][tests-DllPlugin-2] -- [DllReferencePlugin use Dll test][tests-DllPlugin-1] +* [DllPlugin creation test][tests-DllPlugin-0] +* [DllPlugin without scope test][tests-DllPlugin-2] +* [DllReferencePlugin use Dll test][tests-DllPlugin-1] [examples-examples]: https://github.com/webpack/webpack/tree/master/examples From c730a8778f0e50d09fa9818a5d950186efd1bea1 Mon Sep 17 00:00:00 2001 From: James Date: Wed, 3 May 2017 15:24:54 -0700 Subject: [PATCH 09/13] =?UTF-8?q?=E2=9A=92=F0=9F=94=97=20link=20=E2=8E=81?= =?UTF-8?q?=E2=8E=82=20more=20->=20refs,=20=F0=9F=94=A2=20prop=20order,=20?= =?UTF-8?q?=F0=9F=93=92=20header?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 🙏 skipjack 🔢 prop order ⚒🔗 fix broken link 📒 file names as headers ⎁⎂ more to references --- content/plugins/dll-plugin.md | 22 ++++++++++------------ 1 file changed, 10 insertions(+), 12 deletions(-) diff --git a/content/plugins/dll-plugin.md b/content/plugins/dll-plugin.md index 39556d541be5..235336c73545 100644 --- a/content/plugins/dll-plugin.md +++ b/content/plugins/dll-plugin.md @@ -5,6 +5,7 @@ contributors: - sokra - opiepj - simon04 + - skipjack --- ## Introduction @@ -30,16 +31,14 @@ new webpack.DllPlugin(options) Creates a `manifest.json` which is written to the given `path`. It contains mappings from require and import requests, to module ids. It is used by the [DllReferencePlugin](#DllReferencePlugin). -W> Keep the `name` consistent with `output.library`. - -Combine this plugin with `output.library` option to expose (aka, put into the global scope) the dll function. +Combine this plugin with [`output.library`][docs-library] option to expose (aka, put into the global scope) the dll function. ### `DllReferencePlugin` * `context`: (**absolute path**) context of requests in the manifest (or content property) -* `content` (optional): the mappings from request to module id (defaults to `manifest.content`) * `manifest` (object): an object containing `content` and `name` +* `content` (optional): the mappings from request to module id (defaults to `manifest.content`) * `name` (optional): the name where the dll is exposed (defaults to `manifest.name`) (see also `externals`) * `scope` (optional): prefix which is used for accessing the content of the dll * `sourceType` (optional): how the dll is exposed ([libraryTarget][docs-libraryTarget]) @@ -50,6 +49,7 @@ new webpack.DllReferencePlugin(options) References a dll manifest file to map dependency names to module ids, then requires them as needed using the internal `__webpack_require__` function. +W> Keep the `name` consistent with `output.library`. ### Modes @@ -68,17 +68,13 @@ The content of the dll is mapped to the current directory. If a required file ma Because this happens after resolving every file in the dll bundle, the same paths must be available for the consumer of the dll bundle. i.e. if the dll contains `lodash` and the file `abc`, `require("lodash")` and `require("./abc")` will be used from the dll, rather than building them into the main bundle. -T> [See an example use of mapped mode][examples-dll-source-type-and-dependencies] - - ## Usage W> `DllReferencePlugin` and `DllPlugin` are used in _separate_ webpack configs. - +**webpack.vendor.config.js** ```javascript -// webpack.vendor.config.js new webpack.DllPlugin({ context: __dirname, name: "[name]_[hash]" @@ -86,8 +82,8 @@ new webpack.DllPlugin({ }) ``` +**webpack.app.config.js** ```javascript -// webpack.app.config.js new webpack.DllReferencePlugin({ context: __dirname, manifest: require("./manifest.json"), @@ -113,7 +109,7 @@ T> Multiple `DllPlugins` and multiple `DllReferencePlugins`. -## More +## References ### Source @@ -145,4 +141,6 @@ T> Multiple `DllPlugins` and multiple `DllReferencePlugins`. [tests-DllPlugin-1]: https://github.com/webpack/webpack/tree/master/test/configCases/dll-plugin [tests-DllPlugin-2]: https://github.com/webpack/webpack/tree/master/test/configCases/dll-plugin/2-use-dll-without-scope/webpack.config.js -[docs-libraryTarget]: https://webpack.js.org/configuration/output/#output-librarytarget +[docs-externals]: /configuration/externals/ +[docs-library]: /concepts/output/#output-library +[docs-libraryTarget]: /configuration/output/#output-librarytarget From 5ab2ebf3981c63163a0f5585d09235bfe34b896f Mon Sep 17 00:00:00 2001 From: James Date: Thu, 4 May 2017 01:04:11 -0700 Subject: [PATCH 10/13] =?UTF-8?q?=F0=9F=91=95=20space=20around=20headers?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- content/plugins/dll-plugin.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/content/plugins/dll-plugin.md b/content/plugins/dll-plugin.md index 235336c73545..48e618d17770 100644 --- a/content/plugins/dll-plugin.md +++ b/content/plugins/dll-plugin.md @@ -74,6 +74,7 @@ Because this happens after resolving every file in the dll bundle, the same path W> `DllReferencePlugin` and `DllPlugin` are used in _separate_ webpack configs. **webpack.vendor.config.js** + ```javascript new webpack.DllPlugin({ context: __dirname, @@ -83,6 +84,7 @@ new webpack.DllPlugin({ ``` **webpack.app.config.js** + ```javascript new webpack.DllReferencePlugin({ context: __dirname, From 7491d02b273b229a8a6fcee2df62b407832133fd Mon Sep 17 00:00:00 2001 From: Greg Venech Date: Thu, 4 May 2017 23:04:47 -0400 Subject: [PATCH 11/13] docs(plugins): make minor formatting tweaks --- content/plugins/dll-plugin.md | 17 +++++++---------- 1 file changed, 7 insertions(+), 10 deletions(-) diff --git a/content/plugins/dll-plugin.md b/content/plugins/dll-plugin.md index 48e618d17770..c4250cf378e0 100644 --- a/content/plugins/dll-plugin.md +++ b/content/plugins/dll-plugin.md @@ -17,7 +17,6 @@ The `DllPlugin` and `DllReferencePlugin` provide means to split bundles in a way [DllReferencePlugin](#DllReferencePlugin) is used in the primary webpack config, it references the dll-only-bundle(s) to require pre-built dependencies. - ## `DllPlugin` * `context` (optional): context of requests in the manifest file (defaults to the webpack context.) @@ -30,7 +29,6 @@ new webpack.DllPlugin(options) Creates a `manifest.json` which is written to the given `path`. It contains mappings from require and import requests, to module ids. It is used by the [DllReferencePlugin](#DllReferencePlugin). - Combine this plugin with [`output.library`][docs-library] option to expose (aka, put into the global scope) the dll function. @@ -51,18 +49,18 @@ References a dll manifest file to map dependency names to module ids, then requi W> Keep the `name` consistent with `output.library`. + ### Modes -Can be used in two different modes: +This plugin can be used in two different modes, _scoped_ and _mapped_. -#### **Scoped mode** +#### Scoped Mode The content of the dll is accessible under a module prefix. i.e. with `scope = "xyz"` a file `abc` in the dll can be access via `require("xyz/abc")`. T> [See an example use of scope][examples-dll-user] - -#### **Mapped mode** +#### Mapped Mode The content of the dll is mapped to the current directory. If a required file matches a file in the dll (after resolving), then the file from the dll is used instead. @@ -96,21 +94,20 @@ new webpack.DllReferencePlugin({ ``` -## **Examples** +## Examples ### [vendor][examples-dll-vendor] and [user][examples-dll-user] -_Two separate example folders. Demonstrates scope, and context._ +_Two separate example folders. Demonstrates scope and context._ T> Multiple `DllPlugins` and multiple `DllReferencePlugins`. -### related +### Related * [code splitting example][examples-explicit-vendor-chunk] - ## References ### Source From 2b5fd45bcdd45513be2a96c8e80423ca77b61fe9 Mon Sep 17 00:00:00 2001 From: James Date: Thu, 4 May 2017 23:30:28 -0700 Subject: [PATCH 12/13] =?UTF-8?q?=F0=9F=94=97=20change=20links=20to=20inli?= =?UTF-8?q?ne?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- content/plugins/dll-plugin.md | 52 +++++++++++------------------------ 1 file changed, 16 insertions(+), 36 deletions(-) diff --git a/content/plugins/dll-plugin.md b/content/plugins/dll-plugin.md index c4250cf378e0..0caa73c6c38a 100644 --- a/content/plugins/dll-plugin.md +++ b/content/plugins/dll-plugin.md @@ -20,7 +20,7 @@ The `DllPlugin` and `DllReferencePlugin` provide means to split bundles in a way ## `DllPlugin` * `context` (optional): context of requests in the manifest file (defaults to the webpack context.) -* `name`: name of the exposed dll function ([TemplatePaths][src-TemplatedPathPlugin]: `[hash]` & `[name]` ) +* `name`: name of the exposed dll function ([TemplatePaths](https://github.com/webpack/webpack/blob/master/lib/TemplatedPathPlugin.js): `[hash]` & `[name]` ) * `path`: **absolute path** to the manifest json file (output) ```javascript @@ -29,7 +29,7 @@ new webpack.DllPlugin(options) Creates a `manifest.json` which is written to the given `path`. It contains mappings from require and import requests, to module ids. It is used by the [DllReferencePlugin](#DllReferencePlugin). -Combine this plugin with [`output.library`][docs-library] option to expose (aka, put into the global scope) the dll function. +Combine this plugin with [`output.library`](/configuration/output/#output-library) option to expose (aka, put into the global scope) the dll function. ### `DllReferencePlugin` @@ -37,9 +37,9 @@ Combine this plugin with [`output.library`][docs-library] option to expose (aka, * `context`: (**absolute path**) context of requests in the manifest (or content property) * `manifest` (object): an object containing `content` and `name` * `content` (optional): the mappings from request to module id (defaults to `manifest.content`) -* `name` (optional): the name where the dll is exposed (defaults to `manifest.name`) (see also `externals`) +* `name` (optional): the name where the dll is exposed (defaults to `manifest.name`) (see also [`externals`](/configuration/externals/)) * `scope` (optional): prefix which is used for accessing the content of the dll -* `sourceType` (optional): how the dll is exposed ([libraryTarget][docs-libraryTarget]) +* `sourceType` (optional): how the dll is exposed ([libraryTarget](/configuration/output/#output-library)) ```javascript new webpack.DllReferencePlugin(options) @@ -47,7 +47,7 @@ new webpack.DllReferencePlugin(options) References a dll manifest file to map dependency names to module ids, then requires them as needed using the internal `__webpack_require__` function. -W> Keep the `name` consistent with `output.library`. +W> Keep the `name` consistent with [`output.library`](/configuration/output/#output-library). ### Modes @@ -58,7 +58,7 @@ This plugin can be used in two different modes, _scoped_ and _mapped_. The content of the dll is accessible under a module prefix. i.e. with `scope = "xyz"` a file `abc` in the dll can be access via `require("xyz/abc")`. -T> [See an example use of scope][examples-dll-user] +T> [See an example use of scope](https://github.com/webpack/webpack/tree/master/examples/dll-user) #### Mapped Mode @@ -96,7 +96,7 @@ new webpack.DllReferencePlugin({ ## Examples -### [vendor][examples-dll-vendor] and [user][examples-dll-user] +### [vendor](https://github.com/webpack/webpack/tree/master/examples/dll) and [user](https://github.com/webpack/webpack/tree/master/examples/dll-user) _Two separate example folders. Demonstrates scope and context._ @@ -105,41 +105,21 @@ T> Multiple `DllPlugins` and multiple `DllReferencePlugins`. ### Related -* [code splitting example][examples-explicit-vendor-chunk] +* [code splitting example](https://github.com/webpack/webpack/tree/master/examples/explicit-vendor-chunk/README.md) ## References ### Source -* [DllPlugin source][src-DllPlugin] -* [DllReferencePlugin source][src-DllReferencePlugin] -* [DllModuleFactory source][src-DllModuleFactory] -* [ManifestPlugin source][src-ManifestPlugin] +* [DllPlugin source](https://github.com/webpack/webpack/tree/master/lib/DllPlugin.js) +* [DllReferencePlugin source](https://github.com/webpack/tree/master/lib/DllReferencePlugin.js) +* [DllEntryPlugin source](https://github.com/webpack/webpack/blob/master/lib/DllEntryPlugin.js) +* [DllModuleFactory source](https://github.com/webpack/webpack/blob/master/lib/DllModuleFactory.js) +* [ManifestPlugin source](https://github.com/webpack/webpack/blob/master/lib/LibManifestPlugin.js) ### Tests -* [DllPlugin creation test][tests-DllPlugin-0] -* [DllPlugin without scope test][tests-DllPlugin-2] -* [DllReferencePlugin use Dll test][tests-DllPlugin-1] - - -[examples-examples]: https://github.com/webpack/webpack/tree/master/examples -[examples-dll-vendor]: https://github.com/webpack/webpack/tree/master/examples/dll -[examples-dll-user]: https://github.com/webpack/webpack/tree/master/examples/dll-user -[examples-explicit-vendor-chunk]: https://github.com/webpack/webpack/tree/master/examples/explicit-vendor-chunk/README.md - -[src-DllReferencePlugin]: https://github.com/webpack/tree/master/lib/DllReferencePlugin.js -[src-DllPlugin]: https://github.com/webpack/webpack/tree/master/lib/DllPlugin.js -[src-DllEntryPlugin]: https://github.com/webpack/webpack/blob/master/lib/DllEntryPlugin.js -[src-DllModuleFactory]: https://github.com/webpack/webpack/blob/master/lib/DllModuleFactory.js -[src-ManifestPlugin]: https://github.com/webpack/webpack/blob/master/lib/LibManifestPlugin.js -[src-TemplatedPathPlugin]: https://github.com/webpack/webpack/blob/master/lib/TemplatedPathPlugin.js - -[tests-DllPlugin-0]: https://github.com/webpack/webpack/tree/master/test/configCases/dll-plugin/0-create-dll/webpack.config.js -[tests-DllPlugin-1]: https://github.com/webpack/webpack/tree/master/test/configCases/dll-plugin -[tests-DllPlugin-2]: https://github.com/webpack/webpack/tree/master/test/configCases/dll-plugin/2-use-dll-without-scope/webpack.config.js - -[docs-externals]: /configuration/externals/ -[docs-library]: /concepts/output/#output-library -[docs-libraryTarget]: /configuration/output/#output-librarytarget +* [DllPlugin creation test](https://github.com/webpack/webpack/tree/master/test/configCases/dll-plugin/0-create-dll/webpack.config.js) +* [DllPlugin without scope test](https://github.com/webpack/webpack/tree/master/test/configCases/dll-plugin/2-use-dll-without-scope/webpack.config.js) +* [DllReferencePlugin use Dll test](https://github.com/webpack/webpack/tree/master/test/configCases/dll-plugin) From a190df635d72d2ea0ef46d558d589ce3bb47014b Mon Sep 17 00:00:00 2001 From: James Date: Thu, 4 May 2017 23:32:06 -0700 Subject: [PATCH 13/13] =?UTF-8?q?=E2=8C=A8=EF=B8=8F=E2=9A=92=20fix=20typo?= =?UTF-8?q?=20library=20->=20libraryTarget?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- content/plugins/dll-plugin.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/plugins/dll-plugin.md b/content/plugins/dll-plugin.md index 0caa73c6c38a..04a29096524a 100644 --- a/content/plugins/dll-plugin.md +++ b/content/plugins/dll-plugin.md @@ -39,7 +39,7 @@ Combine this plugin with [`output.library`](/configuration/output/#output-librar * `content` (optional): the mappings from request to module id (defaults to `manifest.content`) * `name` (optional): the name where the dll is exposed (defaults to `manifest.name`) (see also [`externals`](/configuration/externals/)) * `scope` (optional): prefix which is used for accessing the content of the dll -* `sourceType` (optional): how the dll is exposed ([libraryTarget](/configuration/output/#output-library)) +* `sourceType` (optional): how the dll is exposed ([libraryTarget](/configuration/output/#output-librarytarget)) ```javascript new webpack.DllReferencePlugin(options)