Question

【Web前端基础】webpack打包原理是什么？

Answer 1

【Web前端基础】webpack打包原理是什么？1、概念
　　本质上，webpack 基于node平台，利用 node 的各种api来实现 javascript 应用程序的一个静态模块的打包工具。

　　在打包过程中，构建依赖关系，并且实现模块引用预处理，以及缓存等。

2、分析
　　

　　1、人口文件

// mian.js
const a = require('./m1')
const b= require('./m2')
import { test } from './m1'
console.log(test)
　　

//m2.js
export default {
b:2
}
　　

//m1.js
export const test = {test:1}
export default {
a:1
}
　　

　　2、生产的文件

(function (modules) {
var installedModules = {}; //缓存
/*
* 加载模块函数
* 传入模块id
* */
function __webpack_require__(moduleId) {
// 检查缓存中是否有模块
if (installedModules[moduleId]) {
return installedModules[moduleId].exports;
}
// 创建一个新模块，并缓存起来
var module = installedModules[moduleId] = {
i: moduleId,
l: false,
exports: {}
};
// 调模块的函数，modules
modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
module.l = true;
// 返回对应模块
return module.exports;
}
__webpack_require__.m = modules;
__webpack_require__.c = installedModules;
__webpack_require__.d = function (exports, name, getter) {
if (!__webpack_require__.o(exports, name)) {
Object.defineProperty(exports, name, {
configurable: false,
enumerable: true,
get: getter
});
}
};
__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__.o = function (object, property) {
return Object.prototype.hasOwnProperty.call(object, property);
};
__webpack_require__.p = "";

// 加载入口文件
return __webpack_require__(__webpack_require__.s = 0);
})
([
(function (module, exports, __webpack_require__) {
const a = __webpack_require__(1)
const b = __webpack_require__(2)
}),
(function (module, __webpack_exports__, __webpack_require__) {
"use strict";
Object.defineProperty(__webpack_exports__, "__esModule", {value: true});
__webpack_exports__["default"] = ({
a: 1
});
}),
(function (module, __webpack_exports__, __webpack_require__) {
"use strict";
Object.defineProperty(__webpack_exports__, "__esModule", {value: true});
__webpack_exports__["default"] = ({
b: 2
});
})
]);
　　

　　观察以上代码得到结果：

　　1、打包后的代码是一个立即执行函数，且传入的参数为一个数组

　　2、参数数组就是我们引用的模块

　　3、每一个模块对应着数组的位置就是那么的id

　　4、在立即函数中加载入口文件，并执行

　　__webpack_require__ ： 加载并执行某一个模块并将模块缓存在 installedModules 中。

modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
　　这里是执行引用的某一个模块。

　　并将module，exports，require 加入模块中。

　　这也是为什么我们在模块中有全局变量 module/exports/require

　　通过对打包后的文件分析，基本可以完全理解打包过程。