如今Webpack已经是一个不可或缺的前端构建工具，借助这个构建工具，我们可以使用比较新的技术（浏览器不能直接支持）来开发。

你是否好奇你写的代码经过Webpack构建之后会生成什么东西？是否有时调试遇到莫名其妙的问题？

本文不讲如何进行配置，只是基于几个基础的例子，简要分析一下 webpack@4.20.2 构建后的代码结构，当然了，并不全面，时间问题能力问题还不能理解到位。

代码比较长，生成的代码也比较晦涩比较绕，也可能条理不顺，客官坐好咧~

 

 

 

一、Webpack的运行机制

Webpack的运行过程实际上可以归纳为这个步骤

读取配置参数 -> 相关事件绑定（插件参与） ->  识别各入口Entry模块 -> 编译文件（loader参与）-> 生成文件

首先读取我们的配置文件如 webpack.config.js，然后事件流就参与进来绑定相关的事件，Webpack中的事件使用 Tapable 来管理，在这一阶段，除了绑定webpack内置的一大堆事件之外，还支持自定义的一些事件处理。

配置中的 plugins部分，实际上也可以看作是一些自定义的事件处理，因为插件将在定义的”相关时刻“插入到编译过程中处理资源，这里的”相关时刻“指的就是 订阅-发布 模式中的发布环节

\"\"

webpack支持多个入口模块，所以还需要进行各入口模块的分析（这里的入口模块只能为JS模块），比如以下两个入口模块

\"\"

分析完入口模块，接下来分析该模块的依赖，并使用相关loader进行编译（如果需要loader的话），真正的编译环节是在这里。

期间会使用AST抽象语法树来分析语法，直到编译完成，输出到相应的文件中

可以来看看这篇文章 Webpack运行机制

 

二、Webpack编译结果

由最简单的例子开始

2.1 无依赖的单个模块

./main.js

console.log('main');

./webpack.config.js

module.exports = {
    // entry: './main',
    entry: {
        main: './main'
    },

    mode: 'none',

    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].js'
    }
};

注意，在webpack4中默认的mode对 development和production进行了一些特殊配置，为了简化，这里就设置成none

编译一个文件，将在dist目录中生成

\"\"

./dist/main.js

 1 /******/ (function(modules) { // webpackBootstrap
 2 /******/     // The module cache
 3 /******/     var installedModules = {};
 4 /******/
 5 /******/     // The require function
 6 /******/     function __webpack_require__(moduleId) {
 7 /******/
 8 /******/         // Check if module is in cache
 9 /******/         if(installedModules[moduleId]) {
10 /******/             return installedModules[moduleId].exports;
11 /******/         }
12 /******/         // Create a new module (and put it into the cache)
13 /******/         var module = installedModules[moduleId] = {
14 /******/             i: moduleId,
15 /******/             l: false,
16 /******/             exports: {}
17 /******/         };
18 /******/
19 /******/         // Execute the module function
20 /******/         modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
21 /******/
22 /******/         // Flag the module as loaded
23 /******/         module.l = true;
24 /******/
25 /******/         // Return the exports of the module
26 /******/         return module.exports;
27 /******/     }
28 /******/
29 /******/
30 /******/     // expose the modules   (__webpack_modules__)
31 /******/     __webpack_require__.m = modules;
32 /******/
33 /******/     // expose the module cache
34 /******/     __webpack_require__.c = installedModules;
35 /******/
36 /******/     // define getter function for harmony exports
37 /******/     __webpack_require__.d = function(exports, name, getter) {
38 /******/         if(!__webpack_require__.o(exports, name)) {
39 /******/              .defineProperty(exports, name, { enumerable: true, get: getter });
40 /******/         }
41 /******/     };
42 /******/
43 /******/     // define __esModule on exports
44 /******/     __webpack_require__.r = function(exports) {
45 /******/         if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
46 /******/              .defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
47 /******/         }
48 /******/          .defineProperty(exports, '__esModule', { value: true });
49 /******/     };
50 /******/
51 /******/     // create a fake namespace  
52 /******/     // mode & 1: value is a module id, require it
53 /******/     // mode & 2: merge all properties of value into the ns
54 /******/     // mode & 4: return value when already ns  
55 /******/     // mode & 8|1: behave like require
56 /******/     __webpack_require__.t = function(value, mode) {
57 /******/         if(mode & 1) value = __webpack_require__(value);
58 /******/         if(mode & 8) return value;
59 /******/         if((mode & 4) && typeof value === ' ' && value && value.__esModule) return value;
60 /******/         var ns =  .create(null);
61 /******/         __webpack_require__.r(ns);
62 /******/          .defineProperty(ns, 'default', { enumerable: true, value: value });
63 /******/         if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
64 /******/         return ns;
65 /******/     };
66 /******/
67 /******/     // getDefaultExport function for compatibility with non-harmony modules
68 /******/     __webpack_require__.n = function(module) {
69 /******/         var getter = module && module.__esModule ?
70 /******/             function getDefault() { return module['default']; } :
71 /******/             function getModuleExports() { return module; };
72 /******/         __webpack_require__.d(getter, 'a', getter);
73 /******/         return getter;
74 /******/     };
75 /******/
76 /******/     //  .prototype.hasOwnProperty.call
77 /******/     __webpack_require__.o = function( , property) { return  .prototype.hasOwnProperty.call( , property); };
78 /******/
79 /******/     // __webpack_public_path__
80 /******/     __webpack_require__.p = "";
81 /******/
82 /******/
83 /******/     // Load entry module and return exports
84 /******/     return __webpack_require__(__webpack_require__.s = 0);
85 /******/ })
86 /************************************************************************/
87 /******/ ([
88 /* 0 */
89 /***/ (function(module, exports) {
90 
91 
92 console.log('main');
93 
94 
95 /***/ })
96 /******/ ]);

