前言

最近在重拾 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 給返回。