Webpack modular implementation exploration

preface

As we all know, browsers don’t recognize commonJS modules and ES6 modules. Converting the modules of these specifications into browser-aware statements is the most basic thing WebPack does. Webpack itself maintains a module system that is compatible with all the module specifications of the front-end history process, including AMD CommonJS ES6, etc. Of course Babel has the ability to transform ES6 modules (Parcel I don’t want to mention you), but webPack has an advantage over Babel because of its tree-shaking capabilities. Therefore, the Babel module function will be disabled in the general Babel configuration. ([” es2015, “{}” modules “: false]).

Commonjs specification

Project Structure:

1. App. Js (entry) :

var c = require('./c')
console.log(c)
Copy the code

2. SAN Antonio s (entry) :

let c1 = 'c1'
let c2 = 'c2'
module.exports = {
	c1,
	c2,
}
Copy the code

Packing results:

(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["app"] = factory();
	else
		root["app"] = factory(); })(typeof self ! = ='undefined' ? self : this, function() {
return  (function(modules) { // webpackBootstrap
 	// The module cache
 	var installedModules = {};

 	// The require function
 	function __webpack_require__(moduleId) {

 		// Check if module is in cache
 		if(installedModules[moduleId]) {
 			return installedModules[moduleId].exports;
 		}
 		// Create a new module (and put it into the cache)
 		var module = installedModules[moduleId] = {
 			i: moduleId,
 			l: false,
 			exports: {}
 		};

 		// Execute the module function
 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);

 		// Flag the module as loaded
 		module.l = true;

 		// Return the exports of the module
 		return module.exports;
 	}


 	// expose the modules object (__webpack_modules__)
 	__webpack_require__.m = modules;

 	// expose the module cache
 	__webpack_require__.c = installedModules;

 	// define getter function for harmony exports
 	__webpack_require__.d = function(exports, name, getter) {
 		if(! __webpack_require__.o(exports, name)) { Object.defineProperty(exports, name, { configurable:false,
 				enumerable: true, get: getter }); }}; // getDefaultExportfunction for compatibility with non-harmony modules
 	__webpack_require__.n = function(module) {
 		var getter = module && module.__esModule ?
 			function getDefault() { return module['default']; } :
 			function getModuleExports() { return module; };
 		__webpack_require__.d(getter, 'a', getter);
 		return getter;
 	};

 	// Object.prototype.hasOwnProperty.call
 	__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };

 	// __webpack_public_path__
 	__webpack_require__.p = "";

 	// Load entry module and return exports
 	return__webpack_require__(__webpack_require__.s = 0); }) / * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * / ([/ * * / 0 (function(module, exports, __webpack_require__) {

module.exports = __webpack_require__(1);


 }),
/* 1 */
 (function(module, exports, __webpack_require__) {

"use strict";

var c = __webpack_require__(2);
console.log(c);

module.exports = {
	a: 'I'm a'
};

 }),
/* 2 */
 (function(module, exports) {

var c1 = 'c1';
var c2 = 'c2'; module.exports = { c1: c1, c2: c2 }; })]); });Copy the code

Resolution:

What the package produces is an immediate function, which is simply written as

(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["app"] = factory();
	else
		root["app"] = factory(); })(typeof self ! = ='undefined' ? self : this, function() {parsed module part})Copy the code

Can see the module part being introduced into webpackUniversalModuleDefinition factory parameters, if detection to the module. The exports is defined, then the modules are assigned to the module. Exports; If the module system of AMD is defined, assign a value to the module system of define. Finally, if none of the above modules are detected by the system, assign a global variable defined by webpack.output.library. The browser can retrieve the parsed module from window.app.

Let’s look at the module parsing section

The factory:

function() {return (function(modules){parse module methods})([function() 1} {module,function() 1} {module,... ] )}Copy the code

The factory method returns the value exposed by webPack Entry’s js: app.js.

Methods of parsing modules:

