Webpack編譯結果淺析

来源:https://www.cnblogs.com/imwtr/archive/2018/10/11/9770135.html
-Advertisement-
Play Games

如今Webpack已經是一個不可或缺的前端構建工具，藉助這個構建工具，我們可以使用比較新的技術（瀏覽器不能直接支持）來開發。 你是否好奇你寫的代碼經過Webpack構建之後會生成什麼東西？是否有時調試遇到莫名其妙的問題？ 本文不講如何進行配置，只是基於幾個基礎的例子，簡要分析一下 webpack@4 ...


如今Webpack已經是一個不可或缺的前端構建工具，藉助這個構建工具，我們可以使用比較新的技術（瀏覽器不能直接支持）來開發。

你是否好奇你寫的代碼經過Webpack構建之後會生成什麼東西？是否有時調試遇到莫名其妙的問題？

本文不講如何進行配置，只是基於幾個基礎的例子，簡要分析一下 [email protected] 構建後的代碼結構，當然了，並不全面，時間問題能力問題還不能理解到位。

代碼比較長，生成的代碼也比較晦澀比較繞，也可能條理不順，客官坐好咧~

 

 

 

一、Webpack的運行機制

Webpack的運行過程實際上可以歸納為這個步驟

讀取配置參數 -> 相關事件綁定（插件參與） ->  識別各入口Entry模塊 -> 編譯文件（loader參與）-> 生成文件

首先讀取我們的配置文件如 webpack.config.js，然後事件流就參與進來綁定相關的事件，Webpack中的事件使用 Tapable 來管理，在這一階段，除了綁定webpack內置的一大堆事件之外，還支持自定義的一些事件處理。

配置中的 plugins部分，實際上也可以看作是一些自定義的事件處理，因為插件將在定義的”相關時刻“插入到編譯過程中處理資源，這裡的”相關時刻“指的就是 訂閱-發佈 模式中的發佈環節

webpack支持多個入口模塊，所以還需要進行各入口模塊的分析（這裡的入口模塊只能為JS模塊），比如以下兩個入口模塊

分析完入口模塊，接下來分析該模塊的依賴，並使用相關loader進行編譯（如果需要loader的話），真正的編譯環節是在這裡。

期間會使用AST抽象語法樹來分析語法，直到編譯完成，輸出到相應的文件中

可以來看看這篇文章 Webpack運行機制

 

二、Webpack編譯結果

由最簡單的例子開始

2.1 無依賴的單個模塊

./main.js

console.log('main');

./webpack.config.js

module.exports = {
    // entry: './main',
    entry: {
        main: './main'
    },

    mode: 'none',

    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].js'
    }
};

註意，在webpack4中預設的mode對 development和production進行了一些特殊配置，為了簡化，這裡就設置成none

編譯一個文件，將在dist目錄中生成

