分析：webpack打包后的bundle

webpack4.0以上开箱即用

npm install webpack -g
npm install webpack-cli -g

mkdir webpack-demo
cd webpack-demo
npm init
npm install webpack-cli webpack
mkdir src
cd src
touch index.js

index.js输入

console.log('hello wepback')
console.log('val', 1 + 2)

打包方法：

webpack --mode=development // 打测试环境包
webpack --mode=production // 打线上环境包

结果：测试包

/******/ (() => { // webpackBootstrap
/*!**********************!*
  !*** ./src/index.js ***!
  \**********************/
eval("console.log('hello wepback');\nconsole.log('val', 1 + 2)\n\n//# sourceURL=webpack://webpack-demo/./src/index.js?");
/******/ })()
;

结果：线上包

console.log("hello wepback"),console.log("val",3);

eval 功能

每个模块都转化为字符串，用eval()包裹，并在尾部添加# sourceURL，即源文件的相对路径

引入esmodule

├── README.md
├── js
│   └── main.js
├── src
│   ├── index.js
│   └── utils
│       └── utils.js
├── package-lock.json
├── package.json

utils.js

console.log('util.js')
let utilsName = 'name_a'
export {
  utilsName
}

index.js

import { utilsName } from './utils/utils'
console.log('utils', utilsName);
console.log('val', 1 + 2)

测试打包

(() => {
	"use strict";
	var __webpack_modules__ = ({
		/ "./src/index.js": ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _utils_utils__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./utils/utils */ \"./src/utils/utils.js\");\n\nconsole.log('utils', _utils_utils__WEBPACK_IMPORTED_MODULE_0__.utilsName);\nconsole.log('val', 1 + 2)\n\n//# sourceURL=webpack://webpack-demo/./src/index.js?")}),
 		"./src/utils/utils.js": ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"utilsName\": () => /* binding */ utilsName\n/* harmony export */ });\nconsole.log('util.js')\nlet utilsName = 'name_a'\n\n\n//# sourceURL=webpack://webpack-demo/./src/utils/utils.js?") })
    });
	var __webpack_module_cache__ = {};
	function __webpack_require__(moduleId) {
		if(__webpack_module_cache__[moduleId]) {
			return __webpack_module_cache__[moduleId].exports;
		}
		var module = __webpack_module_cache__[moduleId] = {
			exports: {}
		}
        
		__webpack_modules__[moduleId](module, module.exports, __webpack_require__);
		return module.exports; 
	}
    
	(() => {
		__webpack_require__.d = (exports, definition) => {
			for(var key in definition) {
				if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
					Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
				}
			}
		};
	})();
    
	(() => {
		__webpack_require__.o = (obj, prop) => Object.prototype.hasOwnProperty.call(obj, prop)
	})();

	(() => {
		__webpack_require__.r = (exports) => {
			if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
				Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
			}
		Object.defineProperty(exports, '__esModule', { value: true });
	}})();
    
	__webpack_require__("./src/index.js");
})()

其实最终，每一个模块import另一个模块，这个模块都是一个 IMPORTED_MODULE 对象：

IMPORTED_MODULE：{
	Symbol(Symbol.toStringTag): "Module"
	__esModule: true,
	// 以下为外层模块中引入模块的属性
	fun: fun(){},
	utilsName: 'name_a'
}

知识点：

• Symbol.toStringTag 作用：exports 对象在调用 toString 方法时会返回 'Module' 参考链接

• __esModule 作用：符合 ES Harmony 规范

• webpack_reqruie( )返回 module.exports , webpack 对于 CommonJs 规范是原生支持的

线上打包

(()=>{"use strict";console.log("util.js"),console.log("utils","name_a"),console.log("val",3)})();