Talking about the principle of webpack packing

Talking about the modularization mechanism of webpack packing principle

Webpack does not force you to use some kind of modular scheme, but it allows you to access projects without pain by compatible with all modular schemes. With the Webpack, you can choose your preferred modular solution, as to how to deal with the dependencies between the modules and how to pack on demand, Webpack will help you handle it well.

For some of the modular content, you can look at my previous article: JS's modular process

Core idea:

1. All Modules :
   Just as a JS file can be a module, other files (such as CSS, image, or HTML) are also visible as modules. Therefore, you can also require (' myjsfile.js ') and require (' mycssfile.css '). This means that we can divide things (business) into smaller, manageable pieces to achieve the purpose of recycling.
2. load on Demand :
   The Traditional modular packaging tool (module bundlers) eventually compiles all the modules to generate a large bundle.js file. But in the real app, the "bundle.js" file may have a size of 10M to 15M that could cause the app to be in the loaded state. So Webpack uses many features to split the code and generate multiple "bundle" files, and asynchronously loads part of the code to implement on-demand loading.

File Management

• Each file is a resource, you can import JS with Require/import
• Each portal file packs all the resources that it relies on (that is, require), and a resource is quoted more than once.
• In the case of multiple portals, it is the case that each entry is independently independent of each other (available Commonschunkplugin optimized)

Packaging principle

Package all dependencies into a single bundle.js file, split the code into unit fragments and load as needed.

, Entry.js is a portal file, called Util1.js and Util2.js, and Util1.js calls Util2.js.

Examples of bundle.js after packing

/******/ ([/*0*/     //Module ID/***/ function(module, exports, __webpack_require__) {__webpack_require__ (1);//require resource file ID__WEBPACK_REQUIRE__ (2);/***/ },/*1*//***/ function(module, exports, __webpack_require__) {//util1.js File__WEBPACK_REQUIRE__ (2); varUtil1=1; Exports.util1=Util1;/***/ },/*2*//***/ function(module, exports) {//util2.js File    varUtil2=1; Exports.util2=Util2;/***/ }....../******/]);

1. Bundle.js is a module ID notation, through the function of each file dependent encapsulation to achieve the segmentation effect, such as the code ID 0 indicates the entry module needs to rely on, 1 means the Util1 module needs to rely on
2. The Require resource file ID represents the individual modules that the file needs to load, such as the above code _webpack_require__(1) representing the Util1.js module, which __webpack_require__(2) represents the Util2.js module
3. exports.util1=util1Modular embodiment, the output of the module

Talking about the principle of webpack packing