一.什么是 Webpack
Webpack 是一個(gè)模塊打包器。它將根據(jù)模塊的依賴關(guān)系進(jìn)行靜態(tài)分析，然后將這些模塊按照指定的規(guī)則生成對應(yīng)的靜態(tài)資源。
二.為什么使用webpack
市面上已經(jīng)存在的模塊管理和打包工具并不適合大型的項(xiàng)目，尤其單頁面 Web 應(yīng)用程序。最緊迫的原因是如何在一個(gè)大規(guī)模的代碼庫中，維護(hù)各種模塊資源的分割和存放，維護(hù)它們之間的依賴關(guān)系，并且無縫的將它們整合到一起生成適合瀏覽器端請求加載的靜態(tài)資源。而webpack有以下幾個(gè)優(yōu)點(diǎn)：
1.將依賴樹拆分成按需加載的塊：Webpack 有兩種組織模塊依賴的方式，同步和異步。異步依賴作為分割點(diǎn)，形成一個(gè)新的快。在優(yōu)化了依賴樹后，每一個(gè)異步區(qū)塊都作為一個(gè)文件被打包。
2.初始化加載的耗時(shí)盡量少：Webpack 使用異步 I/O 和多級緩存提高運(yùn)行效率，這使得 Webpack 能夠以令人難以置信的速度快速增量編譯。
3.各種靜態(tài)資源都可以視作模塊：Webpack 本身只能處理原生的 JavaScript 模塊，但是 loader 轉(zhuǎn)換器可以將各種類型的資源轉(zhuǎn)換成 JavaScript 模塊。這樣，任何資源都可以成為 Webpack 可以處理的模塊。
4.將第三方庫整合成模塊的能力：Webpack 有一個(gè)智能解析器，幾乎可以處理任何第三方庫，無論它們的模塊形式是 CommonJS、 AMD 還是普通的 JS 文件。甚至在加載依賴的時(shí)候，允許使用動(dòng)態(tài)表達(dá)式 require("./templates/" + name + ".jade")。
5.自定義打包邏輯的能力：Webpack 還有一個(gè)功能豐富的插件系統(tǒng)。大多數(shù)內(nèi)容功能都是基于這個(gè)插件系統(tǒng)運(yùn)行的，還可以開發(fā)和使用開源的 Webpack 插件，來滿足各式各樣的需求。
6.適合大項(xiàng)目，無論是單頁還是多頁的 Web 應(yīng)用
三.安裝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)境下，本課程中我們已裝好webpack，可以通過命令行 webpack -h 試試。
通常我們會(huì)將 Webpack 安裝到項(xiàng)目的依賴中，這樣就可以使用項(xiàng)目本地版本的 Webpack。
1.進(jìn)入項(xiàng)目目錄
2.確定已經(jīng)有 package.json，沒有就通過 npm init 創(chuàng)建
3.輸入命令 $ npm install webpack --save-dev 安裝 webpack 依賴
Webpack 目前有兩個(gè)主版本，一個(gè)是在 master 主干的穩(wěn)定版，一個(gè)是在 webpack-2 分支的測試版，測試版擁有一些實(shí)驗(yàn)性功能并且和穩(wěn)定版不兼容，在正式項(xiàng)目中應(yīng)該使用穩(wěn)定版。
四.在項(xiàng)目中使用webpack
首先有一個(gè)靜態(tài)頁面 index.html，
現(xiàn)在創(chuàng)建一個(gè) JS 入口文件 entry.js：
然后編譯 entry.js 并打包到 bundle.js，運(yùn)行命令：
如果成功，打包過程會(huì)顯示日志：
在點(diǎn)擊訪問測試將會(huì)打開一個(gè)新的窗口。它應(yīng)該會(huì)顯示It works.。
注意：下面的課程中創(chuàng)建編輯文件都是用pico 文件名。
下一步，我們將把一些代碼移到一個(gè)額外的文件中content.js 并修改入口 entry.js：
編譯文件
更新您的瀏覽器窗口，您應(yīng)該看到文本It works from content.js.
執(zhí)行成功，會(huì)顯示
Webpack 會(huì)分析入口文件，解析包含依賴關(guān)系的各個(gè)文件。這些文件（模塊）都打包到 bundle.js 。Webpack 會(huì)給每個(gè)模塊分配一個(gè)唯一的 id 并通過這個(gè) id 索引和訪問模塊。在頁面啟動(dòng)時(shí)，會(huì)先執(zhí)行 entry.js 中的代碼，其它模塊會(huì)在運(yùn)行 require 的時(shí)候再執(zhí)行。
五.Loader介紹和使用
Webpack 本身只能處理 JavaScript 模塊，如果要處理其他類型的文件，就需要使用 loader 進(jìn)行轉(zhuǎn)換。
Loader 可以理解為是模塊和資源的轉(zhuǎn)換器，它本身是一個(gè)函數(shù)，接受源文件作為參數(shù)，返回轉(zhuǎn)換的結(jié)果。這樣，我們就可以通過 require 來加載任何類型的模塊或文件，比如 CoffeeScript、 JSX、 LESS 或圖片。
loader 有以下這些特點(diǎn)：
我們想要在應(yīng)用中添加一個(gè)css文件。
WebPACK只能處理JavaScript本身，所以我們需要css-loader去處理 CSS。我們還需要style-loader去應(yīng)用這個(gè)樣式在CSS文件。
安裝 loader：
注意：安裝 loaders（只需要在本地安裝，不需 -g）將會(huì)創(chuàng)建一個(gè) node_modules 文件夾，在哪里 loaders 將會(huì)激活。
我們要在頁面中引入一個(gè) CSS 文件 style.css，首頁將 style.css 也看成是一個(gè)模塊，然后用 css-loader 來讀取它，再用 style-loader 把它插入到頁面中。
添加一個(gè)style.css文件
修改 entry.js
重新編譯并更新您的瀏覽器看到藍(lán)色背景。
擴(kuò)展名自動(dòng)綁定loader
如果每次 require CSS 文件的時(shí)候都要寫 loader 前綴，是一件很繁瑣的事情。
我們可以根據(jù)模塊類型（擴(kuò)展名）來自動(dòng)綁定需要的 loader這樣寫require("./style.css")。
修改entry.js
注意：-表示這行刪掉或者注釋掉，+表示新增的內(nèi)容。
編譯:
注意：！在shell中有特殊意義，需要轉(zhuǎn)義,這樣寫才會(huì)成功的
六.配置文件
Webpack 在執(zhí)行的時(shí)候，除了在命令行傳入?yún)?shù)，還可以通過指定的配置文件來執(zhí)行。默認(rèn)情況下，會(huì)搜索當(dāng)前目錄的 webpack.config.js 文件，這個(gè)文件是一個(gè) node.js 模塊，返回一個(gè) json 格式的配置信息對象，或者通過 --config 選項(xiàng)來指定配置文件。
我們想將配置選項(xiàng)移動(dòng)到配置文件中，創(chuàng)建一個(gè)配置文件 webpack.config.js：
現(xiàn)在我們僅僅運(yùn)行:
如果完成成功，將會(huì)返回運(yùn)行結(jié)果，該命令將嘗試WebPACK當(dāng)前目錄中加載文件webpack.config.js。
這里對Webpack的打包行為做了配置，主要分為幾個(gè)部分：
entry：指定打包的入口文件，每有一個(gè)鍵值對，就是一個(gè)入口文件
output：配置打包結(jié)果，path定義了輸出的文件夾，filename則定義了打包結(jié)果文件的名稱
module：定義了對模塊的處理邏輯，這里可以用loaders定義了一系列的加載器，以及一些正則。當(dāng)需要加載的文件匹配test的正則時(shí)，就會(huì)調(diào)用后面的loader對文件進(jìn)行處理，這正是webpack強(qiáng)大的原因。
漂亮的輸出
如果該項(xiàng)目的增長，編譯可能需要更長的時(shí)間。所以我們要展示一些進(jìn)度條。我們想要的顏色…
我們可以這樣
七.插件
插件可以完成更多 loader 不能完成的功能。
插件的使用一般是在 webpack 的配置信息 plugins 選項(xiàng)中指定。
Webpack 本身內(nèi)置了一些常用的插件，還可以通過 npm 安裝第三方插件。
接下來，我們利用一個(gè)最簡單的 BannerPlugin 內(nèi)置插件來實(shí)踐插件的配置和運(yùn)行，這個(gè)插件的作用是給輸出的文件頭部添加注釋信息。
修改 webpack.config.js，添加 plugins：
然后運(yùn)行 webpack，打開 bundle.js，可以看到文件頭部出現(xiàn)了我們指定的注釋信息：
一個(gè) url-loader 來說，它會(huì)將樣式中引用到的圖片轉(zhuǎn)為模塊來處理，使用該加載器需要先進(jìn)行安裝：
修改style.css文件
配置webpack.config.js文件
注意后面那個(gè)limit的參數(shù)，當(dāng)你圖片大小小于這個(gè)限制的時(shí)候，會(huì)自動(dòng)啟用base64編碼圖片。
我們還是運(yùn)行
webpack
將會(huì)看到背景圖片已設(shè)置成功。
八.在 Webpack 中使用別名
模塊別名定義，方便后續(xù)直接引用別名，無須多寫長長的地址，比如我們現(xiàn)在想要把scripts/jquery.min.jsjquery壓縮文件打包.
別名（resolve.alias） 是 Webpack 的一個(gè)配置項(xiàng)，它的作用是把用戶的一個(gè)請求重定向到另一個(gè)路徑，例如通過修改 webpack.config.js 配置文件，jquery為別名加入：
例如我們之前不用別名，在entry.js中，想要把jquery打包
設(shè)置別名，就可以修改為
這樣待打包的腳本中的 require('jquery'); 其實(shí)就等價(jià)于 require('./scripts/jquery.min.js'); 。通過別名的使用在本例中可以減少幾乎一半的時(shí)間。
我們把需要的jquery打包了，但是現(xiàn)在前臺(tái)頁面想要直接用還是不可以的，需要我們把jquery暴露出來。
你可能在全局中使用了一個(gè)壓縮版本的 jquery，為了修復(fù)你可以安裝這個(gè)暴露全局加載器
然后像下面這樣修改entry.js：
把$作為別名為jquery的變量暴露到全局上下文中。
現(xiàn)在我們在頁面就可以使用$，例如：
