Webpack学习－工作原理（下）

朱雀 2022-03-15 00:20 69阅读 0赞

继上篇[文章][Link 1]介绍了Webpack的基本概念，完整流程，以及打包过程中广播的一些事件的作用，这篇文章主要讲生成的chunk文件如何输出成具体的文件。分同步和异步两种情况来分析输出的文件`使用的webpack版本：3.8.0`。

***模块文件show.js***

function show(content) {
            window.document.getElementById('app').innerText = 'Hello,' + content;
        }
    
        // 通过 CommonJS 规范导出 show 函数
        module.exports = show;
    复制代码

## 同步加载 ##

// main.js
    
    import show from './show';
    
    show('TWENTY-FOUR K');
    
    复制代码

### 生成的bundle文件 ###

// webpackBootstrap启动函数
    // modules存放的是所有模块的数组，每个模块都是一个函数
    (function(modules) {
    	var installedModules = {}; // 缓存安装过的模块，提升性能
    	//去传入的modules数组中加载对应moduleId（index）的模块，与node的require语句相似
    	function __webpack_require__(moduleId) {
    		// 检查是否已经加载过，如果有的话直接从缓存installedModules中取出
    		if(installedModules[moduleId]) {
    			return installedModules[moduleId].exports;
    		}
            // 如果没有的话，就直接新建一个模块，并且存进缓存installedModules
    		var module = installedModules[moduleId] = {
    			i: moduleId, // 对应modules的索引index，也就是moduleId
    			l: false, // 标志模块是否已经加载
    			exports: {}
    		};
            // 执行对应模块函数，并且传入需要的参数
    		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
    		// 将标志设置为true
    		module.l = true;
    		// 返回这个模块的导出值
    		return module.exports;
    	}
    	// 储存modules数组
    	__webpack_require__.m = modules;
        // 储存缓存installedModules
    	__webpack_require__.c = installedModules;
    	// 为Harmony导出定义getter函数
    	__webpack_require__.d = function(exports, name, getter) {
    		if(!__webpack_require__.o(exports, name)) {
    			Object.defineProperty(exports, name, {
    				configurable: false,
    				enumerable: true,
    				get: getter
    			});
    		}
    	};
    	// 用于与非协调模块兼容的getdefaultexport函数，将module.default或非module声明成getter函数的a属性上
    	__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;
    	};
    	// 工具函数，hasOwnProperty
    	__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
    	// webpack配置中的publicPath，用于加载被分割出去的异步代码
    	__webpack_require__.p = "";
    	// 使用__webpack_require__函数去加载index为0的模块，并且返回index为0的模块也就是主入口文件的main.js的对应文件，__webpack_require__.s的含义是启动模块对应的index
    	return __webpack_require__(__webpack_require__.s = 0);
    })
    /************************************************************************/
    ([
    /* 0 */
    /***/ (function(module, __webpack_exports__, __webpack_require__) {
     "use strict";
    // 设置__esModule为true，影响__webpack_require__.n函数的返回值
    Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
    // 同步加载index为1的依赖模块
    /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__show__ = __webpack_require__(1);
    // 获取index为1的依赖模块的export
    /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__show___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0__show__);
    // 同步加载
    
    
    __WEBPACK_IMPORTED_MODULE_0__show___default()('wushaobin');
    
    /***/ }),
    /* 1 */
    /***/ (function(module, exports) {
    
    function show(content) {
      window.document.getElementById('app').innerText = 'Hello,' + content;
    }
    
    // 通过 CommonJS 规范导出 show 函数
    module.exports = show;
    
    
    /***/ })
    ]);
    复制代码

## 异步加载 ##

// main.js
    
    // 异步加载 show.js
    import('./show').then((show) => {
      // 执行 show 函数
      show('TWENTY-FOUR K');
    });
    
    
    复制代码

经webpack打包会生成两个文件0.bundle.js和bundle.js，怎么做的原因，是可以吧show.js以异步加载形式引入，这也是分离代码，达到减少文件体积的优化方法，两个文件分析如下。

### 0.bundle.js ###

// 加载本文件（0.bundle.js）包含的模块， webpackJsonp用于从异步加载的文件中安装模块，挂载至全局（bundle.js）供其他文件使用
    webpackJsonp(
    // 在其他文件中存放的模块id
    [0],[
    // 本文件所包含的模块
    
    /***/ (function(module, exports) {
    
    function show(content) {
      window.document.getElementById('app').innerText = 'Hello,' + content;
    }
    
    // 通过 CommonJS 规范导出 show 函数
    module.exports = show;
    
    
    /***/ })
    ]);
    复制代码

### bundle.js ###

## 总结 ##

这里我们通过对比同步加载和异步加载的简单应用，去分析两种情况webpack打包出来文件的差异性，我们发现，对于异步加载的bundle.js与同步的bundle.js基本相似，都是模拟node.js的require语句去导入模块，有所不同的是多了一个\_\_webpack\_require\_\_.e函数，用来加载分割出的需要异步加载的chunk对应的文件，以及一个wepackJsonp函数，用于从异步加载的文件中去安装模块。

[Link 1]: https://juejin.im/post/5c68ca3d518825620947e299