Skip to content

Commit f581f32

Browse files
committed
Changes to output.libraryTarget
1 parent 054aa7a commit f581f32

File tree

1 file changed

+120
-8
lines changed

1 file changed

+120
-8
lines changed

content/configuration/output.md

Lines changed: 120 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -216,23 +216,135 @@ Note that `output.libraryTarget` defaults to `var`. This means if only `output.l
216216

217217
`string`
218218

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+
220240

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

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+
```
224269

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)._
226271

227-
`libraryTarget: "commonjs2"` - Expose it using the `module.exports` object (`output.library` is ignored)
228272

229273
`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)
230274

231-
`libraryTarget: "this"` - Expose it as a property of `this` (i.e. `this["MyLibrary"] = ...`)
232275

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:
321+
322+
```javascript
323+
output: {
324+
name: "MyLibrary",
325+
libraryTarget: "umd",
326+
umdNamedDefine: true
327+
}
328+
```
329+
330+
And finally the output is:
331+
```javascript
332+
(function webpackUniversalModuleDefinition(root, factory) {
333+
if(typeof exports === 'object' && typeof module === 'object')
334+
module.exports = factory();
335+
else if(typeof define === 'function' && define.amd)
336+
define("MyLibrary", [], factory);
337+
else if(typeof exports === 'object')
338+
exports["MyLibrary"] = factory();
339+
else
340+
root["MyLibrary"] = factory();
341+
})(this, function() {
342+
//what this module returns is what your entry chunk returns
343+
});
344+
```
345+
346+
Module proof library.
234347

235-
`libraryTarget: "var"` - Expose it as a variable (i.e. `var MyLibrary = ...`)
236348

237349
## `output.path`
238350

0 commit comments

Comments
 (0)