模塊化機制

webpack并不強制你使用某種模塊化方案，而是通過兼容所有模塊化方案讓你無痛接入項目。有了webpack，你可以隨意選擇你喜歡的模塊化方案，至于怎么處理模塊之間的依賴關系及如何按需打包，webpack會幫你處理好的。

關于模塊化的一些內容，可以看看我之前的文章：js的模塊化進程
核心思想：

一切皆模塊：
正如js文件可以是一個“模塊（module）”一樣，其他的（如css、image或html）文件也可視作模 塊。因此，你可以require(‘myJSfile.js’)亦可以require(‘myCSSfile.css’)。這意味著我們可以將事物（業務）分割成更小的易于管理的片段，從而達到重復利用等的目的。
按需加載：
傳統的模塊打包工具（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;

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

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

總結

以上是生活随笔為你收集整理的浅谈webpack打包原理的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。