merge

The code of individual modules in webPack modularity does not pollute the whole world

Webpack combines all modules that need to be loaded into a JS file through the entry file when packaging, and puts the code of each module into functions, so as to solve the global code pollution in modularization by means of function scope.

// a.js
console.log('module a');
module.exports.a = '123'
console.log(this); // module.export
Copy the code
// entry file index.js console.log('index module'); var { a } = require('./a'); console.log(a);Copy the code

For the module generated after the merge, key is the path of the module, value is a function, and the code of the module is in the function

// module
{
    './src/index.js': function (module, exports, require) {
        console.log('index module');
        var { a } = require('./a');
        console.log(a);
    },
    './src/a.js': function (module, exports, require) {
        console.log('module a');
        module.exports.a = 'a';
        console.log(this); // module.export
    },
}
Copy the code

perform

Webpack will execute the code in an immediate function (to avoid global contamination), overriding the require function =__webpack_require.

The code first executes the __webpack_require function that loads the entry file, which is equivalent to running a module and getting the exported result of the module. All parameters required by the function are pre-defined variables and functions. Finally, the exported data of the module is returned, and the returned module data will be returned to the position where require is executed.

Function (modules) {// __webpack_require runs a module and gets the exported result of the module. function __webpack_require(moduleId) { var func = modules[moduleId]; Var module = {exports: {}}; func.call(module.exports, module, module.exports, __webpack_require); return module.exports; } __webpack_require('./src/index.js'); // the __webpack_require function is equivalent to running a module and getting the exported result of the module. })({ './src/index.js': function (module, exports, require) { console.log('index module'); var { a } = require('./src/a.js'); // {a: 'a'} this calls __webpack_require and returns console.log(a); }, './src/a.js': function (module, exports, require) { console.log('module a'); module.exports.a = 'a'; console.log(this); // module.export }, });Copy the code

The cache

Webpack will only load one side of the same module and will not be repeatedly loaded and executed, so it needs to cache loaded modules

ModuleExports is used to cache exported data of loaded modules. If the current module is loaded, it returns the exported data of the current module. Otherwise, the execution continues and the exported data of the module is cached after execution

Function (modules) {var moduleExports = {}; // The __webpack_require function is equivalent to running a module and getting the exported result of the module. function __webpack_require(moduleId) { if(moduleExports[moduleId]) { return moduleExports[moduleId]; } var func = modules[moduleId]; Var module = {exports: {}}; func.call(module.exports, module, module.exports, __webpack_require); moduleExports[moduleId] = module.exports; return module.exports; } __webpack_require('./src/index.js'); // the __webpack_require function is equivalent to running a module and getting the exported result of the module. })({ './src/index.js': function (module, exports, require) { console.log('index module'); var { a } = require('./src/a.js'); console.log(a); }, './src/a.js': function (module, exports, require) { console.log('module a'); module.exports.a = 'a'; console.log(this); // module.export }, });Copy the code