一.什么是 Webpack
Webpack 是一個(gè)模塊打包器知纷。它將根據(jù)模塊的依賴關(guān)系進(jìn)行靜態(tài)分析，然后將這些模塊按照指定的規(guī)則生成對(duì)應(yīng)的靜態(tài)資源毅哗。
二.為什么使用webpack
市面上已經(jīng)存在的模塊管理和打包工具并不適合大型的項(xiàng)目，尤其單頁面 Web 應(yīng)用程序。最緊迫的原因是如何在一個(gè)大規(guī)模的代碼庫中辛辨，維護(hù)各種模塊資源的分割和存放，維護(hù)它們之間的依賴關(guān)系瑟枫，并且無縫的將它們整合到一起生成適合瀏覽器端請(qǐng)求加載的靜態(tài)資源斗搞。而webpack有以下幾個(gè)優(yōu)點(diǎn)：
1.將依賴樹拆分成按需加載的塊：Webpack 有兩種組織模塊依賴的方式，同步和異步力奋。異步依賴作為分割點(diǎn)榜旦，形成一個(gè)新的快。在優(yōu)化了依賴樹后景殷，每一個(gè)異步區(qū)塊都作為一個(gè)文件被打包。
2.初始化加載的耗時(shí)盡量少：Webpack 使用異步 I/O 和多級(jí)緩存提高運(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 分支的測(cè)試版佛寿，測(cè)試版擁有一些實(shí)驗(yàn)性功能并且和穩(wěn)定版不兼容，在正式項(xiàng)目中應(yīng)該使用穩(wěn)定版但壮。
<pre>
查看 webpack 版本信息
$ npm info webpack
安裝指定版本的 webpack
$ npm install webpack@1.12.x --save-dev
</pre>
四.在項(xiàng)目中使用webpack
首先有一個(gè)靜態(tài)頁面 index.html冀泻，
<pre>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script src="bundle.js"></script>
</body>
</html>
</pre>
現(xiàn)在創(chuàng)建一個(gè) JS 入口文件 entry.js：
<pre>
// entry.js
pico entry.js
// 進(jìn)入編輯器輸入
document.write('It works.');
// 保存并退出
</pre>
然后編譯 entry.js 并打包到 bundle.js，運(yùn)行命令：
<pre>
$ webpack ./entry.js bundle.js
</pre>
如果成功蜡饵，打包過程會(huì)顯示日志：
<pre>
Hash: aeec068c58e1e78f0fb6
Version: webpack 1.12.9
Time: 70ms
Asset Size Chunks Chunk Names
bundle.js 1.48 kB 0 [emitted] main
[0] ./entry.js 87 bytes {0} [built]
</pre>
在點(diǎn)擊訪問測(cè)試將會(huì)打開一個(gè)新的窗口弹渔。它應(yīng)該會(huì)顯示It works.。
注意：下面的課程中創(chuàng)建編輯文件都是用pico 文件名溯祸。
下一步肢专，我們將把一些代碼移到一個(gè)額外的文件中content.js 并修改入口 entry.js：
<pre>
// content.js
pico content.js
// 編輯內(nèi)容
module.exports = "It works from content.js.";
</pre>
<pre>
// 修改entry.js
//document.write('It works.');
document.write(require("./content.js")); // 添加content.js
</pre>
編譯文件
<pre>
$ webpack ./entry.js bundle.js
</pre>
更新您的瀏覽器窗口，您應(yīng)該看到文本It works from content.js.
執(zhí)行成功焦辅，會(huì)顯示
<pre>
Hash: ef96fed65f6d3ebc0dd7
Version: webpack 1.12.9
Time: 91ms
Asset Size Chunks Chunk Names
bundle.js 1.7 kB 0 [emitted] main
[0] ./entry.js 133 bytes {0} [built]
[1] ./content.js 97 bytes {0} [built]
</pre>
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)：
<pre>
1.Loader 可以通過管道方式鏈?zhǔn)秸{(diào)用宵呛，每個(gè) loader 可以把資源轉(zhuǎn)換成任意格式并傳遞給下一個(gè) loader ，但是最后一個(gè) loader 必須返回 JavaScript夕凝。
2.Loader 可以同步或異步執(zhí)行宝穗。
3.Loader 運(yùn)行在 node.js 環(huán)境中，所以可以做任何可能的事情码秉。
4.Loader 可以接受參數(shù)逮矛，以此來傳遞配置項(xiàng)給 loader。
5.Loader 可以通過文件擴(kuò)展名（或正則表達(dá)式）綁定給不同類型的文件转砖。
6.除了通過 package.json 的 main 指定须鼎，通常的模塊也可以導(dǎo)出一個(gè) loader 來使用。
7.Loader 可以訪問配置府蔗。
8.插件可以讓 loader 擁有更多特性晋控。
9.Loader 可以分發(fā)出附加的任意文件。
</pre>
我們想要在應(yīng)用中添加一個(gè)css文件姓赤。
WebPACK只能處理JavaScript本身赡译，所以我們需要css-loader去處理 CSS。我們還需要style-loader去應(yīng)用這個(gè)樣式在CSS文件不铆。
安裝 loader：
<pre>
npm install css-loader style-loader
</pre>
注意：安裝 loaders（只需要在本地安裝蝌焚，不需 -g）將會(huì)創(chuàng)建一個(gè) node_modules 文件夾，在哪里 loaders 將會(huì)激活狂男。
我們要在頁面中引入一個(gè) CSS 文件 style.css综看，首頁將 style.css 也看成是一個(gè)模塊，然后用 css-loader 來讀取它岖食，再用 style-loader 把它插入到頁面中。
添加一個(gè)style.css文件
<pre>
body {
background: blue;
}
</pre>
修改 entry.js：
<pre>
- require("!style!css!./style.css"); // 載入 style.css
document.write(require("./content.js"));
</pre>
重新編譯并更新您的瀏覽器看到藍(lán)色背景舞吭。
擴(kuò)展名自動(dòng)綁定loader
如果每次 require CSS 文件的時(shí)候都要寫 loader 前綴泡垃，是一件很繁瑣的事情析珊。
我們可以根據(jù)模塊類型（擴(kuò)展名）來自動(dòng)綁定需要的 loader這樣寫require("./style.css")。
修改entry.js
<pre>
- require("!style!css!./style.css");
- require("./style.css");
document.write(require("./content.js"));
</pre>
注意：-表示這行刪掉或者注釋掉蔑穴，+表示新增的內(nèi)容忠寻。
編譯:
<pre>
webpack ./entry.js bundle.js --module-bind "css=style!css"
</pre>
注意：！在shell中有特殊意義存和，需要轉(zhuǎn)義,這樣寫才會(huì)成功的
<pre>
webpack ./entry.js bundle.js --module-bind "css=style!css"
</pre>
六.配置文件
Webpack 在執(zhí)行的時(shí)候奕剃，除了在命令行傳入?yún)?shù)，還可以通過指定的配置文件來執(zhí)行捐腿。默認(rèn)情況下纵朋，會(huì)搜索當(dāng)前目錄的 webpack.config.js 文件，這個(gè)文件是一個(gè) node.js 模塊茄袖，返回一個(gè) json 格式的配置信息對(duì)象操软，或者通過 --config 選項(xiàng)來指定配置文件。
我們想將配置選項(xiàng)移動(dòng)到配置文件中宪祥，創(chuàng)建一個(gè)配置文件 webpack.config.js：
<pre>
module.exports = {
entry: "./entry.js",
output: {
path: __dirname,
filename: "bundle.js"
},
module: {
loaders: [
{ test: /.css$/, loader: "style!css" }
]
}
};
</pre>
現(xiàn)在我們僅僅運(yùn)行:
<pre>
webpack
</pre>
如果完成成功聂薪，將會(huì)返回運(yùn)行結(jié)果，該命令將嘗試WebPACK當(dāng)前目錄中加載文件webpack.config.js蝗羊。
這里對(duì)Webpack的打包行為做了配置藏澳，主要分為幾個(gè)部分：
entry：指定打包的入口文件，每有一個(gè)鍵值對(duì)耀找，就是一個(gè)入口文件
output：配置打包結(jié)果翔悠，path定義了輸出的文件夾，filename則定義了打包結(jié)果文件的名稱
module：定義了對(duì)模塊的處理邏輯涯呻，這里可以用loaders定義了一系列的加載器凉驻，以及一些正則。當(dāng)需要加載的文件匹配test的正則時(shí)复罐，就會(huì)調(diào)用后面的loader對(duì)文件進(jìn)行處理涝登，這正是webpack強(qiáng)大的原因。
漂亮的輸出
如果該項(xiàng)目的增長(zhǎng)效诅，編譯可能需要更長(zhǎng)的時(shí)間胀滚。所以我們要展示一些進(jìn)度條。我們想要的顏色…
我們可以這樣
<pre>
webpack --progress --colors
</pre>
七.插件
插件可以完成更多 loader 不能完成的功能乱投。
插件的使用一般是在 webpack 的配置信息 plugins 選項(xiàng)中指定咽笼。
Webpack 本身內(nèi)置了一些常用的插件，還可以通過 npm 安裝第三方插件戚炫。
接下來剑刑，我們利用一個(gè)最簡(jiǎn)單的 BannerPlugin 內(nèi)置插件來實(shí)踐插件的配置和運(yùn)行，這個(gè)插件的作用是給輸出的文件頭部添加注釋信息。
修改 webpack.config.js施掏，添加 plugins：
<pre>
var webpack = require('webpack');
module.exports = {
entry: './entry.js',
output: {
path: __dirname,
filename: 'bundle.js'
},
module: {
loaders: [
{test: /.css$/, loader: 'style!css'}
]
},
plugins: [
new webpack.BannerPlugin('This file is created by mutouren')
]
}
</pre>
然后運(yùn)行 webpack钮惠，打開 bundle.js，可以看到文件頭部出現(xiàn)了我們指定的注釋信息：
<pre>
/*! This file is created by mutouren */
/******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
// 后面代碼省略......
</pre>
一個(gè) url-loader 來說七芭，它會(huì)將樣式中引用到的圖片轉(zhuǎn)為模塊來處理素挽，使用該加載器需要先進(jìn)行安裝：
<pre>
npm install url-loader
</pre>
修改style.css文件
<pre>
body {
color:#fff;
background: url('./logo.png');
}
</pre>
配置webpack.config.js文件
<pre>
module.exports = {
entry: "./entry.js",
output: {
path: __dirname,
filename: "bundle.js"
},
module: {
loaders: [
{ test: /.css$/, loader: "style!css" },
{ test: /.(png|jpg)$/, loader: "url?limit=40000" } // 添加到這
]
}
};
</pre>
注意后面那個(gè)limit的參數(shù)，當(dāng)你圖片大小小于這個(gè)限制的時(shí)候狸驳，會(huì)自動(dòng)啟用base64編碼圖片预明。
我們還是運(yùn)行
webpack
將會(huì)看到背景圖片已設(shè)置成功。
八.在 Webpack 中使用別名
模塊別名定義耙箍，方便后續(xù)直接引用別名撰糠，無須多寫長(zhǎng)長(zhǎng)的地址，比如我們現(xiàn)在想要把scripts/jquery.min.jsjquery壓縮文件打包.
別名（resolve.alias） 是 Webpack 的一個(gè)配置項(xiàng)究西，它的作用是把用戶的一個(gè)請(qǐng)求重定向到另一個(gè)路徑窗慎，例如通過修改 webpack.config.js 配置文件，jquery為別名加入：
<pre>
resolve: {
alias: {
jquery: "./scripts/jquery.min.js"
}
}
</pre>
例如我們之前不用別名卤材，在entry.js中遮斥，想要把jquery打包
<pre>
require('./scripts/jquery.min.js');
</pre>
設(shè)置別名，就可以修改為
<pre>
require('jquery');
</pre>
這樣待打包的腳本中的 require('jquery'); 其實(shí)就等價(jià)于 require('./scripts/jquery.min.js'); 扇丛。通過別名的使用在本例中可以減少幾乎一半的時(shí)間术吗。
我們把需要的jquery打包了，但是現(xiàn)在前臺(tái)頁面想要直接用還是不可以的帆精，需要我們把jquery暴露出來较屿。
你可能在全局中使用了一個(gè)壓縮版本的 jquery，為了修復(fù)你可以安裝這個(gè)暴露全局加載器
<pre>
npm install expose-loader --save-dev
</pre>
然后像下面這樣修改entry.js：
<pre>
require('expose?$!jquery');
</pre>
把$作為別名為jquery的變量暴露到全局上下文中卓练。
現(xiàn)在我們?cè)陧撁婢涂梢允褂?隘蝎，例如：
<pre>
$('h1').text();
</pre>