./dist/main.js

 1 /******/ (function(modules) { // webpackBootstrap
 2 /******/     // The module cache
 3 /******/     var installedModules = {};
 4 /******/
 5 /******/     // The require function
 6 /******/     function __webpack_require__(moduleId) {
 7 /******/
 8 /******/         // Check if module is in cache
 9 /******/         if(installedModules[moduleId]) {
10 /******/             return installedModules[moduleId].exports;
11 /******/         }
12 /******/         // Create a new module (and put it into the cache)
13 /******/         var module = installedModules[moduleId] = {
14 /******/             i: moduleId,
15 /******/             l: false,
16 /******/             exports: {}
17 /******/         };
18 /******/
19 /******/         // Execute the module function
20 /******/         modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
21 /******/
22 /******/         // Flag the module as loaded
23 /******/         module.l = true;
24 /******/
25 /******/         // Return the exports of the module
26 /******/         return module.exports;
27 /******/     }
28 /******/
29 /******/
30 /******/     // expose the modules object (__webpack_modules__)
31 /******/     __webpack_require__.m = modules;
32 /******/
33 /******/     // expose the module cache
34 /******/     __webpack_require__.c = installedModules;
35 /******/
36 /******/     // define getter function for harmony exports
37 /******/     __webpack_require__.d = function(exports, name, getter) {
38 /******/         if(!__webpack_require__.o(exports, name)) {
39 /******/             Object.defineProperty(exports, name, { enumerable: true, get: getter });
40 /******/         }
41 /******/     };
42 /******/
43 /******/     // define __esModule on exports
44 /******/     __webpack_require__.r = function(exports) {
45 /******/         if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
46 /******/             Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
47 /******/         }
48 /******/         Object.defineProperty(exports, '__esModule', { value: true });
49 /******/     };
50 /******/
51 /******/     // create a fake namespace object
52 /******/     // mode & 1: value is a module id, require it
53 /******/     // mode & 2: merge all properties of value into the ns
54 /******/     // mode & 4: return value when already ns object
55 /******/     // mode & 8|1: behave like require
56 /******/     __webpack_require__.t = function(value, mode) {
57 /******/         if(mode & 1) value = __webpack_require__(value);
58 /******/         if(mode & 8) return value;
59 /******/         if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
60 /******/         var ns = Object.create(null);
61 /******/         __webpack_require__.r(ns);
62 /******/         Object.defineProperty(ns, 'default', { enumerable: true, value: value });
63 /******/         if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
64 /******/         return ns;
65 /******/     };
66 /******/
67 /******/     // getDefaultExport function for compatibility with non-harmony modules
68 /******/     __webpack_require__.n = function(module) {
69 /******/         var getter = module && module.__esModule ?
70 /******/             function getDefault() { return module['default']; } :
71 /******/             function getModuleExports() { return module; };
72 /******/         __webpack_require__.d(getter, 'a', getter);
73 /******/         return getter;
74 /******/     };
75 /******/
76 /******/     // Object.prototype.hasOwnProperty.call
77 /******/     __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
78 /******/
79 /******/     // __webpack_public_path__
80 /******/     __webpack_require__.p = "";
81 /******/
82 /******/
83 /******/     // Load entry module and return exports
84 /******/     return __webpack_require__(__webpack_require__.s = 0);
85 /******/ })
86 /************************************************************************/
87 /******/ ([
88 /* 0 */
89 /***/ (function(module, exports) {
90 
91 
92 console.log('main');
93 
94 
95 /***/ })
96 /******/ ]);

可以看到首先是一個匿名函數，在87行時自執行傳入

[
/* 0 */
/***/ (function(module, exports) {


console.log('main');


/***/ })
/******/ ]

這個是modules，表示有一個模塊需要載入

第3行使用 installedModules 來緩存已經載入的模塊

webpack由最初支持 commonjs模塊規範，到後來要支持es6的模塊等，為了相容不同的模塊機制，定義了一個 __webpack_require__ 函數作為webpack內部的require

/******/     // 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, // 模塊ID
/******/             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; // 返回模塊的導出項目
/******/     }

其中，這個調用非常重要

modules[moduleId].call(module.exports, module, module.exports, __webpack_require__)

結合匿名函數傳入的參數來看，modules[moduleId] 其實就是這個

(function(module, exports) {


console.log('main');


/***/ })

第一個參數 module.exports 實際上就是上面模塊的導出項，是為了保證this能正確地指向module，第二第三個參數按著順序來，第四個參數一般用於依賴

因為這裡 main.js沒有依賴其他模塊，所以沒有傳進來

最後 return module.exports; 實際上就是返回了模塊的導出項，在上面的84行中，入口模塊被引入 。從而自動地載入第一個模塊並執行

return __webpack_require__(__webpack_require__.s = 0); // __webpack_require__.s為入口文件，此處引用模塊ID

另外再看其它代碼，

/******/     // expose the modules object (__webpack_modules__)
/******/     __webpack_require__.m = modules; // 將模塊存起來
/******/
/******/     // expose the module cache
/******/     __webpack_require__.c = installedModules; // 將已經載入的模塊存起來

