Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Appearance settings

Commit 991ad16

Browse filesBrowse files
authored
Update externals.mdx
1 parent 5e524df commit 991ad16
Copy full SHA for 991ad16

File tree

Expand file treeCollapse file tree

1 file changed

+44
-15
lines changed
Filter options
Expand file treeCollapse file tree

1 file changed

+44
-15
lines changed

‎src/content/configuration/externals.mdx

Copy file name to clipboardExpand all lines: src/content/configuration/externals.mdx
+44-15Lines changed: 44 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -72,44 +72,45 @@ The following syntaxes are accepted...
7272

7373
See the example above. The property name `jquery` indicates that the module `jquery` in `import $ from 'jquery'` should be excluded. In order to replace this module, the value `jQuery` will be used to retrieve a global `jQuery` variable. In other words, when a string is provided it will be treated as `root` (defined above and below).
7474

75-
On the other hand, if you want to externalise a library that is available as a CommonJS module, you can provide the external library type together with the library name.
75+
You can specify [external library type](#externalstype) to the external using the `[externalsType] [externals]` syntax. This will override the default external library type specified in the [externalsType](#externalstype) option.
7676

77-
For example, if you want to exclude `fs-extra` from the output bundle and import it during the runtime instead, you can specify it as follows:
77+
For example, if you want to externalise a library as a [CommonJS module](#externalstypecommonjs), you can specify
7878

7979
```javascript
8080
module.exports = {
81-
// ...
81+
//...
8282
externals: {
83-
'fs-extra': 'commonjs2 fs-extra',
83+
jquery: 'commonjs jQuery',
8484
},
8585
};
8686
```
8787

88-
This leaves any dependent modules unchanged, i.e. the code shown below:
88+
### [string]
8989

9090
```javascript
91-
import fs from 'fs-extra';
91+
module.exports = {
92+
//...
93+
externals: {
94+
subtract: ['./math', 'subtract'],
95+
},
96+
};
9297
```
9398

94-
will compile to something like:
99+
`subtract: ['./math', 'subtract']` allows you select part of a commonjs module, where `./math` is the module and your bundle only requires the subset under the `subtract` variable. This example would translate to `require('./math').subtract;`
95100

96-
```javascript
97-
const fs = require('fs-extra');
98-
```
101+
Similar to the [string syntax](#string), you can specify the external library type with the `[externalsType] [externals]` syntax.
99102

100-
### [string]
103+
For example
101104

102105
```javascript
103106
module.exports = {
104107
//...
105108
externals: {
106-
subtract: ['./math', 'subtract'],
109+
subtract: ['commonjs ./math', 'subtract'],
107110
},
108111
};
109112
```
110113

111-
`subtract: ['./math', 'subtract']` allows you select part of a commonjs module, where `./math` is the module and your bundle only requires the subset under the `subtract` variable. This example would translate to `require('./math').subtract;`
112-
113114
### object
114115

115116
W> An object with `{ root, amd, commonjs, ... }` is only allowed for [`libraryTarget: 'umd'`](/configuration/output/#outputlibrarytarget). It's not allowed for other library targets.
@@ -330,7 +331,7 @@ Supported types:
330331
- `'amd'`
331332
- `'amd-require'`
332333
- `'assign'`
333-
- `'commonjs'`
334+
- [`'commonjs'`](#externalstypecommonjs)
334335
- `'commonjs-module'`
335336
- `'global'`
336337
- `'import'` - uses `import()` to load a native EcmaScript module (async module)
@@ -356,6 +357,34 @@ module.exports = {
356357
};
357358
```
358359

360+
### externalsType.commonjs
361+
362+
Specify the default type of externals as `'commonjs'`. Webpack will generate code like `const X = require('...')` for externals used in a module.
363+
364+
**webpack.config.js**
365+
366+
```javascript
367+
module.exports = {
368+
// ...
369+
externalsType: 'commonjs',
370+
externals: {
371+
'fs-extra': 'fs-extra',
372+
},
373+
};
374+
```
375+
376+
Will compile
377+
378+
```javascript
379+
import fs from 'fs-extra';
380+
```
381+
382+
into something like:
383+
384+
```javascript
385+
const fs = require('fs-extra');
386+
```
387+
359388
### externalsType.module
360389

361390
Specify the default type of externals as `'module'`. Webpack will generate code like `import * as X from '...'` for externals used in a module.

0 commit comments

Comments
0 (0)
Morty Proxy This is a proxified and sanitized view of the page, visit original site.