Skip to content

Commit 4d82b1c

Browse files
committed
docs(config): improve formatting and add note about library entry points in output.md
1 parent 5ff8058 commit 4d82b1c

File tree

1 file changed

+28
-29
lines changed

1 file changed

+28
-29
lines changed

src/content/configuration/output.md

Lines changed: 28 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -295,14 +295,16 @@ If using the [`output.library`](#output-library) option, the library name is aut
295295

296296
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:
297297

298-
```javascript
298+
``` js
299299
output: {
300300
library: "MyLibrary"
301301
}
302302
```
303303

304304
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.
305305

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+
306308
T> Read the [authoring libraries guide](/guides/author-libraries) guide for more information on `output.library` as well as `output.libraryTarget`.
307309

308310

@@ -312,41 +314,38 @@ T> Read the [authoring libraries guide](/guides/author-libraries) guide for more
312314

313315
> Default: `_entry_return_`
314316
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.
320318

321319
The following configurations are supported:
322320

323321
`libraryExport: "default"` - The **default export of your entry point** will be assigned to the library target:
324322

325-
```javascript
323+
``` js
326324
// if your entry has a default export of `MyDefaultModule`
327325
var MyDefaultModule = _entry_return_.default;
328326
```
329327

330328
`libraryExport: "MyModule"` - The **specified module** will be assigned to the library target:
331329

332-
```javascript
330+
``` js
333331
var MyModule = _entry_return_.MyModule;
334332
```
335333

336334
`libraryExport: ["MyModule", "MySubModule"]` - The array is interpreted as a **path to a module** to be assigned to the library target:
337335

338-
```javascript
336+
``` js
339337
var MySubModule = _entry_return_.MyModule.MySubModule;
340338
```
341339

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:
343341

344-
```javascript
342+
``` js
345343
MyDefaultModule.doSomething();
346344
MyModule.doSomething();
347345
MySubModule.doSomething();
348346
```
349347

348+
350349
## `output.libraryTarget`
351350

352351
`string`
@@ -363,7 +362,7 @@ These options assign the return value of the entry point (e.g. whatever the entr
363362

364363
`libraryTarget: "var"` - (default) When your library is loaded, the **return value of your entry point** will be assigned to a variable:
365364

366-
```javascript
365+
``` js
367366
var MyLibrary = _entry_return_;
368367

369368
// In a separate script...
@@ -375,7 +374,7 @@ W> When using this option, an empty `output.library` will result in no assignmen
375374

376375
`libraryTarget: "assign"` - This will generate an implied global which has the potential to reassign an existing value (use with caution).
377376

378-
``` javascript
377+
``` js
379378
MyLibrary = _entry_return_;
380379
```
381380

@@ -390,15 +389,15 @@ These options assign the return value of the entry point (e.g. whatever the entr
390389

391390
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:
392391

393-
```javascript
392+
``` js
394393
(function(e, a) { for(var i in a) e[i] = a[i]; }(${output.libraryTarget}, _entry_return_)
395394
```
396395
397396
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.
398397
399398
`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:
400399
401-
```javascript
400+
``` js
402401
this["MyLibrary"] = _entry_return_;
403402

404403
// In a separate script...
@@ -408,7 +407,7 @@ MyLibrary.doSomething(); // if this is window
408407
409408
`libraryTarget: "window"` - The **return value of your entry point** will be assigned to the `window` object using the `output.library` value.
410409
411-
```javascript
410+
``` js
412411
window["MyLibrary"] = _entry_return_;
413412

414413
window.MyLibrary.doSomething();
@@ -417,7 +416,7 @@ window.MyLibrary.doSomething();
417416
418417
`libraryTarget: "global"` - The **return value of your entry point** will be assigned to the `global` object using the `output.library` value.
419418
420-
```javascript
419+
``` js
421420
global["MyLibrary"] = _entry_return_;
422421

423422
global.MyLibrary.doSomething();
@@ -426,7 +425,7 @@ global.MyLibrary.doSomething();
426425
427426
`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.
428427
429-
```javascript
428+
``` js
430429
exports["MyLibrary"] = _entry_return_;
431430

432431
require("MyLibrary").doSomething();
@@ -439,7 +438,7 @@ These options will result in a bundle that comes with a more complete header to
439438
440439
`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:
441440
442-
```javascript
441+
``` js
443442
module.exports = _entry_return_;
444443

445444
require("MyLibrary").doSomething();
@@ -456,7 +455,7 @@ AMD modules require that the entry chunk (e.g. the first script loaded by the `<
456455
457456
So, with the following configuration...
458457
459-
```javascript
458+
``` js
460459
output: {
461460
library: "MyLibrary",
462461
libraryTarget: "amd"
@@ -465,23 +464,23 @@ output: {
465464
466465
The generated output will be defined with the name "MyLibrary", i.e.
467466
468-
```javascript
467+
``` js
469468
define("MyLibrary", [], function() {
470469
// This module return value is what your entry chunk returns
471470
});
472471
```
473472
474473
The bundle can be included as part of a script tag, and the bundle can be invoked like so:
475474
476-
```javascript
475+
``` js
477476
require(['MyLibrary'], function(MyLibrary) {
478477
// Do something with the library...
479478
});
480479
```
481480
482481
If `output.library` is undefined, the following is generated instead.
483482
484-
```javascript
483+
``` js
485484
define([], function() {
486485
// This module returns is what your entry chunk returns
487486
});
@@ -494,7 +493,7 @@ This bundle will not work as expected, or not work at all (in the case of the al
494493
495494
In this case, you need the `library` property to name your module:
496495
497-
```javascript
496+
``` js
498497
output: {
499498
library: "MyLibrary",
500499
libraryTarget: "umd"
@@ -503,7 +502,7 @@ output: {
503502
504503
And finally the output is:
505504
506-
```javascript
505+
``` js
507506
(function webpackUniversalModuleDefinition(root, factory) {
508507
if(typeof exports === 'object' && typeof module === 'object')
509508
module.exports = factory();
@@ -520,15 +519,15 @@ And finally the output is:
520519
521520
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:
522521
523-
```javascript
522+
``` js
524523
output: {
525524
libraryTarget: "umd"
526525
}
527526
```
528527
529528
The output will be:
530529
531-
```javascript
530+
``` js
532531
(function webpackUniversalModuleDefinition(root, factory) {
533532
if(typeof exports === 'object' && typeof module === 'object')
534533
module.exports = factory();
@@ -545,7 +544,7 @@ The output will be:
545544
546545
Since webpack 3.1.0, you may specify an object for `library` for differing names per targets:
547546
548-
```javascript
547+
``` js
549548
output: {
550549
library: {
551550
root: "MyLibrary",
@@ -653,7 +652,7 @@ publicPath: "", // relative to HTML page (same directory)
653652
654653
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__`.
655654
656-
```javascript
655+
``` js
657656
__webpack_public_path__ = myRuntimePublicPath
658657

659658
// rest of your application entry

0 commit comments

Comments
 (0)