You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: src/content/configuration/externals.mdx
+44-15Lines changed: 44 additions & 15 deletions
Original file line number
Diff line number
Diff line change
@@ -72,44 +72,45 @@ The following syntaxes are accepted...
72
72
73
73
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).
74
74
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.
76
76
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
78
78
79
79
```javascript
80
80
module.exports= {
81
-
//...
81
+
//...
82
82
externals: {
83
-
'fs-extra':'commonjs2 fs-extra',
83
+
jquery:'commonjs jQuery',
84
84
},
85
85
};
86
86
```
87
87
88
-
This leaves any dependent modules unchanged, i.e. the code shown below:
88
+
### [string]
89
89
90
90
```javascript
91
-
importfsfrom'fs-extra';
91
+
module.exports= {
92
+
//...
93
+
externals: {
94
+
subtract: ['./math', 'subtract'],
95
+
},
96
+
};
92
97
```
93
98
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;`
95
100
96
-
```javascript
97
-
constfs=require('fs-extra');
98
-
```
101
+
Similar to the [string syntax](#string), you can specify the external library type with the `[externalsType] [externals]` syntax.
99
102
100
-
### [string]
103
+
For example
101
104
102
105
```javascript
103
106
module.exports= {
104
107
//...
105
108
externals: {
106
-
subtract: ['./math', 'subtract'],
109
+
subtract: ['commonjs ./math', 'subtract'],
107
110
},
108
111
};
109
112
```
110
113
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
-
113
114
### object
114
115
115
116
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:
330
331
-`'amd'`
331
332
-`'amd-require'`
332
333
-`'assign'`
333
-
-`'commonjs'`
334
+
-[`'commonjs'`](#externalstypecommonjs)
334
335
-`'commonjs-module'`
335
336
-`'global'`
336
337
-`'import'` - uses `import()` to load a native EcmaScript module (async module)
@@ -356,6 +357,34 @@ module.exports = {
356
357
};
357
358
```
358
359
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
+
importfsfrom'fs-extra';
380
+
```
381
+
382
+
into something like:
383
+
384
+
```javascript
385
+
constfs=require('fs-extra');
386
+
```
387
+
359
388
### externalsType.module
360
389
361
390
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