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, },
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.
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.
Webpack supports the following module types natively: ECMAScript modules. CommonJS modules.
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.
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)` },
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With