上一篇介紹了Gulp墨榄，公司的React項(xiàng)目用的是webpack打包勿她，抽空將webpack的知識點(diǎn)整理進(jìn)本篇逢并。
先簡單介紹一下webpack吧砍聊。前端工程模塊化，組件化就不多講了蟹肘，關(guān)鍵是要解析出這些模塊間的依賴關(guān)系疆前，并將它們打包合并壓縮聘萨，插入到html中執(zhí)行米辐。Webpack就是模塊化管理工具胸完，可以實(shí)現(xiàn)模塊按需加載书释，預(yù)處理，打包等功能赊窥。
先從官網(wǎng)上盜下圖爆惧，webpack就是一個模塊打包工具，理順各模塊間的依賴關(guān)系后锨能，將它們按照指定的規(guī)則打包成靜態(tài)資源扯再。
從圖中可以看出址遇，webpack可以處理不同類型的模塊熄阻。除js外，還能處理less倔约，css秃殉，jade，coffeeScript等浸剩。原理是通過Loader來適配各種非js資源钾军，將它們（除圖片資源外）全都轉(zhuǎn)換成js模塊。
各種不同的模塊可能遵循不同的標(biāo)準(zhǔn)绢要，如CommonJS或AMD等吏恭，webpack的解析器幾乎可以處理所有通用標(biāo)準(zhǔn)的模塊。
執(zhí)行時重罪，webpack采用異步IO和多級緩存策略砸泛，總之，你只要知道打包速度很快就是了蛆封。
- 安裝與執(zhí)行
- 配置文件
- devServer
- devTool
- Loaders
- Plugins
安裝與執(zhí)行
安裝很簡單：
npm install webpack -g //安裝到全局
npm install webpack --save-dev //安裝到本地項(xiàng)目中
體驗(yàn)一下webpack是如何解析依賴關(guān)系并打包的，本地目錄里新建兩個子目錄app（開發(fā)用目錄）和release（發(fā)布用目錄）勾栗。
app目錄里新建一個Hello.js：
module.exports = function() {
var showTxt = document.createElement('div');
showTxt.textContent = "Hello webpack!";
return showTxt;
};
app目錄里新建一個main.js惨篱，依賴Hello.js：
var showTxt = require('./Hello.js');
document.getElementById('root').appendChild(showTxt());
release目錄里新建一個index.html：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My Webpack</title>
</head>
<body>
<div id='root'>
</div>
<script src="bundle.js"></script>
</body>
</html>
該html格式非常簡單，但body里加載的bundle.js哪里來的围俘？這就是接下來webpack需要做的砸讳。將app下開發(fā)者寫的main.js和Hello.js打包生成bundle.js，并放進(jìn)release目錄界牡。執(zhí)行：
webpack ./app/main.js ./release/bundle.js
會發(fā)現(xiàn)release目錄下多了個bundle.js簿寂。觀察上述打包過程，webpack先解析main.js宿亡，發(fā)現(xiàn)它依賴Hello.js常遂，于是將這兩個文件打包進(jìn)指定的release目錄，生成bundle.js挽荠。用瀏覽器打開index.html會看到頁面正確顯示了Hello webpack!克胳。
稍有點(diǎn)經(jīng)驗(yàn)的開發(fā)者都知道起名index.html就不是讓你本地雙擊瀏覽器打開頁面的平绩，而是應(yīng)該讓web服務(wù)器讀取該頁面。webpack提供了web服務(wù)器漠另，先安裝：
npm install --save-dev webpack-dev-server
安裝完后捏雌，執(zhí)行：
webpack-dev-server
現(xiàn)在訪問http://localhost:8080就能看到我們第一個webpack頁面了。
配置文件
實(shí)際項(xiàng)目中笆搓，通常不會在終端敲上述命令性湿，而是將各種需求寫入webpack的配置文件中，然后一鍵執(zhí)行满败。webpack的配置文件名叫webpack.config.js肤频。看后綴就知道這個配置文件是個js文件葫录，是個node.js模塊着裹，依賴于你前面安裝的webpack模塊，exports出json格式的配置信息對象米同。例如：
module.exports = {
entry: __dirname + "/app/main.js", // __dirname是Node的全局變量骇扇，值為當(dāng)前目錄
output: {
path: __dirname + "/release",
filename: "bundle.js"
}
}
這個配置文件非常簡單，即使不看文檔面粮，光閱讀代碼也能知道都干了些什么∩傩ⅲ現(xiàn)在終端執(zhí)行webpack就能實(shí)現(xiàn)一鍵打包啦。
當(dāng)然通常會在node環(huán)境中開發(fā)熬苍，因此可以將終端命令放入package.json里：
{
...
"scripts": {
"start": "NODE_ENV=development webpack",
"dev": "NODE_ENV=development webpack-dev-server --progress",
"build": "NODE_ENV=production webpack -p"
},
...
}
-p是Webpack的命令行參數(shù)稍走，用于打包成壓縮后的production形式。但--progress用于顯示Node的構(gòu)建進(jìn)度柴底，包括NODE_ENV婿脸，這些不屬于Webpack知識范疇。
配置文件當(dāng)然不止上述entry和output這么簡單（當(dāng)然說實(shí)話柄驻，即使是output也不簡單狐树，除了常用的path和filename，官網(wǎng)還提供了豐富的配置項(xiàng)鸿脓。入門簡單抑钟，但想要玩的6并不容易）。下面介紹幾個重要的配置項(xiàng)野哭。
devServer
安裝webpack-dev-server后在塔，如果webpack.config.js里不配置devServer，那web服務(wù)器用的都是默認(rèn)參數(shù)拨黔。你可以在webpack.config.js自定義服務(wù)器蛔溃，例如：
module.exports = {
...
devServer: {
contentBase: "./release",
colors: true,
historyApiFallback: true, //針對HTML5 History API
inline: true
}
}
官網(wǎng)提供了很多參數(shù)，包括如果覺得localhost的127.0.0.1這個IP不爽，可以配置host設(shè)為當(dāng)前PC的IP城榛。包括如果覺得默認(rèn)8080端口不爽揪利，可以配置port，設(shè)成一個隨機(jī)數(shù)Math.floor(Math.random() * 65536);狠持。包括給web服務(wù)器配置https指定證書等疟位。
devTool
打包后的代碼難以調(diào)試，這在開發(fā)階段是無法接受的喘垂，因此需要source map甜刻。你可以將Source map打包進(jìn)文件，也可以生成外聯(lián).map文件正勒，當(dāng)然通常推薦生成外聯(lián).map文件比較好得院。Webpack通過devtool來配置source map，具體選項(xiàng)和特性見下圖：
打包速度從上到下越來越慢章贞，而且通常調(diào)試時我們并不關(guān)心列信息祥绞，因此cheap模式可以提高效率。推薦開發(fā)階段選擇eval-source-map或cheap-module-eval-source-map鸭限，生產(chǎn)階段選擇cheap-module-source-map蜕径。例如：
module.exports = {
...
devtool: 'eval-source-map', // Source Maps
}
具體這些參數(shù)有什么差異，可以參考這里败京，整理的挺詳細(xì)兜喻。
Loaders
前面已經(jīng)簡單提過，webpack支持將各種資源文件打包成js文件赡麦，依靠的就是Loaders加載器朴皆。參照官網(wǎng)的連接，通常項(xiàng)目中會用到多個Loader泛粹，它們都被配置在modules下面遂铡。Loaders有幾個子項(xiàng)：
test：（必須）加載器可以處理的文件后綴名的正則表達(dá)式
loader / loaders：（必須）加載器名字。前者用字符串形式指定多個loader晶姊。后者用數(shù)組形式指定多個loader忧便。（webpack 2.x版本中改名為rules）
include / exclude：（可選）除了正則匹配到的文件，還可以手動添加或排除某些文件
query：（可選）額外的設(shè)置選項(xiàng)帽借。（webpack 2.x版本中改名為option）
以babel-loader為例，用React開發(fā)或PC端用ES6語法兼容老版本瀏覽器時超歌，需要用Babel轉(zhuǎn)碼砍艾。我們先將Babel下載下來：
npm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react
其中babel-core是Babel的核心包，babel-preset-es2015用于解碼ES6語法巍举，babel-preset-react用于解碼React的JSX語法（Babel的入門教程可以參照這里）
在webpack.config.js里配置Babel加載器：
module.exports = {
...
module: {
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel',
query: {
presets: ['es2015','react']
}
}
]
}
}
當(dāng)然Babel的配置項(xiàng)很多脆荷，通常推薦將它們單獨(dú)放在.babelrc這個配置文件中。這樣Loaders可以簡化成：
module.exports = {
...
module: {
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel'
}
]
}
}
Webpack啟動babel加載器時，會自動讀取.babelrc中的babel配置項(xiàng)◎涯保現(xiàn)在你可以把main.js和Hello.js的代碼換成React+ES6梦皮，重啟webpack-dev-server，React項(xiàng)目順利啟動_
再看一個webpack如何打包CSS的例子桃焕。Webpack提供了css-loader和style-loader剑肯，兩者配合將css嵌入到j(luò)s文件中。前者讓你能用require（ES6里是import）來加載CSS模塊观堂，后者將計(jì)算好的樣式加入頁面中让网。先下載這兩個加載器：
npm install --save-dev style-loader css-loader
在webpack.config.js里配置CSS加載器：
module.exports = {
...
module: {
loaders: [
...
{
test: /\.css$/,
loader: 'style!css' // !驚嘆號讓同一文件能夠使用不同類型的loader
}
]
}
}
現(xiàn)在你創(chuàng)建好css文件后，就可以在main.js里require（ES6是import）該文件了师痕，例如：
import './hello.css';
再看一個webpack如何打包img的例子溃睹。先下載url-loader加載器：
npm install --save-dev url-loader
在webpack.config.js里配置圖片加載器：
module.exports = {
...
module: {
loaders: [
...
{
test: /\.(png|jpg)$/,
loader: 'url-loader?limit=8192'
}
]
}
}
加載器的參數(shù)可以直接追加在 loader后面，如上例中指定url-loader的limit參數(shù)為8K胰坟。（webpack 2.x版本中加載器的參數(shù)不必這樣用問號拼接在loader后面了因篇，而是新增了use參數(shù)）
準(zhǔn)備兩張圖片，一張小于8K笔横，一張大于8K竞滓，在Hello.js里加載這兩張圖片，例如：
url-loader會判斷原始圖片大小是否小于limit參數(shù)指定的8K狠裹，小于的話直接Base64轉(zhuǎn)碼后塞入頁面虽界，大于的話才作為單獨(dú)的圖片讓瀏覽器發(fā)起請求去下載圖片。
更多的加載器如何配置（例如sass涛菠，less莉御，stylus，postcss-loader俗冻，json-loader礁叔，file-loader，raw-loader迄薄，i18n琅关，jshint，coffeeScript等）讥蔽，可以見官網(wǎng)涣易，Webpack提供了豐富的加載器能讓你自由選擇喜歡的開發(fā)工具。
Plugins
插件Plugins和加載器Loaders是不同東西冶伞。Loaders用于在打包過程中將不同類型的文件解析成js源代碼新症，而Plugins是用于拓展Webpack功能的。介紹幾個常用的plugin：
- webpack.HotModuleReplacementPlugin
- webpack.EnvironmentPlugin
- webpack.DefinePlugin
- webpack.optimize.CommonsChunkPlugin
- html-webpack-plugin
- open-browser-webpack-plugin
webpack.HotModuleReplacementPlugin熱加載插件感覺是最實(shí)用的插件了响禽。公司老項(xiàng)目習(xí)慣于改完代碼徒爹，執(zhí)行打包荚醒，通常要等2-3秒，然后刷新頁面才能看到效果隆嗅。但React項(xiàng)目由于使用了Webpack裝了Hot Module Replacement（HMR）熱加載插件界阁，你的對代碼的任何修改，都能自動刷新到頁面上胖喳∨萸總之一句話：用了之后再也回不去了。
配置HMR很簡單禀晓，在webpack.config.js里配置plguins加載器精续，再在devServer里加上參數(shù)hot：
var webpack = require('webpack');
module.exports = {
...
devServer: {
hot: true,
...
},
...
plugins: [
new webpack.HotModuleReplacementPlugin()
]
}
webpack.EnvironmentPlugin插件可以讓我們在client端獲取到process.env的環(huán)境變量，例如：
var webpack = require('webpack');
module.exports = {
...
plugins: [
new webpack.EnvironmentPlugin([
'NODE_ENV'
])
]
}
定義了變量process.env.NODE_ENV粹懒，你可以在代碼中用這個變量獲取到NODE_ENV的值：
var env = process.env.NODE_ENV;
webpack.DefinePlugin插件可以為項(xiàng)目定義全局變量重付，例如：
var webpack = require('webpack');
var NODE_ENV = process.env.NODE_ENV; //從命令行獲取NODE_ENV
module.exports = {
...
plugins: [
new webpack.DefinePlugin({
PRODUCTION: JSON.stringify(true),
VERSION: JSON.stringify("5fa3b9"),
BROWSER_SUPPORTS_HTML5: true,
TWO: "1+1",
"typeof window": JSON.stringify("object"),
"NODE_ENV": JSON.stringify(NODE_ENV)
})
]
}
上面最后定義的NODE_ENV，同webpack.EnvironmentPlugin例子中的功能相同凫乖。你可以在代碼中直接使用這些全局變量：
if(!BROWSER_SUPPORTS_HTML5) require("html5shiv");
webpack.optimize.CommonsChunkPlugin用于將多個entry內(nèi)相同的代碼打包到一個共用的js里确垫。這里相同的代碼，不僅僅指源文件內(nèi)寫的代碼帽芽，還包括打包后各個bundle.js里相同的編譯后的代碼删掀。例如entry里兩個文件源碼有相同的依賴：
// main1.jsx
var React = require('react');
var ReactDOM = require('react-dom');
...
// main2.jsx
var React = require('react');
var ReactDOM = require('react-dom');
..
配置文件內(nèi)：
module.exports = {
entry: {
bundle1: './main1.jsx',
bundle2: './main2.jsx'
},
output: {
filename: '[name].js'
},
...
plugins: [
new webpack.optimize.CommonsChunkPlugin('init.js')
]
}
表示將entry里生成的代碼中相同的部分抽出，放入新文件init.js中导街。HTML端需要引入init.js：
<html>
<body>
...
<script src="init.js"></script>
<script src="bundle1.js"></script>
<script src="bundle2.js"></script>
</body>
</html>
html-webpack-plugin用于生成html文件披泪，open-browser-webpack-plugin用于自動打開瀏覽器來加載頁面。例如：
var HtmlwebpackPlugin = require('html-webpack-plugin');
var OpenBrowserPlugin = require('open-browser-webpack-plugin');
module.exports = {
...
plugins: [
new HtmlwebpackPlugin({
title: 'Webpack-demos',
filename: 'index.html'
}),
new OpenBrowserPlugin({
url: 'http://localhost:8080'
})
]
};
這樣你就不用提供index.html搬瑰，也不用打開瀏覽器訪問localhost:8080了款票，只要webpack-dev-server啟動，這些工作都交由webpack替你完成泽论。
更多插件艾少，例如壓縮代碼插件，可以到社區(qū)里去下載翼悴。
最后
Gulp和Webpack都基本可以滿足前端自動化構(gòu)建的任務(wù)缚够。但側(cè)重點(diǎn)不同，感覺Gulp偏重于整個過程的控制鹦赎，用管道將文件連接起來谍椅。但這種處理文件的方式并不支持cmd模塊化，因此需要借用browserify等工具來處理js間的依賴古话，最后完成打包毯辅。而Webpack正是解決了Gulp不支持處理cmd模塊依賴這個痛點(diǎn)，能夠梳理清模塊間的依賴關(guān)系煞额，最后完成打包。所以其實(shí)你可以Gulp + Webpack一起上，兩者并不排它膊毁，用Gulp來控制過程（例如文件移動胀莹，壓縮等），用Webpack來處理源文件間的依賴關(guān)系婚温。
