什么是Webpack
webpack是一個(gè)模塊打包器。它根據(jù)模塊的依賴(lài)關(guān)系進(jìn)行靜態(tài)分析，然后將這些模塊按照指定的規(guī)則生成相應(yīng)的靜態(tài)資源。
Webpack的特點(diǎn)
代碼拆分
Webpack 有兩種組織模塊依賴(lài)的方式，同步和異步。異步依賴(lài)作為分割點(diǎn)，形成一個(gè)新的塊。在優(yōu)化了依賴(lài)樹(shù)后，每一個(gè)異步區(qū)塊都作為一個(gè)文件被打包。
Loader
Webpack 本身只能處理原生的 JavaScript 模塊，但是 loader 轉(zhuǎn)換器可以將各種類(lèi)型的資源轉(zhuǎn)換成 JavaScript 模塊。這樣，任何資源都可以成為 Webpack 可以處理的模塊。
智能解析
Webpack 有一個(gè)智能解析器，幾乎可以處理任何第三方庫(kù)，無(wú)論它們的模塊形式是 CommonJS、 AMD 還是普通的 JS 文件。甚至在加載依賴(lài)的時(shí)候，允許使用動(dòng)態(tài)表達(dá)式 require("./templates/" + name + ".jade")。
插件系統(tǒng)
Webpack 還有一個(gè)功能豐富的插件系統(tǒng)。大多數(shù)內(nèi)容功能都是基于這個(gè)插件系統(tǒng)運(yùn)行的，還可以開(kāi)發(fā)和使用開(kāi)源的 Webpack 插件，來(lái)滿足各式各樣的需求。
快速運(yùn)行
Webpack 使用異步 I/O 和多級(jí)緩存提高運(yùn)行效率，這使得 Webpack 能夠以令人難以置信的速度快速增量編譯。
Webpack的安裝
首先要安裝 Node.js， Node.js 自帶了軟件包管理器 npm，Webpack 需要 Node.js v0.6 以上支持，建議使用最新版 Node.js。
用 npm 安裝 Webpack：
$ npm install webpack -g
此時(shí) Webpack 已經(jīng)安裝到了全局環(huán)境下，可以通過(guò)命令行 webpack -h試試。
通常我們會(huì)將 Webpack 安裝到項(xiàng)目的依賴(lài)中，這樣就可以使用項(xiàng)目本地版本的 Webpack
# 進(jìn)入項(xiàng)目目錄
# 確定已經(jīng)有 package.json，沒(méi)有就通過(guò) npm init 創(chuàng)建
# 安裝 webpack 依賴(lài)
$ npm install webpack --save-dev
Webpack 目前有兩個(gè)主版本，一個(gè)是在 master 主干的穩(wěn)定版，一個(gè)是在 webpack-2 分支的測(cè)試版，測(cè)試版擁有一些實(shí)驗(yàn)性功能并且和穩(wěn)定版不兼容，在正式項(xiàng)目中應(yīng)該使用穩(wěn)定版。
# 查看 webpack 版本信息
$ npm info webpack
# 安裝指定版本的 webpack
$ npm install webpack@1.12.x --save-dev
如果需要使用 Webpack 開(kāi)發(fā)工具，要單獨(dú)安裝：
$ npm install webpack-dev-server --save-dev
Webpack的使用
首先創(chuàng)建一個(gè)靜態(tài)頁(yè)面 index.html 和一個(gè) JS 入口文件 entry.js：
<!-- index.html -->
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script src="bundle.js"></script>
</body>
</html>
// entry.js
document.write('It works.')
然后編譯 entry.js 并打包到 bundle.js：
$ webpack entry.js bundle.js
打包過(guò)程會(huì)顯示日志：
Hash: e964f90ec65eb2c29bb9
Version: webpack 1.12.2
Time: 54ms
Asset Size Chunks Chunk Names
bundle.js 1.42 kB 0 [emitted] main
[0] ./entry.js 27 bytes {0} [built]
用瀏覽器打開(kāi) index.html 將會(huì)看到 It works. 。
接下來(lái)添加一個(gè)模塊 module.js 并修改入口 entry.js：
// module.js
module.exports = 'It works from module.js.'
// entry.js
document.write('It works.')
document.write(require('./module.js')) // 添加模塊
重新打包 webpack entry.js bundle.js 后刷新頁(yè)面看到變化 It works.It works from module.js.
Hash: 279c7601d5d08396e751
Version: webpack 1.12.2
Time: 63ms
Asset Size Chunks Chunk Names
bundle.js 1.57 kB 0 [emitted] main
[0] ./entry.js 66 bytes {0} [built]
[1] ./module.js 43 bytes {0} [built]
Webpack 會(huì)分析入口文件，解析包含依賴(lài)關(guān)系的各個(gè)文件。這些文件（模塊）都打包到 bundle.js 。Webpack 會(huì)給每個(gè)模塊分配一個(gè)唯一的 id 并通過(guò)這個(gè) id 索引和訪問(wèn)模塊。在頁(yè)面啟動(dòng)時(shí)，會(huì)先執(zhí)行 entry.js 中的代碼，其它模塊會(huì)在運(yùn)行 require 的時(shí)候再執(zhí)行。
