超詳細！webpack 4 編譯後代碼解讀
背景
因爲網上的總結看到的webpack2, 因此想看下webpack4下的編譯結果，配置：webpack
mode:「development」web
dvetool: "inline-source-map"。數組
示例
一個簡單的實例，後面會逐行進行解讀，a是入口文件，依賴b和c模塊。緩存
a.js
import b from './b'
import c from './c'
console.log(b.name)
console.log(c.name)
複製代碼
b.js
console.log('module b runs')
export default {
name: 'b'
}
複製代碼
c.js
import b from './b'
export default {
name: 'c'
}
複製代碼
編譯後代碼
/******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
/******/
/******/ // 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,
/******/ 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;
/******/ }
/******/
/******/
/******/ // expose the modules object (__webpack_modules__)
/******/ __webpack_require__.m = modules;
/******/
/******/ // expose the module cache
/******/ __webpack_require__.c = installedModules;
/******/
/******/ // define getter function for harmony exports
/******/ __webpack_require__.d = function(exports, name, getter) {
/******/ if(!__webpack_require__.o(exports, name)) {
/******/ Object.defineProperty(exports, name, { enumerable: true, get: getter });
/******/ }
/******/ };
/******/
/******/ // define __esModule on exports
/******/ __webpack_require__.r = function(exports) {
/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
/******/ }
/******/ Object.defineProperty(exports, '__esModule', { value: true });
/******/ };
/******/
/******/ // create a fake namespace object
/******/ // 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 object
/******/ // 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 === 'object' && value && value.__esModule) return value;
/******/ var ns = Object.create(null);
/******/ __webpack_require__.r(ns);
/******/ Object.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;
/******/ };
/******/
/******/ // Object.prototype.hasOwnProperty.call
/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
/******/
/******/ // __webpack_public_path__
/******/ __webpack_require__.p = "";
/******/
/******/
/******/ // Load entry module and return exports
/******/ return __webpack_require__(__webpack_require__.s = "./a.js");
/******/ })
/************************************************************************/
/******/ ({
/***/ "./a.js":
/*!**************!*\
!*** ./a.js ***!
\**************/
/*! no exports provided */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony import */ var _b__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./b */ "./b.js");
/* harmony import */ var _c__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./c */ "./c.js");
console.log(_b__WEBPACK_IMPORTED_MODULE_0__["default"].name)
console.log(_c__WEBPACK_IMPORTED_MODULE_1__["default"].name)
/***/ }),
/***/ "./b.js":
/*!**************!*\
!*** ./b.js ***!
\**************/
/*! exports provided: default */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__);
console.log('module b runs')
const name = 'b';
/* harmony default export */ __webpack_exports__["default"] = ({
name
});
/***/ }),
/***/ "./c.js":
/*!**************!*\
!*** ./c.js ***!
\**************/
/*! exports provided: default */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony import */ var _b__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./b */ "./b.js");
/* harmony default export */ __webpack_exports__["default"] = ({
name: 'c'
});
/***/ })
/******/ });
//# sourceMappingURL=...
複製代碼
執行步驟
上述編譯後的代碼，能夠分爲幾個步驟，部分未使用到的代碼已忽略bash
當即執行函數
/******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
/******/
/******/ // 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,
/******/ l: false,
/******/ exports: {}
/******/ };
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/ // expose the modules object (__webpack_modules__)
/******/ __webpack_require__.m = modules;
/******/
/******/ // expose the module cache
/******/ __webpack_require__.c = installedModules;
/******/
/******/ // Load entry module and return exports
/******/ return __webpack_require__(__webpack_require__.s = "./a.js");
/******/ })()
複製代碼
1.聲明一個module緩存變量，對已加載的模塊不會重複執行。
/******/ // The module cache
/******/ var installedModules = {};
複製代碼
2. 聲明一個加載模塊的方法 __webpack_require__。核心方法，整個執行過程，__webpack_require__會不斷拓傳，數據都會存在這個函數的屬性上。
/******/ function __webpack_require__(moduleId) {
/******/ // Create a new module (and put it into the cache)
/******/ var module = installedModules[moduleId] = {
/******/ i: moduleId,
/******/ l: false,
/******/ exports: {}
/******/ };
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
複製代碼
3. 對上面的__webpack_require__添加一系列的屬性和方法，包括原始的modules對象，已加載的模塊installedModules等。
/******/ // expose the modules object (__webpack_modules__)
/******/ __webpack_require__.m = modules;
/******/
/******/ // expose the module cache
/******/ __webpack_require__.c = installedModules;
複製代碼
4. 執行第一個__webpack_require__，傳入的moduleId是入口文件的id，該示例是2。
/******/ // Load entry module and return exports
/******/ return __webpack_require__(__webpack_require__.s = 2);
複製代碼
5. __webpack_require__具體執行邏輯
- 判斷當前moduleId是否已加載過，已加載則直接return對應的module.exports
/******/ // Check if module is in cache
/******/ if(installedModules[moduleId]) return installedModules[moduleId].exports;
複製代碼
- 未加載，則建立一個新的module，並緩存。
******/ // Create a new module (and put it into the cache)
/******/ var module = installedModules[moduleId] = {
/******/ i: moduleId,
/******/ l: false, // 是否已執行
/******/ exports: {} // 存儲module的返回結果
/******/ };
複製代碼
- 開始執行具體代碼，this指向module.exports,傳入三個參數，新建的
module，module.exports,__webpack_require__。
/******/ // Execute the module function
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
複製代碼
- 進入a文件編譯後代碼,能夠看到，就是把文件a的代碼經過函數包起來，this指向上面聲明的module.exports
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__b__ = __webpack_require__(0);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__c__ = __webpack_require__(1);
console.log(__WEBPACK_IMPORTED_MODULE_0__b__["a" /* default */].name)
console.log(__WEBPACK_IMPORTED_MODULE_1__c__["a" /* default */].name)
/***/ })
複製代碼
- 定義當前模塊是es模塊，這一步該示例中沒用，留到後續分析。
__webpack_require__.r(__webpack_exports__);
複製代碼
- 開始加載b模塊，並在當前函數聲明一個變量，指向moduleB.exports。一樣也是使用
__webpack_require__，經過遞歸的方式，循環執行步驟5。（這裏的「harmony import」主要用於tree shaking，記錄是否未使用。）
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__b__ = __webpack_require__(0);
複製代碼
- 當依賴的模塊執行返回結果後，繼續執行剩餘的代碼。注意這裏調用的是模塊b和模塊c的a屬性，對應模塊的default。
console.log(__WEBPACK_IMPORTED_MODULE_0__b__["a" /* default */].name)
console.log(__WEBPACK_IMPORTED_MODULE_1__c__["a" /* default */].name)
複製代碼
與webpack2的區別
moduleId
修改了每一個模塊的索引方式，webpack2是一個數組，經過數組下標來標識。webpack4是一個對象,經過文件對應的路徑來做爲key。app
webpack_require.r
用於定義模塊的輸出方式ide
/******/ // define __esModule on exports
/******/ __webpack_require__.r = function(exports) {
/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
/******/ }
/******/ Object.defineProperty(exports, '__esModule', { value: true });
/******/ };
複製代碼
這裏使用了Symbol.toStringTag，來從新定義exports的類型。主要在Object.prototype.toString來區分類型的時候，會用到，打印出來會是 [object Module]。模塊化
而後添加通用標識__esMoudle，這一步webpack2也會有。函數
默認打包方式
webpack2默認是inline-source的方式編譯代碼。webapck4默認輸出的是壓縮後的線上代碼，同時會將三個文件代碼，合併在一塊兒。ui
總結
webpack編譯後，經過一個IIFE，來緩存加載模塊到installedModules。
每一個模塊都經過一個惟一的require函數進行加載:__webpack_require__。
經過入口文件進行相關依賴的逐次執行，每一個模塊傳入require函數生成的module對象，並將返回值賦值到module.exports。
這就是webpack模塊化的執行機制。
webpack的更多深刻功能，好比tree shaking， 代碼壓縮， loader加載其餘模塊，後續繼續瞭解。
相關文章
- 1. 超詳細的webpack原理解讀
- 2. 解讀 Babel 編譯後的 decorator 代碼
- 3. OGERE源代碼編譯超詳細步驟
- 4. JMX超詳細解讀
- 5. MemCache超詳細解讀
- 6. 堆（講解+代碼超詳細哦）
- 7. iptables超詳細解讀
- 8. tf-faster-rcnn 代碼詳細解讀
- 9. 4.Webpack詳解
- 10. VS2019編譯OpenCV3.4庫 C/C++ （超詳細）
- 更多相關文章...
- • XML 編碼 - XML 教程
- • Eclipse 編譯項目 - Eclipse 教程
- • JDK13 GA發佈：5大特性解讀
- • IntelliJ IDEA代碼格式化設置
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. vs2019運行opencv圖片顯示代碼時，窗口亂碼
- 2. app自動化 - 元素定位不到？別慌，看完你就能解決
- 3. 在Win8下用cisco ××× Client連接時報Reason 422錯誤的解決方法
- 4. eclipse快速補全代碼
- 5. Eclipse中Java/Html/Css/Jsp/JavaScript等代碼的格式化
- 6. idea+spring boot +mabitys(wanglezapin)+mysql (1)
- 7. 勒索病毒發生變種 新文件名將帶有「.UIWIX」後綴
- 8. 【原創】Python 源文件編碼解讀
- 9. iOS9企業部署分發問題深入瞭解與解決
- 10. 安裝pytorch報錯CondaHTTPError：******
歡迎關注本站公眾號,獲取更多信息
相關文章