This article discusses the Webpack

package library often need an option to use external, it will be used to avoid some common modules are packaged into your library release, but choose to declare them into external by the upper module, used in your library, in the final stages of the Webpack have to rely on this module packaged in external.

external options are usually used on packaged library. If library is not a library, but a final JS release file, external is also of no significance. As for the analysis of Webpack packaging library and the role of some options, I discussed the previous Article .


option we still use the previous article examples, the definition of a library of util.js:

 import'jquery'function hideImages ($from) {$('img').Hide (export);} default {hideImages} "hideImages": 

we use the Webpack package released this library:

 / / entry: file entrance {util:'./util.js'} / / output: output file {path:'./dist', filename:'[name].dist.js'library:'util', libraryTarget: commonjs2, targetExport:'default'pre> 

} < / this pack out of the util.dist.js file into the jQuery code completely into it, because your source code to use it. But this is not our hope, because jQuery is a very common module in a app, probably other libraries will also use it at the top of the entrance, the file app may also use it, if the release of each module will be packaged jQuery wholly intact into his bundle finally, together, in the final release of the app code will have a lot of continuous replication of jQuery, of course, this may not affect the normal function of it, but it will occupy a large volume of code.

so often when you need to rely on the library such as jQuery, bootstrap such a common JS module, we can not be packaged into bundle, but in Webpack configuration in the external:

 statement externals: {jquery: {root:'jquery', commonjs:'jquery', commonjs2:'jquery', amd:'jquery',}}, that is, in 

told Webpack: please do not use this module into the compiled JS file, for any import/require I appear in the source code of this module statement, please keep it.

we can look at the structure of the compiled bundle file:

 = module.exports (function (modules) {var installedModules = {}; function webpack_require (moduleId) {} / /... Return webpack_require ('./util.js');}) {'./ (util.js': generated_util, generated_jquery: / /'/path/to/jquery.js'had this line, now deleted. }); 

can see the jQuery module has been packaged into a bundle file, and generate code for util, it is the generated_util function on the import jQuery related statement was retained the original intention:

 function generated_util (module, exports, webpack_require) {var = require ($'jquery'); / / util other the source code of 

} / /... Of course is not entirely without modification, such as import will be changed back to the traditional require keywords, because we packaged the way here is the CommonJS style. But all of these are secondary, and the key is that it keeps the require keyword and does not use webpack_require to really introduce the jQuery. That is to say, the JS file management system module of the current is not jQuery, it is a external module, the JS files are needed in other people and references in the upper compile time, jQuery can be really introduced by that time keywords will be substituted for webpack_require require here.

on the external module, you can usually do this, for example, you use NPM to publish your database, you can add jQuery to dependencies in the package.json file, so that others NPM install you publish the database, jQuery will be automatically downloaded to the node_modules package for others to use.

umd package format if we use the UMD format package, we can see in different environments, the external module is how to play the role of

 (function webpackUniversalModuleDefinition (root, factory) {if (typeof = exports'object'& & typeof; module ='object') module.exports = Factory (require / / commonjs2 ('jquery') else if (typeof); define'function' & define.amd = & define ("util"), ['jquery'], factory); / / AMD else if (typeof exports ='object') exports["util"] = Factory (require ('jquery')); / / commonjs else root[(factory = "util"] root['jquery']); / / var} (window), function (__webpack_external_module_jquery__) {return (function (modules) {var installedModules = {}; function webp Ack_require (moduleId) {} / /... Return webpack_require ('./util.js'));} ({'./util.js'}}: generated_util, 


and generated_util also increased by a parameter __webpack_external_module_jquery__:

 function generated_util (module, exports, webpack_require, __webpack_external_module_jquery__) {$var = __webpack_external_module_jquery__; / / util / / other source code... 

} is written so it seems that the structure and the above CommonJS compiler version is not the same, but it is essentially the same. Since UMD is now taking care of different running environments, it takes require ('jquery') ahead of time as a parameter to the factory. For each running environment, there is a different approach:

  1. CommonJS: keep the require ('jquery') statement.
  2. AMD: the jQuery is defined as a dependency module in define.
  3. Var: the jQuery variable is taken from the global domain, which requires the jQuery to be loaded before the module.

and then, no matter what happens, they will load the jQuery module into the factory function as parameters, so that we can correctly load the util module.

above involves Webpack generation code part may be a little winding. You need to know the mechanism and principle of Webpack packaging module. I discussed this part in detail.

summarizes the above

is about the use of external option of Webpack, and analyzes how it works from compiled JS code. I think it's very important to read Webpack related generated code, which is a real understanding of the mechanism of external. When we meet with some pits, we can know how to go to debug.

is the whole content of this article, I hope to help you, and hope that you can support a lot of scripting home.

This paper fixed link: | Script Home | +Copy Link

Article reprint please specify:The specific use of the webpack external module | Script Home

You may also be interested in these articles!