深入理解webpack打包bundle.js的机制

本文通过实际打包查看bundle.js的源码的方式来理解webpack的打包输出。

项目目录如下：

+ index.js
+ package.json
+ webpack.config.js

其中webpack.config.js的配置如下

const path = require('path');
module.exports = {
  entry: './index.js',
  mode: 'development',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
    library: 'demo',
    libraryTarget: 'umd'
  },
}

index.js来模拟一个需要导出的包。并使用了esmodule的方式导出。

function demo() {
  console.log('this is demo');
}

export default demo;

以上的配置是希望打包出一个支持umd模块规范的lib库。执行webpack打包出了./dist/bundle.js，最好配合node中commonjs的规范对比理解。

我这里先把commonjs执行的过程列一下，详细见这里

// 1. 检查 Module._cache，是否缓存之中有指定模块
// 2. 如果缓存之中没有，就创建一个新的Module实例
// 3. 将它保存到缓存
// 4. 使用 module.load() 加载指定的模块文件，
// 读取文件内容之后，使用 module.compile() 执行文件代码
// 5. 如果加载/解析过程报错，就从缓存删除该模块
// 6. 返回该模块的 module.exports

打包出的文件源码内容摘略如下，请仔细看注释。

// umd规范
(function webpackUniversalModuleDefinition(root, factory) {
	// commonjs2
	if(typeof exports === 'object' && typeof module === 'object')
		module.exports = factory();
	// amd
	else if(typeof define === 'function' && define.amd)
		define([], factory);
	// commonjs
	else if(typeof exports === 'object')
		exports["demo"] = factory();
	else
	// 注入到全局
		root["demo"] = factory();
})(self, function() {
return /******/ (() => { // webpackBootstrap
/******/ 	"use strict";
/******/ 	var __webpack_modules__ = ({
// index.js 即为需要导出的模块，可以看出这就是一个kv组成的模块的map
/***/ "./index.js":
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
		eval("...")
	  })
	  	});
	  	// 如同nodejs的commonjs，webpack也会缓存已经加载的模块。
	  	var __webpack_module_cache__ = {};
/******/ 	
/******/ 	// The require 函数
/******/ 	function __webpack_require__(moduleId) {
/******/ 		// 检查是否在缓存中
/******/ 		if(__webpack_module_cache__[moduleId]) {
/******/ 			return __webpack_module_cache__[moduleId].exports;
/******/ 		}
/******/ 		// 创建一个新的模块并放入到缓存，其实可以看出只是一个对象字面量
/******/ 		var module = __webpack_module_cache__[moduleId] = {
/******/ 			// no module.id needed
/******/ 			// no module.loaded needed
/******/ 			exports: {}
/******/ 		};
/******/ 	
/******/ 		// 执行Module中的代码
/******/ 		__webpack_modules__[moduleId](module, module.exports, __webpack_require__);
/******/ 	
/******/ 		// 导出模块。
/******/ 		return module.exports;
/******/ 	}
			// 运行入口文件，并导出
/******/ 	return __webpack_require__("./index.js");
/******/ })()
;
});

可以看出，几乎就是Node.js commonjs规范的浏览器实现。可参考阮一峰的模块加载机制进行对比。这样相互印证，更好去理解和记忆。