可以看到首先是一个匿名函数，在87行时自执行传入

[
/* 0 */
/***/ (function(module, exports) {


console.log('main');


/***/ })
/******/ ]

这个是modules，表示有一个模块需要加载

第3行使用 installedModules 来缓存已经加载的模块

webpack由最初支持 commonjs模块规范，到后来要支持es6的模块等，为了兼容不同的模块机制，定义了一个 __webpack_require__ 函数作为webpack内部的require

/******/     // The require function
/******/     function __webpack_require__(moduleId) {
/******/
/******/         // Check if module is in cache
                // 如果模块已经加载则直接使用
/******/         if(installedModules[moduleId]) {
/******/             return installedModules[moduleId].exports;
/******/         }
/******/         // Create a new module (and put it into the cache)
/******/         var module = installedModules[moduleId] = {
/******/             i: moduleId, // 模块ID
/******/             l: false, // 模块是否已加载
/******/             exports: {} // 模块的导出项
/******/         };
/******/
/******/         // Execute the module function
/******/         modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/         // Flag the module as loaded
/******/         module.l = true; // 标记已经加载
/******/
/******/         // Return the exports of the module
/******/         return module.exports; // 返回模块的导出项目
/******/     }

其中，这个调用非常重要

modules[moduleId].call(module.exports, module, module.exports, __webpack_require__)

结合匿名函数传入的参数来看，modules[moduleId] 其实就是这个

(function(module, exports) {


console.log('main');


/***/ })

第一个参数 module.exports 实际上就是上面模块的导出项，是为了保证this能正确地指向module，第二第三个参数按着顺序来，第四个参数一般用于依赖

因为这里 main.js没有依赖其他模块，所以没有传进来

最后 return module.exports; 实际上就是返回了模块的导出项，在上面的84行中，入口模块被引入 。从而自动地加载第一个模块并执行

return __webpack_require__(__webpack_require__.s = 0); // __webpack_require__.s为入口文件，此处引用模块ID

另外再看其它代码，

/******/     // expose the modules   (__webpack_modules__)
/******/     __webpack_require__.m = modules; // 将模块存起来
/******/
/******/     // expose the module cache
/******/     __webpack_require__.c = installedModules; // 将已经加载的模块存起来

/******/     // __webpack_public_path__
/******/     __webpack_require__.p = ""; // 设置的 publicPath

这里没什么可说的，这里的publicPath对应于 output中的配置，如

output: {
        publicPath: './dist/',
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].js'
    },

另外

/******/     // define getter function for harmony exports
/******/     __webpack_require__.d = function(exports, name, getter) {
/******/         if(!__webpack_require__.o(exports, name)) {
/******/              .defineProperty(exports, name, { enumerable: true, get: getter });
/******/         }
/******/     };
/******/
/******/     // define __esModule on exports
/******/     __webpack_require__.r = function(exports) {
/******/         if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
/******/              .defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
/******/         }
/******/          .defineProperty(exports, '__esModule', { value: true });
/******/     };

/******/     //  .prototype.hasOwnProperty.call
/******/     __webpack_require__.o = function( , property) { return  .prototype.hasOwnProperty.call( , property); };

这里 __webpack_require__.o 这里只是hasOwnProperty的包装

__webpack_require__.d 这里是对exports定义一个属性（当前模块未用到，暂且如此，理解不到位）

__webpack_require__.r 这里是对es6模块中的export的支持（当前模块未用到，暂且如此，理解不到位）

还有这个，这个就更难理解了

