本質上，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
通過對打包後的文件分析，基本可以完全理解打包過程。