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/output.md
+28-29Lines changed: 28 additions & 29 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -295,14 +295,16 @@ If using the [`output.library`](#output-library) option, the library name is aut
295
295
296
296
How the value of the `output.library` is used depends on the value of the [`output.libraryTarget`](#output-librarytarget) option; please refer to that section for the complete details. Note that the default option for `output.libraryTarget` is `var`, so if the following configuration option is used:
297
297
298
-
```javascript
298
+
```js
299
299
output: {
300
300
library:"MyLibrary"
301
301
}
302
302
```
303
303
304
304
The variable `MyLibrary` will be bound with the return value of your entry file, if the resulting output is included as a script tag in an HTML page.
305
305
306
+
W> Note that if an `array` is provided as an `entry` point, only the last module in the array will be exposed. If an `object` is provided, it can exposed using an `array` syntax (see [this example](https://github.com/webpack/webpack/tree/master/examples/multi-part-library) for details).
307
+
306
308
T> Read the [authoring libraries guide](/guides/author-libraries) guide for more information on `output.library` as well as `output.libraryTarget`.
307
309
308
310
@@ -312,41 +314,38 @@ T> Read the [authoring libraries guide](/guides/author-libraries) guide for more
312
314
313
315
> Default: `_entry_return_`
314
316
315
-
Configure which module or modules will be exposed via the `libraryTarget`.
316
-
317
-
The default value `_entry_return_` is the namespace or default module returned by your entry file.
318
-
319
-
The examples below demonstrate the effect of this config when using `libraryTarget: "var"`, but any target may be used.
317
+
Configure which module or modules will be exposed via the `libraryTarget`. The default `_entry_return_` value is the namespace or default module returned by your entry file. The examples below demonstrate the effect of this config when using `libraryTarget: "var"`, but any target may be used.
320
318
321
319
The following configurations are supported:
322
320
323
321
`libraryExport: "default"` - The **default export of your entry point** will be assigned to the library target:
324
322
325
-
```javascript
323
+
```js
326
324
// if your entry has a default export of `MyDefaultModule`
327
325
var MyDefaultModule =_entry_return_.default;
328
326
```
329
327
330
328
`libraryExport: "MyModule"` - The **specified module** will be assigned to the library target:
331
329
332
-
```javascript
330
+
```js
333
331
var MyModule =_entry_return_.MyModule;
334
332
```
335
333
336
334
`libraryExport: ["MyModule", "MySubModule"]` - The array is interpreted as a **path to a module** to be assigned to the library target:
337
335
338
-
```javascript
336
+
```js
339
337
var MySubModule =_entry_return_.MyModule.MySubModule;
340
338
```
341
339
342
-
As the examples have shown that the return values of the entry points are bounded to those named variables, the usage of the resulting library is simply like so:
340
+
With the `libraryExport` configurations specified above, the resulting libraries could be utilized as such:
343
341
344
-
```javascript
342
+
```js
345
343
MyDefaultModule.doSomething();
346
344
MyModule.doSomething();
347
345
MySubModule.doSomething();
348
346
```
349
347
348
+
350
349
## `output.libraryTarget`
351
350
352
351
`string`
@@ -363,7 +362,7 @@ These options assign the return value of the entry point (e.g. whatever the entr
363
362
364
363
`libraryTarget: "var"` - (default) When your library is loaded, the **return value of your entry point** will be assigned to a variable:
365
364
366
-
```javascript
365
+
```js
367
366
var MyLibrary = _entry_return_;
368
367
369
368
// In a separate script...
@@ -375,7 +374,7 @@ W> When using this option, an empty `output.library` will result in no assignmen
375
374
376
375
`libraryTarget: "assign"` - This will generate an implied global which has the potential to reassign an existing value (use with caution).
377
376
378
-
```javascript
377
+
```js
379
378
MyLibrary = _entry_return_;
380
379
```
381
380
@@ -390,15 +389,15 @@ These options assign the return value of the entry point (e.g. whatever the entr
390
389
391
390
If `output.library` is not assigned a non-empty string, the default behavior is that all properties returned by the entry point will be assigned to the object as defined for the particular `output.libraryTarget`, via the following code fragment:
392
391
393
-
```javascript
392
+
```js
394
393
(function(e, a) { for(var i in a) e[i] = a[i]; }(${output.libraryTarget}, _entry_return_)
395
394
```
396
395
397
396
W> Note that not setting a `output.library` will cause all properties returned by the entry point to be assigned to the given object; there are no checks against existing property names.
398
397
399
398
`libraryTarget:"this"` - The **return value of your entry point** will be assigned to this under the property named by `output.library`. The meaning of `this` is up to you:
400
399
401
-
```javascript
400
+
``` js
402
401
this["MyLibrary"] = _entry_return_;
403
402
404
403
// In a separate script...
@@ -408,7 +407,7 @@ MyLibrary.doSomething(); // if this is window
408
407
409
408
`libraryTarget:"window"` - The **return value of your entry point** will be assigned to the `window` object using the `output.library` value.
`libraryTarget:"commonjs"` - The **return value of your entry point** will be assigned to the `exports` object using the `output.library` value. As the name implies, this is used in CommonJS environments.
428
427
429
-
```javascript
428
+
``` js
430
429
exports["MyLibrary"] = _entry_return_;
431
430
432
431
require("MyLibrary").doSomething();
@@ -439,7 +438,7 @@ These options will result in a bundle that comes with a more complete header to
439
438
440
439
`libraryTarget:"commonjs2"` - The **return value of your entry point** will be assigned to the `module.exports`. As the name implies, this is used in CommonJS environments:
441
440
442
-
```javascript
441
+
``` js
443
442
module.exports= _entry_return_;
444
443
445
444
require("MyLibrary").doSomething();
@@ -456,7 +455,7 @@ AMD modules require that the entry chunk (e.g. the first script loaded by the `<
456
455
457
456
So, with the following configuration...
458
457
459
-
```javascript
458
+
``` js
460
459
output: {
461
460
library:"MyLibrary",
462
461
libraryTarget:"amd"
@@ -465,23 +464,23 @@ output: {
465
464
466
465
The generated output will be defined with the name "MyLibrary", i.e.
467
466
468
-
```javascript
467
+
``` js
469
468
define("MyLibrary", [], function() {
470
469
// This module return value is what your entry chunk returns
471
470
});
472
471
```
473
472
474
473
The bundle can be included as part of a script tag, and the bundle can be invoked like so:
475
474
476
-
```javascript
475
+
``` js
477
476
require(['MyLibrary'], function(MyLibrary) {
478
477
// Do something with the library...
479
478
});
480
479
```
481
480
482
481
If `output.library` is undefined, the following is generated instead.
483
482
484
-
```javascript
483
+
``` js
485
484
define([], function() {
486
485
// This module returns is what your entry chunk returns
487
486
});
@@ -494,7 +493,7 @@ This bundle will not work as expected, or not work at all (in the case of the al
494
493
495
494
In this case, you need the `library` property to name your module:
Note that omitting `library` will result in the assignment of all properties returned by the entry point be assigned directly to the root object, as documented under the [object assignment section](#exposing-the-library-via-object-assignment). Example:
Since webpack 3.1.0, you may specify an object for `library` for differing names per targets:
547
546
548
-
```javascript
547
+
``` js
549
548
output: {
550
549
library: {
551
550
root:"MyLibrary",
@@ -653,7 +652,7 @@ publicPath: "", // relative to HTML page (same directory)
653
652
654
653
In cases where the `publicPath` of output files can't be known at compile time, it can be left blank and set dynamically at runtime in the entry file using the [free variable](http://stackoverflow.com/questions/12934929/what-are-free-variables) `__webpack_public_path__`.
0 commit comments