From ef578b54ee1b00f40eae0d53038195b89c75c2d3 Mon Sep 17 00:00:00 2001
From: chenxsan <chenxsan@gmail.com>
Date: Sat, 8 Aug 2020 20:50:40 +0800
Subject: [PATCH 1/3] docs(configuration): document external script

---
 src/content/configuration/externals.md | 58 ++++++++++++++++++++++++++
 1 file changed, 58 insertions(+)

diff --git a/src/content/configuration/externals.md b/src/content/configuration/externals.md
index 70aeba24b45d..24a047c86e6d 100644
--- a/src/content/configuration/externals.md
+++ b/src/content/configuration/externals.md
@@ -321,6 +321,7 @@ Supported types:
 - `'system'`
 - `'promise'` - same as `'var'` but awaits the result (async module)
 - `'import'` - uses `import()` to load a native EcmaScript module (async module)
+- `'script'` - load script with HTML `<script>` element and use the global variable defined.
 
 __webpack.config.js__
 
@@ -330,3 +331,60 @@ module.exports = {
   externalsType: 'promise'
 };
 ```
+
+### `script`
+
+External script can be loaded from any url when `externalsType` is set to `script`.
+
+There're two syntaxes for loading external script in webpack configuration:
+
+1. `{externals: {packageName: ['http://example.com/script.js', 'global', 'property', 'property']}}` (properties are optional)
+2. `{externals: {packageName: 'global@http://example.com/script.js'}}`
+
+For example, you can load lodash and jQuery from CDN:
+
+__webpack.config.js__
+
+```js
+module.exports = {
+  // ...
+  externalsType: 'script',
+  externals: {
+    lodash: ['https://cdn.jsdelivr.net/npm/lodash@4.17.19/lodash.min.js', '_'],
+    jquery: '$@https://code.jquery.com/jquery-3.5.1.min.js' // shortcut syntax
+  }
+};
+```
+
+Then use them in your code:
+
+```js
+import $ from 'jquery';
+// `import 'jquery'` works too if you only want to use global variable
+import _ from 'lodash';
+// both local variable `$` and global variable `window.$` would be available here
+```
+
+T> `publicPath` won't be added to the url.
+
+In the case of `lodash`, you can expose any one of its property as you wish, for example:
+
+```js
+module.exports = {
+  // ...
+  externalsType: 'script',
+  externals: {
+    lodash: ['https://cdn.jsdelivr.net/npm/lodash@4.17.19/lodash.min.js', '_', 'head'],
+  }
+};
+```
+
+Both `head` and `window._` are exposed now when you `import` `lodash`:
+
+```js
+import head from 'lodash';
+console.log(head([1, 2, 3])); // logs 1 here
+console.log(window._.head(['a', 'b'])); // logs a here
+```
+
+T> When loading code with `script` tags, the runtime will try to find an existing `script` tag that matches the `src` attribute or has a specific `data-webpack` attribute. For chunk loading `data-webpack` attribute would have value of `"[output.uniqueName]:chunk-[chunkId]"` while external script has value of `"[output.uniqueName]:[global]"`. The script tag would be removed once the script is loaded. Options like `output.chunkLoadTimeout`, `output.crossOriginLoading` and `output.scriptType` apply to these external scripts too.
\ No newline at end of file

From 84e90d2d1f5a3f9918d8df8b0689038e7f68ac99 Mon Sep 17 00:00:00 2001
From: Sam Chen <chenxsan@gmail.com>
Date: Tue, 11 Aug 2020 12:19:23 +0800
Subject: [PATCH 2/3] Apply suggestions from code review

Co-authored-by: Eugene Hlushko <jhlushko@gmail.com>
---
 src/content/configuration/externals.md | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/content/configuration/externals.md b/src/content/configuration/externals.md
index 24a047c86e6d..bb8c97d862a9 100644
--- a/src/content/configuration/externals.md
+++ b/src/content/configuration/externals.md
@@ -334,7 +334,7 @@ module.exports = {
 
 ### `script`
 
-External script can be loaded from any url when `externalsType` is set to `script`.
+External script can be loaded from any URL when [`externalsType`](#externalstype) is set to `'script'`. The `<script>` tag would be removed after it has been loaded.
 
 There're two syntaxes for loading external script in webpack configuration:
 
@@ -365,7 +365,7 @@ import _ from 'lodash';
 // both local variable `$` and global variable `window.$` would be available here
 ```
 