var installedModules = {};
function __webpack_require__(moduleId) {
	if(installedModules[moduleId]) {
		return installedModules[moduleId].exports;
	}
	var module = installedModules[moduleId] = {
		i: moduleId,
		l: false,
		exports: {}
	};
	modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
	module.l = true;
	return module.exports;
}
__webpack_require__.m = modules;
__webpack_require__.c = installedModules;
__webpack_require__.d = function(exports, name, getter) {
	if(! __webpack_require__.o(exports, name)) { Object.defineProperty(exports, name, { configurable:false,
			enumerable: true, get: getter }); }}; __webpack_require__.n =function(module) {
	var getter = module && module.__esModule ?
		function getDefault() { return module['default']; } :
		function getModuleExports() { return module; };
	__webpack_require__.d(getter, 'a', getter);
	return getter;
};
__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
__webpack_require__.p = "";
return __webpack_require__(__webpack_require__.s = 0);
Copy the code

1. InstalledModules is defined, which is used to cache loaded modules.

2. __webpack_require__ is defined as the module ID. This function is used to implement the module require.

3. The webpack_require function first checks if the loaded module is cached and returns the exports of the cached module if so.

4. If there is no cache, that is, the first load, the module is initialized first and cached. Initialize – >

   {
   	i: moduleId,
   	l: false,
   	exports: {}
   }
   Copy the code

5. We then call the module function, which webpack used to wrap our module, passing module, module.exports, and __webpack_require__ as arguments. Note that there is a dynamic binding that binds the calling object of module functions to module.exports. This ensures that this in the module refers to the current module.

6. When the call is complete, the module is marked as loaded.

7. Returns the contents of module exports.

8. Require the 0th module, the entry module, using the __webpack_require__ function defined earlier.

https://segmentfault.com/a/1190000010349749

Now look at module 0

function(module, exports, __webpack_require__) {
    module.exports = __webpack_require__(1);
}
Copy the code

Expoprts = webpack_require(1)

installedModules[0] = {i: 1, l: true, exports: __webpack_require__(1)}
Copy the code

Now look at module number 1

