揭秘webpack5模塊打包
在上一節(jié)中我們初步了解了webpack可以利用內(nèi)置靜態(tài)模塊類(lèi)型(asset module type)來(lái)處理資源文件,我們所知道的本地服務(wù),資源的壓縮,代碼分割,在webpack構(gòu)建的工程中有一個(gè)比較顯著的特征是,模塊化,要么commonjs要么esModule,在開(kāi)發(fā)環(huán)境我們都是基于這兩種,那么通過(guò)webpack打包后,如何讓其支持瀏覽器能正常的加載兩種不同的模式呢?
接下來(lái)我們一起來(lái)探討下webpack中打包后代碼的原理
正文開(kāi)始...
初始化基礎(chǔ)項(xiàng)目
新建一個(gè)文件夾webpack-05-module,
npm init -y
我們安裝項(xiàng)目一些基礎(chǔ)支持的插件
npm i webpack webpack-cli webpack-dev-server html-webpack-plugin babel-loader @babel
l/core -D
在根目錄新建webpack.config.js,配置相關(guān)參數(shù),為了測(cè)試webpack打包c(diǎn)js與esModule我在entry寫(xiě)了兩個(gè)入口文件,并且設(shè)置mode:development與devtool: 'source-map',設(shè)置source-map是為了更好的查看源代碼
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
module.exports = {
entry: {
cjs: './src/commonjs_index.js',
esjs: './src/esmodule_index.js'
},
devtool: 'source-map',
output: {
filename: 'js/[name].js',
path: path.resolve(__dirname, 'dist'),
assetModuleFilename: 'images/[name][ext]'
},
mode: 'development',
module: {
rules: [
{
test: /\.js$/,
loader: 'babel-loader',
options: {
presets: ['@babel/env']
}
},
{
test: /\.(png|jpg)$/i,
type: 'asset/resource'
// generator: {
// // filename: 'images/[name][ext]',
// publicPath: '/assets/images/'
// }
}
]
},
plugins: [
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
template: './public/index.html'
})
]
};
在src目錄下新建commonjs_index.js, esmodule_index.js文件
commonjs_index.js
// commonjs_index.js
const { twoSum } = require('./utils/common.js');
import imgSrc from './assets/images/1.png';
console.log('cm_sum=' + twoSum(1, 2));
const domApp = document.getElementById('app');
var img = new Image();
img.src = imgSrc;
domApp.appendChild(img);
引入的common.js
// utils/common.js
function twoSum(a, b) {
return a + b;
}
module.exports = {
twoSum
};
esmodule_index.js
// esmodule_index.js
import twoSumMul from './utils/esmodule.js';
console.log('es_sum=' + twoSumMul(2, 2));
引入的esmodule.js
// utils/esmodule.js
function twoSumMul(a, b) {
return a * b;
}
// esModule
export default twoSumMul;
當(dāng)我們運(yùn)行npm run build命令,會(huì)在根目錄dist/js文件夾下打包入口指定的兩個(gè)文件
webpack打包c(diǎn)js最終代碼
我把對(duì)應(yīng)注釋去掉后就是下面這樣的
// cjs.js
(() => {
var __webpack_modules__ = {
'./src/utils/common.js': (module) => {
function twoSum(a, b) {
return a + b;
}
module.exports = {
twoSum: twoSum
};
},
'./src/assets/images/1.png': (module, __unused_webpack_exports, __webpack_require__) => {
'use strict';
module.exports = __webpack_require__.p + 'images/1.png';
}
};
var __webpack_module_cache__ = {};
function __webpack_require__(moduleId) {
var cachedModule = __webpack_module_cache__[moduleId];
if (cachedModule !== undefined) {
return cachedModule.exports;
}
var module = (__webpack_module_cache__[moduleId] = {
exports: {}
});
__webpack_modules__[moduleId](module, module.exports, __webpack_require__ "moduleId");
return module.exports;
}
(() => {
__webpack_require__.g = (function () {
if (typeof globalThis === 'object') return globalThis;
try {
return this || new Function('return this')();
} catch (e) {
if (typeof window === 'object') return window;
}
})();
})();
(() => {
__webpack_require__.r = (exports) => {
if (typeof Symbol !== 'undefined' && Symbol.toStringTag) {
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
}
Object.defineProperty(exports, '__esModule', { value: true });
};
})();
(() => {
var scriptUrl;
if (__webpack_require__.g.importScripts) scriptUrl = __webpack_require__.g.location + '';
var document = __webpack_require__.g.document;
if (!scriptUrl && document) {
if (document.currentScript) scriptUrl = document.currentScript.src;
if (!scriptUrl) {
var scripts = document.getElementsByTagName('script');
if (scripts.length) scriptUrl = scripts[scripts.length - 1].src;
}
}
if (!scriptUrl) throw new Error('Automatic publicPath is not supported in this browser');
scriptUrl = scriptUrl
.replace(/#.*$/, '')
.replace(/\?.*$/, '')
.replace(/\/[^\/]+$/, '/');
__webpack_require__.p = scriptUrl + '../';
})();
var __webpack_exports__ = {};
(() => {
'use strict';
__webpack_require__.r(__webpack_exports__);
var _assets_images_1_png__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./assets/images/1.png */ './src/assets/images/1.png');
var _require = __webpack_require__(/*! ./utils/common.js */ './src/utils/common.js'),
twoSum = _require.twoSum;
console.log('cm_sum=' + twoSum(1, 2));
var domApp = document.getElementById('app');
var img = new Image();
img.src = _assets_images_1_png__WEBPACK_IMPORTED_MODULE_0__;
domApp.appendChild(img);
})();
})();
初次看,感覺(jué)webpack打包c(diǎn)js的代碼太長(zhǎng)了,但是刪除掉注釋后,我們仔細(xì)分析發(fā)現(xiàn),并沒(méi)有那么復(fù)雜
首先是該模塊采用IFEE模式,一個(gè)匿名的自定義自行函數(shù)內(nèi)包裹了幾大塊區(qū)域
1、初始化定義了webpack依賴(lài)的模塊
var __webpack_modules__ = {
'./src/utils/common.js': (module) => {
function twoSum(a, b) {
return a + b;
}
// 當(dāng)在執(zhí)行時(shí),返回這個(gè)具體函數(shù)體內(nèi)容
module.exports = {
twoSum: twoSum
};
},
'./src/assets/images/1.png': (module, __unused_webpack_exports, __webpack_require__) => {
'use strict';
// 每一個(gè)對(duì)應(yīng)的模塊對(duì)應(yīng)的內(nèi)容
module.exports = __webpack_require__.p + 'images/1.png';
}
};
我們發(fā)現(xiàn)webpack是用模塊引入的路徑當(dāng)成key,然后value就是一個(gè)函數(shù),函數(shù)體內(nèi)就是引入的具體代碼內(nèi)容,并且內(nèi)部傳入了一個(gè)形參module,實(shí)際上這個(gè)module就是為{exports: {}}定義的對(duì)象,把內(nèi)部函數(shù)twoSum綁定了在對(duì)象上
2、調(diào)用模塊優(yōu)先從緩存對(duì)象模塊取值
var __webpack_module_cache__ = {};
// moduleId 就是引入的路徑
function __webpack_require__(moduleId) {
// 根據(jù)moduleId優(yōu)先從緩存中獲取__webpack_modules__中綁定的值 {twoSum: TwoSum}
var cachedModule = __webpack_module_cache__[moduleId];
if (cachedModule !== undefined) {
return cachedModule.exports;
}
// 傳入__webpack_modules__內(nèi)部value的形參 module
var module = (__webpack_module_cache__[moduleId] = {
exports: {}
});
__webpack_modules__[moduleId](module, module.exports, __webpack_require__ "moduleId");
// 根據(jù)moduleId依次返回 {twoSum: twoSum}、__webpack_require__.p + 'images/1.png‘圖片路徑
return module.exports;
}
3、綁定全局對(duì)象,引入圖片的資源路徑,主要是__webpack_require__.p圖片地址
(() => {
__webpack_require__.g = (function () {
if (typeof globalThis === 'object') return globalThis;
try {
return this || new Function('return this')();
} catch (e) {
if (typeof window === 'object') return window;
}
})();
})();
(() => {
var scriptUrl;
if (__webpack_require__.g.importScripts) scriptUrl = __webpack_require__.g.location + '';
var document = __webpack_require__.g.document;
if (!scriptUrl && document) {
if (document.currentScript) scriptUrl = document.currentScript.src;
if (!scriptUrl) {
var scripts = document.getElementsByTagName('script');
if (scripts.length) scriptUrl = scripts[scripts.length - 1].src;
}
}
if (!scriptUrl) throw new Error('Automatic publicPath is not supported in this browser');
scriptUrl = scriptUrl
.replace(/#.*$/, '')
.replace(/\?.*$/, '')
.replace(/\/[^\/]+$/, '/');
// 獲取圖片路徑
__webpack_require__.p = scriptUrl + '../';
})();
4、將esModule轉(zhuǎn)換,用Object.defineProperty攔截exports(module.exports)對(duì)象添加__esModule屬性
(() => {
__webpack_require__.r = (exports) => {
if (typeof Symbol !== 'undefined' && Symbol.toStringTag) {
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
}
Object.defineProperty(exports, '__esModule', { value: true });
};
})();
5、__webpack_require__(moduleId)執(zhí)行獲取對(duì)應(yīng)的內(nèi)容
var __webpack_exports__ = {};
(() => {
'use strict';
// 在步驟4中做對(duì)象攔截,添加__esMoules屬性
__webpack_require__.r(__webpack_exports__);
//根據(jù)路徑獲取對(duì)應(yīng)module.exports的內(nèi)容也就是__webpack_require__中的module.exports對(duì)象的數(shù)據(jù)
var _assets_images_1_png__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./assets/images/1.png */ './src/assets/images/1.png');
var _require = __webpack_require__(/*! ./utils/common.js */ './src/utils/common.js'),
twoSum = _require.twoSum;
console.log('cm_sum=' + twoSum(1, 2));
var domApp = document.getElementById('app');
var img = new Image();
img.src = _assets_images_1_png__WEBPACK_IMPORTED_MODULE_0__;
domApp.appendChild(img);
})();
})();
webpack打包esModule最終代碼
我們看下具體代碼
// esjs.js
(() => {
// webpackBootstrap
'use strict';
var __webpack_modules__ = {
'./src/utils/esmodule.js': (__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
__webpack_require__.r(__webpack_exports__);
function twoSumMul(a, b) {
return a * b;
}
const __WEBPACK_DEFAULT_EXPORT__ = twoSumMul;
__webpack_require__.d(__webpack_exports__, {
default: () => __WEBPACK_DEFAULT_EXPORT__
});
}
};
// The module cache
var __webpack_module_cache__ = {};
// The require function
function __webpack_require__(moduleId) {
// Check if module is in cache
var cachedModule = __webpack_module_cache__[moduleId];
if (cachedModule !== undefined) {
return cachedModule.exports;
}
// Create a new module (and put it into the cache)
var module = (__webpack_module_cache__[moduleId] = {
// no module.id needed
// no module.loaded needed
exports: {}
});
// Execute the module function
__webpack_modules__[moduleId](module, module.exports, __webpack_require__ "moduleId");
// Return the exports of the module
return module.exports;
}
(() => {
// define getter functions for harmony exports
__webpack_require__.d = (exports, definition) => {
for (var key in definition) {
if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
}
}
};
})();
/* webpack/runtime/hasOwnProperty shorthand */
(() => {
__webpack_require__.o = (obj, prop) => Object.prototype.hasOwnProperty.call(obj, prop);
})();
/* webpack/runtime/make namespace object */
(() => {
// define __esModule on exports
__webpack_require__.r = (exports) => {
if (typeof Symbol !== 'undefined' && Symbol.toStringTag) {
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
}
Object.defineProperty(exports, '__esModule', { value: true });
};
})();
/************************************************************************/
var __webpack_exports__ = {};
(() => {
__webpack_require__.r(__webpack_exports__);
var _utils_esmodule_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./utils/esmodule.js */ './src/utils/esmodule.js');
console.log('es_sum=' + (0, _utils_esmodule_js__WEBPACK_IMPORTED_MODULE_0__['default'])(2, 2));
})();
})();
看著代碼似乎與cjs大體差不多,事實(shí)上有些不一樣
當(dāng)我們執(zhí)行_utils_esmodule_js__WEBPACK_IMPORTED_MODULE_0__這個(gè)方法時(shí),實(shí)際會(huì)在__webpack_modules__方法會(huì)根據(jù)moduleId執(zhí)行value值的函數(shù)體,而函數(shù)體會(huì)被__webpack_require__.d這個(gè)方法進(jìn)行攔截,會(huì)執(zhí)行 Object.defineProperty的get方法,返回綁定在__webpack_exports__對(duì)象的值上
主要看以下兩段代碼
var __webpack_modules__ = {
'./src/utils/esmodule.js': (__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
// 這里定義模塊時(shí)就已經(jīng)先進(jìn)行了攔截,這里與cjs有很大的區(qū)別
__webpack_require__.r(__webpack_exports__);
function twoSumMul(a, b) {
return a * b;
}
const __WEBPACK_DEFAULT_EXPORT__ = twoSumMul;
__webpack_require__.d(__webpack_exports__, {
default: () => __WEBPACK_DEFAULT_EXPORT__
});
}
};
...
(() => {
// define getter functions for harmony exports
__webpack_require__.d = (exports, definition) => {
for (var key in definition) {
if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
}
}
};
})();
在webpack轉(zhuǎn)換esModule代碼中,同樣會(huì)是有優(yōu)先從緩存對(duì)象中獲取,通過(guò)調(diào)用 __webpack_modules__[moduleId](module, module.exports, __webpack_require__ "moduleId"); 這個(gè)方法,改變module.exports根據(jù)moduleId獲取函數(shù)體內(nèi)的值twoSumMul函數(shù)
最后畫(huà)了一張簡(jiǎn)易的圖,文字理解還是有點(diǎn)多,紙上得來(lái)終學(xué)淺,絕知此事要躬行,還是得寫(xiě)個(gè)簡(jiǎn)單的demo自己深深體會(huì)下,具體參考文末的code example
總結(jié)
webpack打包c(diǎn)js與esModule的區(qū)別,本質(zhì)上就是為了在瀏覽器支持webpack中使用export default {}與module.exports 在瀏覽器定義了一個(gè)全局變量__webpack_modules__根據(jù)引入的模塊路徑變成key,value就是在webpack中的cjs或者esModule中函數(shù)體。
當(dāng)我們?cè)赾js使用require('/path')、或者在esModule中使用import xx from '/path'時(shí),實(shí)際上webpack把requireorimport轉(zhuǎn)變成了一個(gè)定義的函數(shù)__webpack_require__('moduleId')的可執(zhí)行函數(shù)。
cjs是在執(zhí)行__webpack_require__.r(__webpack_exports__)是就已經(jīng)預(yù)先將__webpack_require__返回的函數(shù)體內(nèi)容進(jìn)行了綁定,只有在執(zhí)行_webpack_require__(/*! ./utils/common.js */ './src/utils/common.js')返回函數(shù)體,本質(zhì)上就是在運(yùn)行時(shí)執(zhí)行
esMoule實(shí)際上是在定義時(shí)就已經(jīng)進(jìn)行了綁定,在定義__webpack_exports__時(shí),執(zhí)行了 __webpack_require__.r(__webpack_exports__);動(dòng)態(tài)添加__esModule屬性,根據(jù)moduleId定義模塊時(shí),執(zhí)行了 __webpack_require__.d(__webpack_exports__, { default: () => __WEBPACK_DEFAULT_EXPORT__});,將對(duì)應(yīng)模塊函數(shù)體會(huì)直接用對(duì)象攔截執(zhí)行Object.defineProperty的get方法,執(zhí)行definition[key]從而返回函數(shù)體。本質(zhì)上就是在編譯前執(zhí)行,而不是像cjs一樣在函數(shù)體執(zhí)行階段直接輸出對(duì)應(yīng)內(nèi)容。
他們相同點(diǎn)就是優(yōu)先會(huì)從緩存__webpack_module_cache__對(duì)象中根據(jù)moduleId直接獲取對(duì)應(yīng)的可執(zhí)行函數(shù)體
本文code example[1]
參考資料
[1]
code example:
https://github.com/maicFir/lessonNote/tree/master/webpack/webpack-05-module
作者:Maic
歡迎關(guān)注微信公眾號(hào) :web技術(shù)學(xué)苑