淺談webpack打包原理

淺談webpack打包原理

模塊化機制

webpack並不強制你使用某種模塊化方案，而是經過兼容全部模塊化方案讓你無痛接入項目。有了webpack，你能夠隨意選擇你喜歡的模塊化方案，至於怎麼處理模塊之間的依賴關係及如何按需打包，webpack會幫你處理好的。

關於模塊化的一些內容，能夠看看我以前的文章：js的模塊化進程

核心思想：

1. 一切皆模塊： 
   正如js文件能夠是一個「模塊（module）」同樣，其餘的（如css、image或html）文件也可視做模 塊。所以，你能夠require(‘myJSfile.js’)亦能夠require(‘myCSSfile.css’)。這意味着咱們能夠將事物（業務）分割成更小的易於管理的片斷，從而達到重複利用等的目的。
2. 按需加載： 
   傳統的模塊打包工具（module bundlers）最終將全部的模塊編譯生成一個龐大的bundle.js文件。可是在真實的app裏邊，「bundle.js」文件可能有10M到15M之大可能會致使應用一直處於加載中狀態。所以Webpack使用許多特性來分割代碼而後生成多個「bundle」文件，並且異步加載部分代碼以實現按需加載。

文件管理

• 每一個文件都是一個資源，能夠用require/import導入js
• 每一個入口文件會把本身所依賴(即require)的資源所有打包在一塊兒，一個資源屢次引用的話，只會打包一份
• 對於多個入口的狀況，其實就是分別獨立的執行單個入口狀況，每一個入口文件不相干(可用CommonsChunkPlugin優化)

打包原理

把全部依賴打包成一個bundle.js文件，經過代碼分割成單元片斷並按需加載。

如圖，entry.js是入口文件，調用了util1.js和util2.js，而util1.js又調用了util2.js。

打包後的bundle.js例子

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

    __webpack_require__(1);     //require資源文件id
    __webpack_require__(2);

/***/ },
/* 1 */
/***/ function(module, exports, __webpack_require__) {
    //util1.js文件
    __webpack_require__(2);
    var util1=1;
    exports.util1=util1;

/***/ },
/* 2 */
/***/ function(module, exports) {
    //util2.js文件
    var util2=1;
    exports.util2=util2;

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

1. bundle.js是以模塊 id 爲記號，經過函數把各個文件依賴封裝達到分割效果，如上代碼 id 爲 0 表示 entry 模塊須要的依賴， 1 表示 util1模塊須要的依賴
2. require資源文件 id 表示該文件須要加載的各個模塊，如上代碼_webpack_require__(1) 表示 util1.js 模塊，__webpack_require__(2) 表示 util2.js 模塊
3. exports.util1=util1 模塊化的體現，輸出該模塊