Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Webpack 4 universal library target

Tags:

According to the Webpack 4 documentation, if I specify libraryTarget: 'umd' it should result in the following output:

(function webpackUniversalModuleDefinition(root, factory) {   if(typeof exports === 'object' && typeof module === 'object')     module.exports = factory();   else if(typeof define === 'function' && define.amd)     define([], factory);   else if(typeof exports === 'object')     exports["MyLibrary"] = factory();   else     root["MyLibrary"] = factory(); })(typeof self !== 'undefined' ? self : this, function() {   return _entry_return_; }); 

However, what I get is:

(function webpackUniversalModuleDefinition(root, factory) {     if(typeof exports === 'object' && typeof module === 'object')         module.exports = factory();     else if(typeof define === 'function' && define.amd)         define("lib", [], factory);     else if(typeof exports === 'object')         exports["lib"] = factory();     else         root["lib"] = factory(); })(window, function() { return 

To be more precise, instead of this
(typeof self !== 'undefined' ? self : this, function()
I get this:
(window, function()

This (obviously) causes runtime error window is undefined when importing in node environment.

To be clear:
I know that window doesn't exist in node applications. My question is not about this, but rather about webpack.

Is it a bug or am I missing something?

My output config:

output: {     path: resolve(__dirname, 'umd'),     filename: 'lib.js',     libraryTarget: 'umd',     library: 'lib',     umdNamedDefine: true, }, 
like image 214
JeB Avatar asked Mar 05 '18 13:03

JeB


People also ask

What is library target in webpack?

This is according to their documentation: "libraryTarget: "umd" - This exposes your library under all the module definitions, allowing it to work with CommonJS, AMD and as global variable." Also, I built the exact same code with Webpack 3 and it produced a proper bundle.

What is the webpack default build target?

Webpack uses the web target by default. The target is ideal for a web application like the one you have developed in this book. Webpack bootstraps the application and loads its modules. The initial list of modules to load is maintained in a manifest, and then the modules can load each other as defined.

Does webpack use CommonJS?

Webpack supports the following module types natively: ECMAScript modules. CommonJS modules.

What is chunkFilename webpack?

So the filename is used for generating independent entry bundles, while chunkFilename is used for bundles that are auto-generated by Webpack during code splitting.


1 Answers

This would be a bug in Webpack 4.
Webpack 3 produces a proper bundle.

This issue should be fixed with this feature, until it's done the suggested workaround is using globalObject:

output: {     path: resolve(__dirname, 'umd'),     filename: 'lib.js',     libraryTarget: 'umd',     library: 'lib',     umdNamedDefine: true,     globalObject: `(typeof self !== 'undefined' ? self : this)` }, 
like image 68
JeB Avatar answered Sep 25 '22 10:09

JeB