一起探索最真實(shí)的世界
webpack是啥
webpack 是一個(gè)現(xiàn)代 JavaScript 應(yīng)用程序的靜態(tài)模塊打包器(module bundler)屿讽。當(dāng) webpack 處理應(yīng)用程序時(shí)，它會遞歸地構(gòu)建一個(gè)依賴關(guān)系圖(dependency graph)寒屯，其中包含應(yīng)用程序需要的每個(gè)模塊，然后將所有這些模塊打包成一個(gè)或多個(gè) bundle需频。
webpack
最簡單的??
const path = require('path');
module.exports = {
// JS 執(zhí)行入口文件
entry: './main.js',
output: {
// 把所有依賴的模塊合并輸出到一個(gè) bundle.js 文件
filename: 'bundle.js',
// 輸出文件都放到 dist 目錄下
path: path.resolve(__dirname, './dist'),
}
};
以上是webpack.config.js的配置,非常簡單俊柔，只配置了entry（入口）和ouput（輸出）
我們的目錄如下
|-- index.html
|-- main.js
|-- show.js
|-- webpack.config.js
index.html
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<div id="app"></div>
<!--導(dǎo)入 webpack 輸出的 JS 文件-->
<script src="./dist/bundle.js"></script>
</body>
</html>
main.js
// 通過 CommonJS 規(guī)范導(dǎo)入 show 函數(shù)
const show = require('./show.js');
// 執(zhí)行 show 函數(shù)
show('Webpack');
show.js
// 操作 DOM 元素睛蛛，把 content 顯示到網(wǎng)頁上
function show(content) {
window.document.getElementById('app').innerText = 'Hello,' + content;
}
// 通過 CommonJS 規(guī)范導(dǎo)出 show 函數(shù)
module.exports = show;
運(yùn)行下
webpack
webpack打包后，根目錄下dist目錄下
|-- dist/
|---- bundle.s
bundel.js
(function (modules) {
// webpack啟動(dòng)函數(shù)文判，modules就是webpack根據(jù)入口文件進(jìn)行依賴解析后的模塊數(shù)組过椎，每個(gè)模塊都是一個(gè)函數(shù)
// 模塊緩存數(shù)組，記錄已經(jīng)加載的模塊
var installedModules = {};
// 加載函數(shù)
function __webpack_require__(moduleId) {
// 檢測是否已經(jīng)加載
if (installedModules[moduleId]) {
return installedModules[moduleId].exports;
}
// 根據(jù)模塊id創(chuàng)建一個(gè)模塊module戏仓，并且存入模塊緩存數(shù)組
var module = installedModules[moduleId] = {
i: moduleId,
l: false,
exports: {}
};
// 執(zhí)行傳入的模塊數(shù)組中modules[moduleId]
modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
// 模塊加載狀態(tài)置為true
module.l = true;
// 返回module的exports疚宇，這邊就是各個(gè)模塊定義的返回內(nèi)容
return module.exports;
}
// 加載入口模塊，返回入口模塊的module.exports
return __webpack_require__(__webpack_require__.s = 0);
})
([
/* 0 */
(function (module, exports, __webpack_require__) {
// 通過 CommonJS 規(guī)范導(dǎo)入 show 函數(shù)
const show = __webpack_require__(1);
// 執(zhí)行 show 函數(shù)
show('Webpack');
}),
/* 1 */
(function (module, exports) {
// 操作 DOM 元素赏殃，把 content 顯示到網(wǎng)頁上
function show(content) {
window.document.getElementById('app').innerText = 'Hello,' + content;
}
// 通過 CommonJS 規(guī)范導(dǎo)出 show 函數(shù)
module.exports = show;
})
]);
從上面打包之后的代碼可以看出,webpack把我們的文件分成了不同的模塊函數(shù)敷待，初始加載入口模塊函數(shù)，然后將加載后的模塊函數(shù)進(jìn)行緩存仁热，每個(gè)模塊函數(shù)加載后的返回值就是我們模塊對外暴露的對象榜揖，這樣就可以被其它模塊進(jìn)行使用，至此抗蠢，這就是最簡單的同步加載使用場景
