webpack入門（一）——webpack 介紹

標籤：

如今的網站正在演化為web應用程式:
1. 越來越多的使用JavaScript。
2. 現代瀏覽器提供更廣泛的介面。
3. 整頁重新整理的情況越來越少，甚至更多代碼在同一個頁面。（SPA）

因此有很多代碼在用戶端!
一個體量龐大的程式碼程式庫需要好好組織。模組系統提供程式碼程式庫劃分成模組的選項。

模組系統風格

目前有多個標準定義依賴和輸出：
1. script標籤（不要模組系統）
2. CommonJS
3. AMD和它的一些變種
4. ES 6
5. 其它

script 標籤的樣式

下面這種就是不用模組系統，你會怎麼去管理你的代碼。

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

模組介面匯出到全域對象,即window對象。模組的介面可以訪問全域對象的依賴關係
常見問題

全域衝突
嚴重依賴載入的順序
開發人員必須人工解決模組/庫的依賴關係
大型項目，script一溜下來可以很長,難以管理

CommonJs: 同步載入

這種風格用同步require 的方法去載入一個依賴並用暴露一個介面。 一個模組可以通過給export對象添加屬性或給module.exports設定值 來指定匯出。

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

伺服器端node.js用的就是這種標準。
優點:
1. 伺服器端模組可以重用
2. 已經有許多模組用這種風格(npm)。生態圈良好
3. 非常簡單和容易使用。
劣勢
1. 阻塞調用不適用網路。網路請求是非同步。
2. 沒有並行載入機制。
哪些在用？
1. 服務端 -node.js
2. browserify
3. modules-webmake -編譯到一個包
4. wreq -用戶端

AMD: 非同步載入

其它模組系統（例如 瀏覽器） 同步載入有困難(CommonJS) 而引入的一個非同步版本（和定義模組和輸出值的一種方法 ）。

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

優點:
1. 適合網路的非同步請求的風格
2. 並行載入多個模組。
劣勢
1. 編碼費力，更難讀和寫
2. 看起來只是權宜之計。
哪些在用？
1. require.js
2. curl

ES6模式

ES6借鑒其它語言給javascript新加了一些文法結構，有import文法。

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

優點:
1. 靜態分析很容易。
2. 不會過時的ES標準 。
劣勢
1. 瀏覽器支援需要時間。（遲早的事）
2. 很少有模組用這種風格。生態圈
目前沒有公開的方案

開發人員應當自己選擇適合自己的風格。允許現有的代碼和包能正常工作，可以很容易地添加自訂模組風格。

傳輸

模組應該在用戶端執行,所以他們必須從伺服器傳輸到瀏覽器。
傳輸模組有兩個極端:
1. 一個一個地傳。
2. 全部打包在一個裡傳。

兩種用法都泛濫，但是兩種都太low了。

一個一個地傳
優點：只有確實需要的模組才會傳輸過去。
缺點：許多請求意味著很多開銷。
缺點：應用程式啟動緩慢,因為請求延遲
全部一個地傳
優點：請求的開銷更少,更少的延遲
缺點：很多暫時不需要的模組給傳輸過去了。

分塊傳輸

更靈活的傳輸可能會更好。大多數情況下在這兩種極端之間的折中比較好。
=>在編譯所有模組時：把模組切分成小塊兒（chunks）。
這樣允許多個更小、更快的請求。有些模組不是一開始就需要的，含有這些模組的分塊在需要的時候可以載入到。這樣加快了初始化速度，但是在需要用那些模組時仍然讓你去抓更多的代碼。

開發人員怎麼做“切分點”，可以根據情況自由抉擇。
=》一個程式碼程式庫是可能的喲。

注意：這些觀點來自Google GWT.

怎麼可能只有javascript

為什麼一個模組系統只能幫程式猿們解決javascript問題呢？還有許多其他資源需要處理:
樣式表
圖片
web字型
html模板
等等

或者 一些先行編譯和後編譯語言
coffeescript → javascript
elm → javascript
less 樣式→ css 樣式
jade 模板→ javascript 產生 html
i18n files → something
等等

這些東西應該也像下面這樣容易：

require("./style.css");

1 require("./style.less");2 require("./template.jade");3 require("./image.png");

靜態分析

當編譯所有這些模組時,一個靜態分析試圖找到自己的依賴。
傳統上這隻能找到簡單的東西沒有表達 。但是
require("./template/" + templateName + ".jade") 這樣是常見的結構。
有些庫是用一些不一樣的風格寫的。它們有些很奇怪（不可思議）。

策略

聰明的解析辦法允許現存代碼能跑起來，如果程式猿用了一些怪異的東西，它能試圖找到相容的解決方案。

什麼是webpack

webpack是一個模組打包器。webpack把模組(s)連同它的依賴一起打包產生包含這些模組的靜態資源。

為什麼另用一個打包器？

現有的模組打包器不適合大項目（大單頁面應用）程式。代碼分割和靜態資源無縫模組化的迫切需求，催生了一個新的模組打包器。
我試圖擴充現有的模組打包器，但是它沒能實現所有的目標。
目標如下：
1. 把依賴樹切分成塊，實現按需載入。
2. 保持低初始載入時間
3. 每個靜態資源都能是一個模組
4. 具備把第三方庫整合為模組的能力
5. 具備打包器每個部分幾乎都能自己定製的特點。
6. 適合大型項目。

webpack有什麼不同？代碼分割

webpack依賴樹中有兩個依賴類型：同步和非同步。非同步模組切分成一個新的的塊。在塊樹（chunk tree）最佳化之後，檔案會為每個chunk發檔案。

loader

webpack可以處理javascript本身，但loader用來將其它資源轉換為javascript。這樣以來，所有資源都被格式化成模組了。

智能解析

webpack有一個智能解析器，它能處理幾乎所有的第三方庫。它甚至允許你在依賴中你像這樣加運算式 require("./templates/" + name + ".jade") 。它可以處理最常見的模組化標準風格：CommonJS和AMD。

安裝node.js

安裝node.js
包管理工具 npm會一起裝上。

webapck

webpack 可以用用npm 命令來裝

$ npm install webpack -g

webpack 已經全域安裝了，現在 webpack 命令可用了。

項目中使用webpack

你的項目最好也有webpack 依賴。 這樣你可以在項目中自由決定用webpack哪個版本而必去用全域那個webpack。
用 npm 命令添加一個 package.json檔案

$ npm init

如果你不發布npm包，Init過程中的問題不重要，都可以忽略。
安裝webpack 並添加到package.json中：

$ npm install webpack --save-dev

版本

有兩個webpack版本可用。穩定版本和beta版。beta版 在版本字元中標記為 -beta 。beta版本可能包含脆弱的或者實驗功能，都沒進行過多少測試。正式情境下應該用穩定版。

$ npm install [email protected] --save-dev

開發工具

如果你想用開發工具，先安裝它

$ npm install webpack-dev-server --save-dev

 

 

原文地址：http://blog.csdn.net/keliyxyz/article/details/51571386

webpack入門（一）——webpack 介紹