function(module, exports, __webpack_require__) {
    "use strict";
    var c = __webpack_require__(2);
    console.log(c);
    module.exports = {
    	a: 'I'm a'}}Copy the code

Module. exports = {a: ‘I am a’}

installedModules[1] = {i: 1, l: true, exports: {a:'I'm a'}}
Copy the code

Now look at module number 2

function(module, exports) {
    var c1 = 'c1';
    var c2 = 'c2';
    module.exports = {
    	c1: c1,
    	c2: c2
    };
}
Copy the code

Let module.exports = {c1: ‘c1’,c2: ‘c2’}, because module 2 does not require other modules and therefore does not receive __webpack_require__. At this time:

installedModules[2] = {i: 2, l: true, exports: {c1: 'c1',c2: 'c2'}}
Copy the code

End, now the result of installedModules is

{
    0: {i: 0, l: true, exports: {a:'I'm a'}}
    1: {i: 1, l: true, exports: {a:'I'm a'}}
    2: {i: 2, l: true, exports: {c1: 'c1',c2: 'c2'}}}Copy the code

The factory function returns __webpack_require__(__webpack_require__ = 0);

So the entry module: app.js returns {a:’ I am a’}, while window.app = {a:’ I am a’}

Conclusion: Webpack implements commonJS require using a custom __webpack_require__ function and holds the module output of module.exports using the installedModules variable. Complete the conversion of commonJS module.

Webpack modularity principle – CommonJS

es6 module

Project Structure:

1. App. Js (entry) :

import c,{c1,c2} from './c';

console.log(c,c1,c2)

export default 'I'm a';
export let a = 'I am aa';
Copy the code

2. SAN Antonio s:

import b from './b'
console.log(b)

export let c1 = 'I am c111'
export let c2 = 'I am c222'

export default 'I'm a c';
Copy the code

3. b.js:

export default 'bbb';
Copy the code

Packing results:

Basically the same as the CommonJS part, except the module part resolves differently

Module 0 is the same as above. Let’s look at module 1 (app.js)

function(module, __webpack_exports__, __webpack_require__) {
    "use strict";
    Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
    __webpack_require__.d(__webpack_exports__, "aaaa".function() { return aaaa; });
    var __WEBPACK_IMPORTED_MODULE_0__c__ = __webpack_require__(2);

    console.log(__WEBPACK_IMPORTED_MODULE_0__c__["c" /* default */], __WEBPACK_IMPORTED_MODULE_0__c__["a" /* c1 */], __WEBPACK_IMPORTED_MODULE_0__c__["b" /* c2 */]);

    __webpack_exports__["default"] = ('I'm a');
    var aaaa = 'I am the aaaa;
Copy the code

Conclusion:

1. Because app.js is an ES6 module, Webpack adds an __esModule attribute (true) to the module.

2. Because the ES6 module has the export default function, webpack assigns the default property exposed by this module to the module.exports default property.

3. Note: the export default value of the module is converted to the default property of module.exports only if the module is an import module and an ES6 module.

4. D (__webpack_exports__, “aaaa”, function() {return aaaa; }); , it can be found that the variable name aaaa exposed by export is output by the original.

5. The import statement is changed to var __WEBPACK_IMPORTED_MODULE_0__c__ = __webpack_require__(2); The import c,{c1,c2} statement is not handled by webpack, but directly receives the EXPORTS object of the C module through the new __WEBPACK_IMPORTED_MODULE_0__c__ variable. __WEBPACK_IMPORTED_MODULE_0__c__ is used wherever C,c1, and c2 are used.

At this time:

installedModules[1] = {
    i: 1,
    l: true,
    exports: {
        default:'I'm a',
        aaaa:"I am aaaa",
        __esModule:true}}Copy the code

Look again at module 2(C.js) :

function(module, __webpack_exports__, __webpack_require__) {
    "use strict";
    __webpack_require__.d(__webpack_exports__, "a".function() { return c1; });
    __webpack_require__.d(__webpack_exports__, "b".function() { return c2; });
    var __WEBPACK_IMPORTED_MODULE_0__b__ = __webpack_require__(3);

    console.log(__WEBPACK_IMPORTED_MODULE_0__b__["a" /* default */]);

    var c1 = 'I am c111';
    var c2 = 'I am c222';

    __webpack_exports__["c"] = ('I'm a c');
}
Copy the code

Conclusion:

1. D (__webpack_exports__, “a”, function() {return c1; }); , it can be found that different from the imported ES6 module: the variable name exposed by export has been randomly changed. Default is converted to C, C1 to A, and c2 to B. So when the entry module (app.js) imports this module and uses the default,c1,c2 attributes, the corresponding ones are changed by Webpack to C, A, B (see where module 1 calls).

2. In contrast to the entry module, the export default of this module is converted to __webpack_exports__[” C “] = (‘ I am C ‘); Instead of being converted to a default attribute, it is also converted to a random attribute name.

At this time:

installedModules[2] = {
    i: 2,
    l: true,
    exports: {
        a:"I am c111",
        b:"I am c222",
        c: "I'm a c"}}Copy the code

Let’s look at module 3

function(module, __webpack_exports__, __webpack_require__) {
    "use strict";
    __webpack_exports__["a"] = ('bbb');
}
Copy the code

Conclusion:

Export default of module 3 is converted to __webpack_exports__[“a”] = (‘ BBB ‘); Default is randomly changed to a and then called to the same place using the value [‘a’].

In conclusion, installedModules:

{
    0: {i: 0, l: true, exports: {a:'I'm a',_esModule:true}}
    1: {i: 1, l: true, exports: {a:'I'm a',_esModule:true}}
    2: {i: 2, l: true, exports: {a:"I am c111", b:"I am c222",c: "I'm a c"}}
    3: {i: 3, l: true, exports: {a:"bbb"}}}Copy the code

Conclusion:

1. If the entry module is an ES6 module, an __esModule will be added, with a value of true, indicating that it is an ES module. Other ES6 modules referenced by the imported ES6 module will not have an __esModule attribute added.

2. When the ES6 module is used as an entry module, the default attribute and other attribute names exported are retained as they are. The default attribute is passed through __webpack_exports__[“default”] =… __webpack_require__.d(__webpack_exports__, “aaaa”, function() {return aaaa; }); Method export.

3. When the ES6 module is referenced by other ES6 modules instead of an entry module, the default attribute and other attribute names exported by the export module are randomly assigned with new attribute names, for example, export default ‘I am C’. __webpack_exports__[“c”] = (‘ I am C ‘); . The default attribute is also passed __webpack_exports__[“c”] =… __webpack_require__.d(__webpack_exports__, “b”, function() {return c2; }); Is exported.

4. The import syntax of the ES6 module is converted to var __WEBPACK_IMPORTED_MODULE_0__b__ = __webpack_require__(3); .

Commonjs modules are mixed with ES6 modules

Scenario 1: ES6 references CommonJS

Project Structure:

1. App. Js (entry) :

import c,{c1,c2} from './c';
console.log(c,c1,c2)

export default 'I'm a';
export let aaaa = 'I am the aaaa;
Copy the code

2. SAN Antonio s:

let c1 = 'c1'
let c2 = 'c2'
module.exports = {
	c1,
	c2,
}
Copy the code

Packing results:

(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["app"] = factory();
	else
		root["app"] = factory(); })(typeof self ! = ='undefined' ? self : this, function() {
return  (function(modules) { // webpackBootstrap
 	var installedModules = {};
 	function __webpack_require__(moduleId) {
 		if(installedModules[moduleId]) {
 			return installedModules[moduleId].exports;
 		}
 		var module = installedModules[moduleId] = {
 			i: moduleId,
 			l: false,
 			exports: {}
 		};
 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
 		module.l = true;
 		return module.exports;
 	}
 	__webpack_require__.m = modules;
 	__webpack_require__.c = installedModules;
 	__webpack_require__.d = function(exports, name, getter) {
 		if(! __webpack_require__.o(exports, name)) { Object.defineProperty(exports, name, { configurable:false,
 				enumerable: true, get: getter }); }}; __webpack_require__.n =function(module) {
 		var getter = module && module.__esModule ?
 			function getDefault() { return module['default']; } :
 			function getModuleExports() { return module; };
 		__webpack_require__.d(getter, 'a', getter);
 		return getter;
 	};
 	__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
 	__webpack_require__.p = "";
 	return__webpack_require__(__webpack_require__.s = 0); }) / * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * / ([0 * / / / * * * * /function(module, exports, __webpack_require__) { module.exports = __webpack_require__(1); /***/}), /* 1 */ /***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "aaaa".function() { return aaaa; });
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__c__ = __webpack_require__(2);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__c___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0__c__);



console.log(__WEBPACK_IMPORTED_MODULE_0__c___default.a, __WEBPACK_IMPORTED_MODULE_0__c__["c1"], __WEBPACK_IMPORTED_MODULE_0__c__["c2"]);

/* harmony default export */ __webpack_exports__["default"] = ('I'm a');
var aaaa = 'I am the aaaa; /***/}), /* 2 */ /***/ (function(module, exports) {

var c1 = 'c1';
var c2 = 'c2'; module.exports = { c1: c1, c2: c2 }; / /}) / * * * * * * * * * /]); });Copy the code

The entry module (app.js) is the ES6 module and the referenced module (c.js) is the CommonJS module.

Module 0 remains unchanged. See how module 1(app.js) is packaged

function(module, __webpack_exports__, __webpack_require__) {
    "use strict";
    Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
    __webpack_require__.d(__webpack_exports__, "aaaa".function() { return aaaa; });
    var __WEBPACK_IMPORTED_MODULE_0__c__ = __webpack_require__(2);
    var __WEBPACK_IMPORTED_MODULE_0__c___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0__c__);

    console.log(__WEBPACK_IMPORTED_MODULE_0__c___default.a, __WEBPACK_IMPORTED_MODULE_0__c__["c1"], __WEBPACK_IMPORTED_MODULE_0__c__["c2"]);

    __webpack_exports__["default"] = ('I'm a');
    var aaaa = 'I am the aaaa;
}
Copy the code

You can see that the packaging results have changed where module 1 references commonJS modules.

var __WEBPACK_IMPORTED_MODULE_0__c__ = __webpack_require__(2); Var __WEBPACK_IMPORTED_MODULE_0__c___default = is added to import ES6 module __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0__c__);Copy the code

When the reference module is found to be a commonJS module, __webpack_require__() is also called __webpack_require__.n,

__webpack_require__.n = function(module) {
	var getter = module && module.__esModule ?
		function getDefault() { return module['default']; } :
		function getModuleExports() { return module; };
	__webpack_require__.d(getter, 'a', getter);
	return getter;
};
Copy the code

The functions of this method are: If the module passed in is an ES6 module converted to CommonJS, that is, __esModule=true, the default attribute of the module is returned. If the module passed in originally was CommonJS, the module itself is returned with the a attribute of the module = the module itself. The result is that two variables, __WEBPACK_IMPORTED_MODULE_0__c__ and __WEBPACK_IMPORTED_MODULE_0__c___default, are generated.

__WEBPACK_IMPORTED_MODULE_0__c__={
	c1,
	c2,
}
__WEBPACK_IMPORTED_MODULE_0__c___default = function getModuleExports() {return module}
__WEBPACK_IMPORTED_MODULE_0__c___default.a = module
Copy the code

Conclusion:

1. Es6 modules reference commonJS modules because import name from ‘.. The commonJS module does not expose the default method, so Webpack prints the entire module as the value of the default attribute.

Look at module 2:

function(module, __webpack_exports__) {
    "use strict";
    var c1 = 'c1';
    var c2 = 'c2';
    module.exports = {
    	c1: c1,
    	c2: c2
    };
}
Copy the code

The same output

In conclusion:

1. Es6 calls the CommonJS module, and the case of import defaults is handled specially

2. Referenced CommonJS modules are output as is.

Scenario 2: CommonJS calls the ES6 module

Project Structure:

1. App. Js (entry) :

var b = require('./b')
var c = require('./c')
console.log(b.default)
console.log(c)
module.exports = {
	a:'I'm a'
}
Copy the code

2. SAN Antonio s:

import b from './b'
console.log(b)
export let c1 = 'I am c111'
export let c2 = 'I am c222'

export default 'I'm a c';
Copy the code

Packing results:

(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["app"] = factory();
	else
		root["app"] = factory(); })(typeof self ! = ='undefined' ? self : this, function() {
return  (function(modules) { // webpackBootstrap
 	// The module cache
 	var installedModules = {};

 	// The require function
 	function __webpack_require__(moduleId) {

 		// Check if module is in cache
 		if(installedModules[moduleId]) {
 			return installedModules[moduleId].exports;
 		}
 		// Create a new module (and put it into the cache)
 		var module = installedModules[moduleId] = {
 			i: moduleId,
 			l: false,
 			exports: {}
 		};

 		// Execute the module function
 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);

 		// Flag the module as loaded
 		module.l = true;

 		// Return the exports of the module
 		return module.exports;
 	}


 	// expose the modules object (__webpack_modules__)
 	__webpack_require__.m = modules;

 	// expose the module cache
 	__webpack_require__.c = installedModules;

 	// define getter function for harmony exports
 	__webpack_require__.d = function(exports, name, getter) {
 		if(! __webpack_require__.o(exports, name)) { Object.defineProperty(exports, name, { configurable:false,
 				enumerable: true, get: getter }); }}; // getDefaultExportfunction for compatibility with non-harmony modules
 	__webpack_require__.n = function(module) {
 		var getter = module && module.__esModule ?
 			function getDefault() { return module['default']; } :
 			function getModuleExports() { return module; };
 		__webpack_require__.d(getter, 'a', getter);
 		return getter;
 	};

 	// Object.prototype.hasOwnProperty.call
 	__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };

 	// __webpack_public_path__
 	__webpack_require__.p = "";

 	// Load entry module and return exports
 	return__webpack_require__(__webpack_require__.s = 0); }) / * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * / ([0 * / / / * * * * /function(module, exports, __webpack_require__) { module.exports = __webpack_require__(1); /***/}), /* 1 */ /***/ (function(module, exports, __webpack_require__) {

"use strict";

var b = __webpack_require__(2);
var c = __webpack_require__(3);
console.log(b.default);
console.log(c);
module.exports = {
	a: 'I'm a'}; /***/}), /* 2 */ /***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
__webpack_exports__["default"] = ('bbb'); /***/}), /* 3 */ /***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
 __webpack_require__.d(__webpack_exports__, "c1".function() { return c1; });
 __webpack_require__.d(__webpack_exports__, "c2".function() { return c2; });

var __WEBPACK_IMPORTED_MODULE_0__b__ = __webpack_require__(0);
console.log(__WEBPACK_IMPORTED_MODULE_0__b__["default"]);

var c1 = 'I am c111';
var c2 = 'I am c222'; / /}) / * * * * * * * * * /]); });Copy the code

The entry module (app.js) is the CommonJS module, and the referenced modules (B.js, C.js) are es6 modules.

Module 0 remains unchanged. See how module 1(app.js) is packaged

function(module, exports, __webpack_require__) {
    "use strict";
    var b = __webpack_require__(2);
    var c = __webpack_require__(3);
    console.log(b.default);
    console.log(c);
    module.exports = {
    	a: 'I'm a'}}Copy the code

The __webpack_require__ method is simply used instead of the require method

Look at module 2(B.js) and module 3(C.js)

b.js

function(module, __webpack_exports__, __webpack_require__) {
    "use strict";
    Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
    __webpack_exports__["default"] = ('bbb');
}
Copy the code

c.js

function(module, __webpack_exports__, __webpack_require__) {
    "use strict";
    Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
    __webpack_require__.d(__webpack_exports__, "c1".function() { return c1; });
    __webpack_require__.d(__webpack_exports__, "c2".function() { return c2; });
    var c1 = 'I am c111';
    var c2 = 'I am c222';
    __webpack_exports__["default"] = ('I'm a c');
}
Copy the code

Conclusion:

1. You can see that commonJS modules refer to ES6 modules, and the referenced ES6 modules are given an __esModule attribute (true).

2. D (__webpack_exports__, “c1”, function() {return c1; }); .

3. The export default statement is changed to __webpack_exports__[“default”] = (‘ I am C ‘);

4. Use import B from ‘./b’ to call the ES6 module. If you need to call the default value of B, use __WEBPACK_IMPORTED_MODULE_0__b__[“default”];

5. To call the CommonJS module with import b from ‘./b’, do the following:

   var __WEBPACK_IMPORTED_MODULE_0__b__ = __webpack_require__(0);
   var __WEBPACK_IMPORTED_MODULE_0__b___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0__b__);
   console.log(__WEBPACK_IMPORTED_MODULE_0__b___default.a);
   Copy the code

In conclusion:

1. When commonJS modules are packaged, the require part is replaced by the __webpack_require__ function, and the rest is printed as is.

2. When the CommonJS module is imported, since the commonJS module does not expose default values, the syntax for importing default values will be parsed as:

   // import c from './c'Is resolved to: var __WEBPACK_IMPORTED_MODULE_0__c__ = __webpack_require__(2); var __WEBPACK_IMPORTED_MODULE_0__c___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0__c__); // Console. log(__webpack_imported_module_0__c___default.a)Copy the code

3. C = __webpack_require__(2); c = __webpack_require__(2); c = __webpack_require__(2); . It can be assumed that the commonJS specification’s require is directly replaced by __webpack_require__.

4. When es6 modules are required (regardless of whether the require statement appears in commonJS or es6 modules), es6 modules will have their __esModule=true added. Es6 modules do not add an __esModule attribute when they are imported. When the ES6 module is used as an entry module, it will also add __esModule=true. It can be considered that the fate of the entry module is to be packaged as commonJS module and exposed. At this point, I need a variable to identify that I used to be an ES6 module, but was forced to become commonJS module. Re-referencing this module will not trigger tree-shaking.

5. When es6 modules are imported directly, the tree-shaking feature of Webpack is triggered. It can be assumed that Webpack can only call tree-shaking when es6 modules are statically resolved.

6. When the ES6 module is packaged, the export statement is parsed to:

   __webpack_require__.d(__webpack_exports__, "a".function() { return c1; });
   Copy the code

   The export default statement is parsed to:

   __webpack_exports__["c"] = ('I'm a c');
   Copy the code

   Of course, all attribute names are randomly assigned new names, usually a, B, C, D… The order.

   Exception: If the ES6 module is used as an entry module, the attribute names exposed by the export and export default statements are retained, for example:

   __webpack_require__.d(__webpack_exports__, "aaaa".function() { return aaaa; });
   __webpack_exports__["default"] = ('I'm a');
   Copy the code

7. When an ES6 module is imported, the import statement is resolved to:

   var __WEBPACK_IMPORTED_MODULE_0__c__ = __webpack_require__(2);
   Copy the code

   There is no use of __webpack_require__.n.

   All attributes exposed by a call to the ES6 module are in the form of __WEBPACK_IMPORTED_MODULE_0__c__[‘ random attribute name ‘], for example:

   console.log(__WEBPACK_IMPORTED_MODULE_0__c__["c" /* default */])
   Copy the code

8. Es6 modules are much simpler when required:

   var c = __webpack_require__(2);
   Copy the code

   Calling any properties is done directly through C.

Description:

Import ->__webpack_require__ and __webpack_require__.n((present when referencing commonJS modules)) require->__webpack_require__ export->__webpack_require__.d export default->__webpack_exports__[".."] The module exports - > the sameCopy the code

ES Module import, require, export, module. Exports

Project code

With this in mind, if you implement file path loading, you can write a simple modular tool.