/******/     // __webpack_public_path__
/******/     __webpack_require__.p = ""; // 設置的 publicPath

這裡沒什麼可說的，這裡的publicPath對應於 output中的配置，如

output: {
        publicPath: './dist/',
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].js'
    },

另外

/******/     // 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 });
/******/     };

/******/     // Object.prototype.hasOwnProperty.call
/******/     __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };

這裡 __webpack_require__.o 這裡只是hasOwnProperty的包裝

__webpack_require__.d 這裡是對exports定義一個屬性（當前模塊未用到，暫且如此，理解不到位）

__webpack_require__.r 這裡是對es6模塊中的export的支持（當前模塊未用到，暫且如此，理解不到位）

還有這個，這個就更難理解了

/******/     // 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;
/******/     };

__webpack_require__.t 暫時不說明瞭，還看不懂怎麼調用的..

__webpack_require__.n 這個主要也是為 es6模塊服務的，也沒能理解好，知道的可以在評論區留言哈~

 

2. 有依賴的單個模塊

先使用最基礎的commonjs模塊規範  require, exports ，module.exports 有助於理解上面那個模塊的導出項目

./main.js

let number = require('./number');

console.log('main', number);

 

./number.js

let n = 10;

exports.n = n;

編譯後，生成的文件變化的只是匿名函數傳入的部分

./dist/main.js

// 省略

/******/ ([
/* 0 */
/***/ (function(module, exports, __webpack_require__) {


let number = __webpack_require__(1);

console.log('main', number);


/***/ }),
/* 1 */
/***/ (function(module, exports) {


let n = 10;

exports.n = n;


/***/ })
/******/ ]);

註意到前面的數字即是模塊的ID,也可圖中的一致

這裡__webpack_require__參數被傳進來，main.js中引入number這個模塊 __webpack_require__(1);

number模塊中 exports.n = n，註意這裡的 exports即是調用時的第二個參數

modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);

所以此時 n屬性被存入module的export導出項中，從而__webpack_require__(1) 就能獲取這個導出項

 

換種方式，使用es6的模塊導出

更改 ./number.js

let n = 10;

export {
    n
};

編譯後 ./dist/main.js

/******/ ([
/* 0 */
/***/ (function(module, exports, __webpack_require__) {


let number = __webpack_require__(1);

console.log('main', number);


/***/ }),
/* 1 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "n", function() { return n; });

let n = 10;




/***/ })
/******/ ]);

可以看到模塊1變了，為了相容 export ，使用 __webpack_require__.r 定義了它為es6模塊，再使用__webpack_require__.d 將 n保存到模塊的導出項中

__webpack_require__.d 函數中的 getter即為 這裡的 function() { return n; }，通過設置為對象的get屬性，可以獲取到 n這個返回值

var o = {};

Object.defineProperty(o, 'abc', {
    get: function() {
        return 123;
    }
});

console.log(o.abc); // 123

所以將 let n = 10 定義在後面也是沒問題的，因為getter是在number模塊被調用返回之後才使用的

 

接著，我們把引入依賴文件改為import

./main.js

import {n} from './number';

console.log('main', n);

編譯後 ./dist/main.js

/******/ ([
/* 0 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony import */ var _number__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(1);



console.log('main', _number__WEBPACK_IMPORTED_MODULE_0__["n"]);


/***/ }),
/* 1 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "n", function() { return n; });

let n = 10;




/***/ })
/******/ ]);

同樣的，這時main模塊用到了es6的模塊引入方式，所以 __webpack_require__.r(__webpack_exports__);

var _number__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(1);

這個 __webpack_require__(1) 實際上就是 number模塊的模塊導出項，自然就能取到屬性 n 了

 

接下來，著眼那個 default字眼，繼續更換模塊的導入導出方式

./main.js

import n from './number';

