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: content/configuration/output.md
+120-8Lines changed: 120 additions & 8 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -216,23 +216,135 @@ Note that `output.libraryTarget` defaults to `var`. This means if only `output.l
216
216
217
217
`string`
218
218
219
-
Read the [library guide](/guides/author-libraries) for details.
219
+
> Default: `"var"`
220
+
221
+
Read the [library guide](/how-to/author-libraries) for details.
222
+
223
+
Configure how the library will be exposed. Any one of the following options can be used.
224
+
225
+
> To give your library a name, set the `output.library` config to it (the examples assume `library: "MyLibrary"`)
226
+
227
+
The following options are supported:
228
+
229
+
230
+
`libraryTarget: "var"` - (default) When your library is loaded, the **return value of your entry point** will be assigned to a variable:
231
+
232
+
```javascript
233
+
var MyLibrary = _entry_return_;
234
+
235
+
// your users will use your library like:
236
+
MyLibrary.doSomething();
237
+
```
238
+
(Not specifying a `output.library` will cancel this var configuration)
239
+
220
240
221
-
Configure how the library will be exposed. Any one of the following options can be used: (the examples assume `library: "MyLibrary"`)
241
+
`libraryTarget: "this"` - When your library is loaded, the **return value of your entry point** will be assigned to this, the meaning of `this` is up to you:
222
242
223
-
`libraryTarget: "amd"` - Expose it using [Asynchronous Module Definition](http://davidbcalhoun.com/2014/what-is-amd-commonjs-and-umd/) (AMD)
243
+
```javascript
244
+
this["MyLibrary"] = _entry_return_;
245
+
246
+
// your users will use your library like:
247
+
this.MyLibrary.doSomething();
248
+
MyLibrary.doSomething(); //if this is window
249
+
```
250
+
251
+
252
+
`libraryTarget: "commonjs"` - When your library is loaded, the return value of your entry point will be part of the exports object. As the name implies, this is used in commonjs environments:
253
+
254
+
```javascript
255
+
exports["MyLibrary"] = _entry_return_;
256
+
257
+
//your users will use your library like:
258
+
require("MyLibrary").doSomething();
259
+
```
260
+
261
+
`libraryTarget: "commonjs2"` - When your library is loaded, the return value of your entry point will be part of the exports object. As the name implies, this is used in commonjs environments:
262
+
263
+
```javascript
264
+
module.exports= _entry_return_;
265
+
266
+
//your users will use your library like:
267
+
require("MyLibrary").doSomething();
268
+
```
224
269
225
-
`libraryTarget: "commonjs"` - Expose it using the `exports` object (i.e. `exports["MyLibrary"] = ...`)
270
+
_Wondering the difference between commonjs and commonjs2? Check [this](https://github.com/webpack/webpack/issues/1114) out (they are pretty much the same)._
226
271
227
-
`libraryTarget: "commonjs2"` - Expose it using the `module.exports` object (`output.library` is ignored)
228
272
229
273
`libraryTarget: "commonjs-module"` - Expose it using the `module.exports` object (`output.library` is ignored), `__esModule` is defined (it's threaded as ES2015 Module in interop mode)
230
274
231
-
`libraryTarget: "this"` - Expose it as a property of `this` (i.e. `this["MyLibrary"] = ...`)
232
275
233
-
`libraryTarget: "umd"` - Expose it using [Universal Module Definition](http://davidbcalhoun.com/2014/what-is-amd-commonjs-and-umd/) (UMD)
276
+
`libraryTarget: "amd"` - In this case webpack will make your library an AMD module.
277
+
278
+
But there is a very important pre-requisite, your entry chunk must be defined with the define property, if not, webpack wil create the AMD module, but without dependencies.
279
+
The output will be something like this:
280
+
281
+
```javascript
282
+
define([], function() {
283
+
//what this module returns is what your entry chunk returns
284
+
});
285
+
```
286
+
But if you download this script, first you may get a error: `define is not defined`, it’s ok!
287
+
If you are distributing your library with AMD, then your users need to use RequireJS to load it.
288
+
289
+
Now that you have requirejs loaded, you can load your library.
290
+
291
+
But, `require([ _what?_ ])`?
292
+
293
+
`output.library`!
294
+
295
+
```javascript
296
+
output: {
297
+
name:"MyLibrary",
298
+
libraryTarget:"amd"
299
+
}
300
+
```
301
+
302
+
So your module will be like:
303
+
304
+
```javascript
305
+
define("MyLibrary", [], function() {
306
+
//what this module returns is what your entry chunk returns
307
+
});
308
+
```
309
+
310
+
And you can use it like this:
311
+
312
+
```javascript
313
+
// And then your users will be able to do:
314
+
require(["MyLibrary"], function(MyLibrary){
315
+
MyLibrary.doSomething();
316
+
});
317
+
```
318
+
319
+
`libraryTarget: "umd"` - This is a way for your library to work with all module definitions (and where aren't modules at all). It will work with CommonJS, amd AMD as global variable.
320
+
Here to name your module you need the another property:
0 commit comments