-T> `publicPath` won't be added to the url.
+T> [`output.publicPath`](/configuration/output/#outputpublicpath) won't be added to the provided URL.
 
 In the case of `lodash`, you can expose any one of its property as you wish, for example:
 
@@ -387,4 +387,6 @@ console.log(head([1, 2, 3])); // logs 1 here
 console.log(window._.head(['a', 'b'])); // logs a here
 ```
 
-T> When loading code with `script` tags, the runtime will try to find an existing `script` tag that matches the `src` attribute or has a specific `data-webpack` attribute. For chunk loading `data-webpack` attribute would have value of `"[output.uniqueName]:chunk-[chunkId]"` while external script has value of `"[output.uniqueName]:[global]"`. The script tag would be removed once the script is loaded. Options like `output.chunkLoadTimeout`, `output.crossOriginLoading` and `output.scriptType` apply to these external scripts too.
\ No newline at end of file
+T> When loading code with HTML `<script>` tags, the webpack runtime will try to find an existing `<script>` tag that matches the `src` attribute or has a specific `data-webpack` attribute. For chunk loading `data-webpack` attribute would have value of `'[output.uniqueName]:chunk-[chunkId]'` while external script has value of `'[output.uniqueName]:[global]'`. 
+
+T> Options like `output.chunkLoadTimeout`, `output.crossOriginLoading` and `output.scriptType` will also have effect on the external scripts loaded this way.

From deee62c7bab48c5d1a068a458e898127219e6982 Mon Sep 17 00:00:00 2001
From: chenxsan <chenxsan@gmail.com>
Date: Tue, 11 Aug 2020 22:10:43 +0800
Subject: [PATCH 3/3] update

---
 src/content/configuration/externals.md | 44 +++++++++++++++++---------
 1 file changed, 29 insertions(+), 15 deletions(-)

diff --git a/src/content/configuration/externals.md b/src/content/configuration/externals.md
index bb8c97d862a9..608fa59a1acf 100644
--- a/src/content/configuration/externals.md
+++ b/src/content/configuration/externals.md
@@ -321,7 +321,7 @@ Supported types:
 - `'system'`
 - `'promise'` - same as `'var'` but awaits the result (async module)
 - `'import'` - uses `import()` to load a native EcmaScript module (async module)
-- `'script'` - load script with HTML `<script>` element and use the global variable defined.
+- `'script'` - load script exposing predefined global variables with HTML `<script>` element
 
 __webpack.config.js__
 
@@ -334,14 +334,33 @@ module.exports = {
 
 ### `script`
 
-External script can be loaded from any URL when [`externalsType`](#externalstype) is set to `'script'`. The `<script>` tag would be removed after it has been loaded.
+External script can be loaded from any URL when [`externalsType`](#externalstype) is set to `'script'`. The `<script>` tag would be removed after the script has been loaded.
 
-There're two syntaxes for loading external script in webpack configuration:
+#### Syntax
 
-1. `{externals: {packageName: ['http://example.com/script.js', 'global', 'property', 'property']}}` (properties are optional)
-2. `{externals: {packageName: 'global@http://example.com/script.js'}}`
+```javascript
+module.exports = {
+  externals: {
+    packageName: ['http://example.com/script.js', 'global', 'property', 'property'] // properties are optional
+  }
+};
+```
+
+You can also use the shortcut syntax if you're not going to specify any properties:
+
+```javascript
+module.exports = {
+  externals: {
+    packageName: 'global@http://example.com/script.js' // no properties here
+  }
+};
+```
+
+T> [`output.publicPath`](/configuration/output/#outputpublicpath) won't be added to the provided URL.
+
+#### Example
 
-For example, you can load lodash and jQuery from CDN:
+Let's load a `lodash` from CDN:
 
 __webpack.config.js__
 
@@ -351,23 +370,18 @@ module.exports = {
   externalsType: 'script',
   externals: {
     lodash: ['https://cdn.jsdelivr.net/npm/lodash@4.17.19/lodash.min.js', '_'],
-    jquery: '$@https://code.jquery.com/jquery-3.5.1.min.js' // shortcut syntax
   }
 };
 ```
 
-Then use them in your code:
+Then use it in code:
 
 ```js
-import $ from 'jquery';
-// `import 'jquery'` works too if you only want to use global variable
 import _ from 'lodash';
-// both local variable `$` and global variable `window.$` would be available here
+console.log(_.head([1, 2, 3]));
 ```
 
-T> [`output.publicPath`](/configuration/output/#outputpublicpath) won't be added to the provided URL.
-
-In the case of `lodash`, you can expose any one of its property as you wish, for example:
+Here's how we specify properties for the above example:
 
 ```js
 module.exports = {
@@ -379,7 +393,7 @@ module.exports = {
 };
 ```
 
-Both `head` and `window._` are exposed now when you `import` `lodash`:
+Both local variable `head` and global `window._` will be exposed when you `import` `lodash`:
 
 ```js
 import head from 'lodash';