console.log('main', n);

./number.js

let n = 10;

export default n;

./dist/main.js

/******/ ([
/* 0 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony import */ var _number__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(1);



console.log('main', _number__WEBPACK_IMPORTED_MODULE_0__["default"]);


/***/ }),
/* 1 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
__webpack_require__.r(__webpack_exports__);

let n = 10;

/* harmony default export */ __webpack_exports__["default"] = (n);


/***/ })
/******/ ]);

可以看到，變化只是屬性變成了default

 

再來一種 es6的方式

./main.js

import n from './number';

console.log('main', n);

 

./number.js

import {str as n} from './str';

export default n;

 

./str.js

export var str = 10;

 

編譯後

./dist/main.js

/******/ ([
/* 0 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony import */ var _number__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(1);



console.log('main', _number__WEBPACK_IMPORTED_MODULE_0__["default"]);


/***/ }),
/* 1 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony import */ var _str__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(2);



/* harmony default export
您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 定時備份 MySQL 並上傳到七牛
    多數應用場景下，我們需要對重要數據進行備份、並放置到一個安全的地方，以備不時之需。 常見的 MySQL 數據備份方式有，直接打包複製對應的資料庫或表文件(物理備份)、mysqldump 全量邏輯備份、xtrabackup 增量邏輯備份等。 常見的數據存儲方式有，本機存儲、FTP 上傳到遠程伺服器... ...
  • Apache Spark開發介紹
    Databricks的工程師，Apache Spark Committer介紹了Databricks和Spark的歷史，包括了Spark 1.4中的重要特性和進展，涵蓋了Spark早期版本的主要功能和使用方法，講了大數據領域近些年的發展，也介紹了Spark從這些年其它理論或者技術中吸取的靈感，當然， ...
  • VR一體機如何退出FFBM(QFIL)
    本文介紹了無法通過fastboot擦除misc分區時，利用QFIL工具退出FFBM的詳細步驟。 ...
  • Android6.0 源碼修改之屏蔽系統簡訊功能和來電功能
    一、屏蔽系統簡訊功能 1、屏蔽所有簡訊 android 4.2 簡訊發送流程分析可參考這篇 [戳這][1] 源碼位置 vendor\mediatek\proprietary\packages\apps\Mms\src\com\android\mms\transaction\SmsReceiverSe ...
  • 5步告訴你QQ音樂的完美音質是怎麼來的，播放器的秘密都在這裡
    歡迎大家前往 "騰訊雲+社區" ，獲取更多騰訊海量技術實踐乾貨哦~ 本文由 "QQ音樂技術團隊" 發表於 "雲+社區專欄" 一、問題背景與分析 不久前，團隊發現其Android平臺App在播放MV視頻《鳳凰花開的路口》時，會帶有如電流聲一般的雜音，這影響了用戶體驗。 研發同學在初步定位時，發現有如下 ...
  • Android P的APP適配總結，讓你快人一步
    歡迎大家前往 "騰訊雲+社區" ，獲取更多騰訊海量技術實踐乾貨哦~ 本文由 "QQ音樂技術團隊" 發表於 "雲+社區專欄" 上篇：Android P 行為變更適配 Android P 這次有很多行為變更，其中不乏一些需要亟需適配的變更。 一、全面屏檢測 在 Android 8.0 時代各個手機廠商就 ...
  • 前端學習日記-小程式篇
    測試內容 ...
  • 相容性問題的解決方式（更新中···）
    1、清除浮動的相容性（低版本的瀏覽器不相容問題） .clearfix:after{ content:""; clear:both; display:block; visibility:hidden; height:0; } .clear{ *zoom:1; } 2、透明度的相容性 opacity:0 ...
一周排行
    -Advertisement-
    Play Games
  • WPF 已知問題 監聽 WMI 事件導致觸摸失效
    示例項目結構 在 Visual Studio 中創建一個 WinForms 應用程式後，項目結構如下所示： MyWinFormsApp/ │ ├───Properties/ │ └───Settings.settings │ ├───bin/ │ ├───Debug/ │ └───Release/ ...
  • [STAThread]特性
    [STAThread] 特性用於需要與 COM 組件交互的應用程式，尤其是依賴單線程模型（如 Windows Forms 應用程式）的組件。在 STA 模式下，線程擁有自己的消息迴圈，這對於處理用戶界面和某些 COM 組件是必要的。 [STAThread] static void Main(stri ...
  • UWP WinUI3 傳入 AddHandler 的 RoutedEventHandler 類型與事件所需不匹配將拋出參數異常
    在WinForm中使用全局異常捕獲處理 在WinForm應用程式中，全局異常捕獲是確保程式穩定性的關鍵。通過在Program類的Main方法中設置全局異常處理，可以有效地捕獲並處理未預見的異常，從而避免程式崩潰。 註冊全局異常事件 [STAThread] static void Main() { / ...
  • .NET 多版本 WinForm 開源控制項庫 SunnyUI
    前言 給大家推薦一款開源的 Winform 控制項庫，可以幫助我們開發更加美觀、漂亮的 WinForm 界面。 項目介紹 SunnyUI.NET 是一個基於 .NET Framework 4.0+、.NET 6、.NET 7 和 .NET 8 的 WinForm 開源控制項庫，同時也提供了工具類庫、擴展 ...
  • .net core8 使用Swagger（附當前源碼）
    說明 該文章是屬於OverallAuth2.0系列文章，每周更新一篇該系列文章（從0到1完成系統開發）。 該系統文章，我會儘量說的非常詳細，做到不管新手、老手都能看懂。 說明：OverallAuth2.0 是一個簡單、易懂、功能強大的許可權+可視化流程管理系統。 有興趣的朋友，請關註我吧(*^▽^*) ...
  • WPF 什麼時候 VisualTreeHelper.GetDescendantBounds 將返回無窮大
    一、下載安裝 1.下載git 必須先下載並安裝git，再TortoiseGit下載安裝 git安裝參考教程：https://blog.csdn.net/mukes/article/details/115693833 2.TortoiseGit下載與安裝 TortoiseGit，Git客戶端，32/6 ...
  • C# 開源教程帶你輕鬆掌握數據結構與演算法
    前言 在項目開發過程中，理解數據結構和演算法如同掌握蓋房子的秘訣。演算法不僅能幫助我們編寫高效、優質的代碼，還能解決項目中遇到的各種難題。 給大家推薦一個支持C#的開源免費、新手友好的數據結構與演算法入門教程：Hello演算法。 項目介紹 《Hello Algo》是一本開源免費、新手友好的數據結構與演算法入門 ...
  • 第22篇 生成proto文件bat腳本
    1.生成單個Proto.bat內容 @rem Copyright 2016, Google Inc. @rem All rights reserved. @rem @rem Redistribution and use in source and binary forms, with or with ...
  • 記一次 .NET某上位機視覺程式 卡死分析
    一：背景 1. 講故事 前段時間有位朋友找到我，說他的窗體程式在客戶這邊出現了卡死，讓我幫忙看下怎麼回事？dump也生成了，既然有dump了那就上 windbg 分析吧。 二：WinDbg 分析 1. 為什麼會卡死 窗體程式的卡死，入口門檻很低，後續往下分析就不一定了，不管怎麼說先用 !clrsta ...
  • 醫學DICOM文件與PACS系統進行數據傳輸
    前言 人工智慧時代，人臉識別技術已成為安全驗證、身份識別和用戶交互的關鍵工具。 給大家推薦一款.NET 開源提供了強大的人臉識別 API，工具不僅易於集成，還具備高效處理能力。 本文將介紹一款如何利用這些API，為我們的項目添加智能識別的亮點。 項目介紹 GitHub 上擁有 1.2k 星標的 C# ...
所有分類