深入理解 webpack 文件打包机制(小结)

前言

最近在重拾 webpack 一些知识点，希望对前端模块化有更多的理解，以前对 webpack 打包机制有所好奇，没有理解深入，浅尝则止，最近通过对 webpack 打包后的文件进行查阅，对其如何打包 JS 文件有了更深的理解，希望通过这篇文章，能够帮助读者你理解：

webpack 单文件如何进行打包？ webpack 多文件如何进行代码切割？ webpack1 和 webpack2 在文件打包上有什么区别？ webpack2 如何做到 tree shaking? webpack3 如何做到 scope hoisting?

本文所有示例代码全部放在我的 Github 上，看兴趣的可以看看：

git clone https://github.com/happylindz/blog.gitcd blog/code/webpackBundleAnalysisnpm install

webpack 单文件如何打包？

首先现在 webpack 作为当前主流的前端模块化工具，在 webpack 刚开始流行的时候，我们经常通过 webpack 将所有处理文件全部打包成一个 bundle 文件， 先通过一个简单的例子来看：

// src/single/index.jsvar index2 = require('./index2');var util = require('./util');console.log(index2);console.log(util);// src/single/index2.jsvar util = require('./util');console.log(util);module.exports = "index 2";// src/single/util.jsmodule.exports = "Hello World";// 通过 config/webpack.config.single.js 打包const webpack = require('webpack');const path = require('path')module.exports = { entry: { index: [path.resolve(__dirname, '../src/single/index.js')], }, output: { path: path.resolve(__dirname, '../dist'), filename: '[name].[chunkhash:8].js' },}

通过 npm run build:single 可看到打包效果，打包内容大致如下(经过精简)：

// dist/index.xxxx.js(function(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; } return __webpack_require__(__webpack_require__.s = 3);})([/* 0 */(function(module, exports, __webpack_require__) { var util = __webpack_require__(1); console.log(util); module.exports = "index 2";}),/* 1 */(function(module, exports) { module.exports = "Hello World";}),/* 2 */(function(module, exports, __webpack_require__) { var index2 = __webpack_require__(0); index2 = __webpack_require__(0); var util = __webpack_require__(1); console.log(index2); console.log(util);}),/* 3 */(function(module, exports, __webpack_require__) { module.exports = __webpack_require__(2);})]);

将相对无关的代码剔除掉后，剩下主要的代码：

首先 webpack 将所有模块(可以简单理解成文件)包裹于一个函数中，并传入默认参数，这里有三个文件再加上一个入口模块一共四个模块，将它们放入一个数组中，取名为 modules，并通过数组的下标来作为 moduleId。 将 modules 传入一个自执行函数中，自执行函数中包含一个 installedModules 已经加载过的模块和一个模块加载函数，最后加载入口模块并返回。 __webpack_require__ 模块加载，先判断 installedModules 是否已加载，加载过了就直接返回 exports 数据，没有加载过该模块就通过 modules[moduleId].call(module.exports, module, module.exports, __webpack_require__) 执行模块并且将 module.exports 给返回。