[譯]開啓webpack之旅( 一 )：動機

原文地址

現今Web網頁正逐步向Web App進化，主要體如今：

• 愈來愈多依賴JavaScript的使用。

• 現代瀏覽器提供了多樣化的接口。

• 更多的局部加載代替全局刷新，甚至單個頁面代碼量的提高。

所以，客戶端將承載大量代碼！
大量的底層代碼須要被組織。而模塊系統則提供了一個能夠將底層代碼分割成不一樣模塊的方式。

常見的模塊系統風格

對於如何定義依賴與引用，存在許多不一樣的標準：

• <script>標籤（即不使用模塊系統）

• CommonJS

• AMD及其衍生

• ES6模塊

• 其餘

<script>標籤

下面用一個例子來展現若是你不使用模塊系統，你提交的底層代碼模塊化結構是這樣的：

<script src="module1.js"></script>
<script src="module2.js"></script>
<script src="libraryA.js"></script>
<script src="module3.js"></script>

模塊向全局對象（即window對象）暴露一個接口，模塊經過全局對象訪問依賴的接口。

缺點：

• 全局空間的污染

• 須要合理的加載順序

• 開發者要解決模塊/庫的依賴

• 大型項目中列表冗長且難以管理

CommonJs:同步調用

CommonJs採用require方法同步調用依賴並返回暴露的接口。一個模塊能夠經過添加暴露對象的屬性或設定module.exports的值被暴露出來。

require("module");
require("../file.js");
exports.doStuff = function() {};
module.exports = someValue;

該方法以經過node.js被使用於服務端。

優點

• 服務端模塊能夠被複用

• 有大量現成的模塊(如npm)

• 簡單且易於使用

不足

• 阻塞式並不能很好地適用於互聯網，網絡環境須要異步調用

• 沒法平行加載多個模塊

具體應用

• 服務端node.js

• browserify

• webmake：編譯成爲一個bundle

• 客戶端wreq

AMD：異步調用

異步模塊的定義
在客戶端其餘同步模塊系統有着一樣的問題，下面介紹一種異步的版本，包括其如何定義變量與暴露值：

require(["module", "../file"], function(module, file) { /* ... */ });
define("mymodule", ["dep1", "dep2"], function(d1, d2) {
  return someExportedValue;
});

優點

• 知足客戶端異步調用風格

• 可平行加載多個模塊

不足

• 頭部聲明不利於閱讀和編寫

• 看上去像是一種妥協

具體應用

• 客戶端require.js

• 客戶端curl
  關於更多CommonJS與AMD

ES6模塊

EcmaScript6向JavaScript添加了許多語言結構，所以造成了另外一種模塊系統。

import "jquery";
export function doStuff() {}
module "localModule" {}

優點

• 易於靜態解析

• 將來將成爲ES標準

不足

• 還有待瀏覽器支持

• 因爲比較新，這種方式的實現較少

客觀的意見

應然開發者本身選擇模塊風格，使已存在的代碼與庫能夠正常工做，以簡單的方式添加習慣的模塊風格。

加載

因爲模塊須要在客戶端執行，所以須要在客戶端加載服務端模塊。
如下是兩種比較極端的模塊加載：

• 一個模塊寫一個加載

• 全部模塊寫在一個加載中
  二者都應用普遍，但都有所不足：

• 一個模塊寫一個加載

  • 優點：只有一個模塊須要加載

  • 不足：越多模塊意味着越多的頂部聲明

  • 不足：因爲須要較長的加載時間，應用啓動較慢

• 全部模塊寫一個加載

  • 優點：更少的頂部聲明，更快的加載

  • 不足：不須要的模塊也同時被加載

分塊加載

一種更靈活的加載彷佛更好。一種介於這兩種極端中間的方式對大多數狀況來的更好。
當編譯全部模塊時：把模塊的集合拆分紅許多更小的chunk（塊）。
這能實現更小更快的加載。由模塊組成的chunks在初始化的時候並不會被加載。當須要使用模塊時，才加載塊，這加快了應用加載的速度。
如何分割模塊集合取決於開發者。

這讓組織大量代碼成爲可能！
注意：這一想法來源於Google’s GWT。
瞭解更多關於代碼拆分

爲什麼只提到JavaScript

有許多其餘資源如樣式、圖片、字體、HTML 模板也須要處理，爲什麼只說起JavaScript？也還有其餘須要編譯的資源：coffee script，elm，less，jade，i18n等。
若是把他們都當作chunk（塊）事情就變得很簡單：

require("./style.css");
require("./style.less");
require("./template.jade");
require("./image.png");

瞭解更多關於使用加載

靜態解析

當編譯全部這些模塊時，靜態解析會試圖找到它的依賴。
一般，只能解析一些簡單的格式，但像("./template/" + templateName + ".jade") 又是一種常見的書寫格式。
而且多數庫都採用不一樣的寫法，有些寫法時很奇特的…

策略

一款好的語法分析程序能夠是大多數現存代碼正常運行。若是開發者風格奇特，它也會試圖去找到最合適的解決方法。

譯者注:這個系列會試圖將webpack的官方文檔都翻譯一遍，未翻譯的連接，翻譯後會改爲相應中文翻譯頁面。