現在前端用Webpack打包JS和其它文件已經是主流了，加上Node的流行，使得前端的工程方式和后端越來越像。所有的東西都模塊化，最后統一編譯。Webpack因為版本的不斷更新以及各種各樣紛繁復雜的配置選項，在使用中出現一些迷之錯誤常常讓人無所適從。所以了解一下Webpack究竟是怎么組織編譯模塊的，生成的代碼到底是怎么執行的，還是很有好處的，否則它就永遠是個黑箱。當然了我是前端小白，最近也是剛開始研究Webpack的原理，在這里做一點記錄。

編譯模塊

編譯兩個字聽起來就很黑科技，加上生成的代碼往往是一大坨不知所云的東西，所以常常會讓人卻步，但其實里面的核心原理并沒有什么難。所謂的Webpack的編譯，其實只是Webpack在分析了你的源代碼后，對其作出一定的修改，然后把所有源代碼統一組織在一個文件里而已。最后生成一個大的bundle JS文件，被瀏覽器或者其它Javascript引擎執行并返回結果。

在這里用一個簡單的案例來說明Webpack打包模塊的原理。例如我們有一個模塊mA.js

var aa = 1;function getDate() { return new Date();}module.exports = { aa: aa, getDate: getDate}

我隨便定義了一個變量aa和一個函數getDate，然后export出來，這里是用CommonJS的寫法。

然后再定義一個app.js，作為main文件，仍然是CommonJS風格：

var mA = require('./mA.js');console.log('mA.aa =' + mA.aa);mA.getDate();

現在我們有了兩個模塊，使用Webpack來打包，入口文件是app.js，依賴于模塊mA.js，Webpack要做幾件事情：

從入口模塊app.js開始，分析所有模塊的依賴關系，把所有用到的模塊都讀取進來。 每一個模塊的源代碼都會被組織在一個立即執行的函數里。 改寫模塊代碼中和require和export相關的語法，以及它們對應的引用變量。 在最后生成的bundle文件里建立一套模塊管理系統，能夠在runtime動態加載用到的模塊。

我們可以看一下上面這個例子，Webpack打包出來的結果。最后的bundle文件總的來說是一個大的立即執行的函數，組織層次比較復雜，大量的命名也比較晦澀，所以我在這里做了一定改寫和修飾，把它整理得盡量簡單易懂。

首先是把所有用到的模塊都羅列出來，以它們的文件名（一般是完整路徑）為ID，建立一張表：

var modules = { './mA.js': generated_mA, './app.js': generated_app}

關鍵是上面的generated_xxx是什么？它是一個函數，它把每個模塊的源代碼包裹在里面，使之成為一個局部的作用域，從而不會暴露內部的變量，實際上就把每個模塊都變成一個執行函數。它的定義一般是這樣：

function generated_module(module, exports, webpack_require) {  // 模塊的具體代碼。  // ...}