新手向 Webpack 完全攻略 (3) – Webpack 不是黑魔法

在上一章我們成功設定了 Webpack 並且執行了 npm run build 的指令，你應該可以看到你的 JavaScript 也順利運作了。雖然 Webpack 很神奇地能夠將所有的 JavaScript 打包起來，但它畢竟還是 JavaScript ，在這篇文章內我們就來稍微談談你的 JavaScript 被打包後是怎麼運作的。

解析 Bundle.js

當你用編輯器打開 bundle.js 時，應該可以發現裡面有一堆很難閱讀的 JavaScript。拉到最下面，你可以找到你自己的 JavaScript。

// bundle.js

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

var sum = (a, b) => a + b;

module.exports = sum;

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

const sum = __webpack_require__(0);

const total = sum(2, 3);
console.log(total);

我們現在要用比較簡單的方式來解析這份 JS 究竟是怎麼樣運作的。首先我們先清空這份 JS，用下面這份來代換：

/// bundle.js

var myModules = [
  function() {
    const sum = (a, b) => a + b;
    return sum;
  },

  function() {
    const sum = myModules[0]();
    const total = sum(2, 3);
    console.log(total);
  }
];

var entryPointIndex = 1;
myModules[entryPointIndex]();

Webpack 的運作方式是這樣子的，首先它把你所有的 JavaScript 的模組都抽出來，並且放進一個由 Function 組成的陣列裡面，每個 Function 都是一份 JavaScript 檔案。接著，他把啟動 App 的 JS (也就是我們在 config.webpack.js 裡面所定義的 entry）的 Index 找出來，並且直接從這個陣列中呼叫這個 Entry JavaScript。

接著每當我們從其他模組 Import 功能或函示的時候，他會利用陣列的 index 來尋找函式，並且在這個 Scope 裡面賦予他一個常數，如此一來就可以在這個 Scope 裡面呼叫 sum 這個方法。當你的 JavaScript 數量變多，它的運作方式也不會改變，只要你從其他模組 Import，它他就會去找陣列中對應的 Index，直到沒有任何 Import 為止。

假如你現在直接打開你的瀏覽器，你會發現你還是可以在 console 內看到 sum(2, 3) 的結果，代表這份 JavaScript 仍然是正常運作的。其實並不太神祕，是嗎？（但對於創造出 Webpack 的開發人員仍然致上無數的敬意）

本篇最後的結果

此分享轉載自五倍 Rails 工程師 Roy Huang的開發筆記