/******/     // create a fake namespace  
/******/     // mode & 1: value is a module id, require it
/******/     // mode & 2: merge all properties of value into the ns
/******/     // mode & 4: return value when already ns  
/******/     // mode & 8|1: behave like require
/******/     __webpack_require__.t = function(value, mode) {
/******/         if(mode & 1) value = __webpack_require__(value);
/******/         if(mode & 8) return value;
/******/         if((mode & 4) && typeof value === ' ' && value && value.__esModule) return value;
/******/         var ns =  .create(null);
/******/         __webpack_require__.r(ns);
/******/          .defineProperty(ns, 'default', { enumerable: true, value: value });
/******/         if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
/******/         return ns;
/******/     };
/******/
/******/     // getDefaultExport function for compatibility with non-harmony modules
/******/     __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;
/******/     };

__webpack_require__.t 暂时不说明了，还看不懂怎么调用的..

__webpack_require__.n 这个主要也是为 es6模块服务的，也没能理解好，知道的可以在评论区留言哈~

 

2. 有依赖的单个模块

先使用最基础的commonjs模块规范  require, exports ，module.exports 有助于理解上面那个模块的导出项目

./main.js

let number = require('./number');

console.log('main', number);

 

./number.js

let n = 10;

exports.n = n;

编译后，生成的文件变化的只是匿名函数传入的部分

\"\"

./dist/main.js

// 省略

/******/ ([
/* 0 */
/***/ (function(module, exports, __webpack_require__) {


let number = __webpack_require__(1);

console.log('main', number);


/***/ }),
/* 1 */
/***/ (function(module, exports) {


let n = 10;

exports.n = n;


/***/ })
/******/ ]);

注意到前面的数字即是模块的ID,也可图中的一致

这里__webpack_require__参数被传进来，main.js中引入number这个模块 __webpack_require__(1);

number模块中 exports.n = n，注意这里的 exports即是调用时的第二个参数

modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);

所以此时 n属性被存入module的export导出项中，从而__webpack_require__(1) 就能获取这个导出项

 

换种方式，使用es6的模块导出

更改 ./number.js

let n = 10;

export {
    n
};

编译后 ./dist/main.js

/******/ ([
/* 0 */
/***/ (function(module, exports, __webpack_require__) {


let number = __webpack_require__(1);

console.log('main', number);


/***/ }),
/* 1 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "n", function() { return n; });

let n = 10;




/***/ })
/******/ ]);

可以看到模块1变了，为了兼容 export ，使用 __webpack_require__.r 定义了它为es6模块，再使用__webpack_require__.d 将 n保存到模块的导出项中

\"\"

__webpack_require__.d 函数中的 getter即为 这里的 function() { return n; }，通过设置为对象的get属性，可以获取到 n这个返回值

var o = {};

 .defineProperty(o, 'abc', {
    get: function() {
        return 123;
    }
});

console.log(o.abc); // 123

所以将 let n = 10 定义在后面也是没问题的，因为getter是在number模块被调用返回之后才使用的

 

接着，我们把引入依赖文件改为import

./main.js

import {n} from './number';

console.log('main', n);

编译后 ./dist/main.js

/******/ ([
/* 0 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony import */ var _number__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(1);



console.log('main', _number__WEBPACK_IMPORTED_MODULE_0__["n"]);


/***/ }),
/* 1 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "n", function() { return n; });

let n = 10;




/***/ })
/******/ ]);

同样的，这时main模块用到了es6的模块引入方式，所以 __webpack_require__.r(__webpack_exports__);

var _number__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(1);

这个 __webpack_require__(1) 实际上就是 number模块的模块导出项，自然就能取到属性 n 了

 

接下来，着眼那个 default字眼，继续更换模块的导入导出方式

./main.js

import n from './number';

console.log('main', n);

./number.js

let n = 10;

export default n;

./dist/main.js

/******/ ([
/* 0 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony import */ var _number__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(1);



console.log('main', _number__WEBPACK_IMPORTED_MODULE_0__["default"]);


/***/ }),
/* 1 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
__webpack_require__.r(__webpack_exports__);

let n = 10;

/* harmony default export */ __webpack_exports__["default"] = (n);


/***/ })
/******/ ]);

可以看到，变化只是属性变成了default

 

再来一种 es6的方式

./main.js

import n from './number';

console.log('main', n);

 

./number.js

import {str as n} from './str';

export default n;

 

./str.js

export var str = 10;

 

编译后

\"\"

./dist/main.js

/******/ ([
/* 0 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony import */ var _number__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(1);



console.log('main', _number__WEBPACK_IMPORTED_MODULE_0__["default"]);


/***/ }),
/* 1 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony import */ var _str__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(2);



/* harmony default export */ __webpack_exports__["default"] = (_str__WEBPACK_IMPORTED_MODULE_0__["str"]);


/**

继续阅读与本文标签相同的文章

无标签
最新文章 最热文章
收藏 打印

特别推荐 2026年05月18日 星期一

精彩发现

热门标签

阻止表单提交 窗口 关闭浏览器 清除 CDATA css文件 光标位置 坐标 javascrpt !important 超链接 数字

相关文章