1. 引言

隨著互聯(lián)網(wǎng)前端技術(shù)的發(fā)展，在前端工程愈發(fā)復(fù)雜多變的今天，模塊化已經(jīng)變成了前端從業(yè)者津津樂道的話題，各種模塊化工具層出不窮。seajs, requirejs，bower，browserify 以及我們今天所要提到的一款前端模塊化工具—webpack。達(dá)觀數(shù)據(jù)的前端技術(shù)選型中也時常選用webpack作為模 塊化管理工具。

圖1? webpack

2. 什么是webapck

Webpack從誕生到現(xiàn)在也有些年頭了，現(xiàn)在已經(jīng)更新到2.0版本了。它是一款優(yōu)秀的模塊加載器兼打包工具，其最大的特點(diǎn)是視一切資源為模塊，可以把任何形式的資源都視作模塊并引入到工程中，如commonJs模塊，AMD模塊，Sass, Less, Json, img，es6模塊(2.0版本添加支持)等等。并且，你可以通過module, plugins等參數(shù)對依賴的模塊進(jìn)行整合打包，可以替代一部分gulp, grunt 類似的打包功能。

圖2 modules with dependencies

3. 為什么要用webpack

webpack作為一款模塊管理器有著自己獨(dú)具的優(yōu)勢。

首先就是上一段提到的，webpack會把任何形式的資源都當(dāng)做模塊進(jìn)行打包，傳統(tǒng)的模塊加載器僅僅針對js，webpack可以對任何形式的資源進(jìn)行打包，使得項目管理起來更加的方便。

其次，webpack對AMD/CMD的模塊加載模式都能兼顧，可以按個人的喜好選擇模式進(jìn)行模塊依賴管理。

再者，webpack可以替代一部分gulp/grunt的工作。他的loader機(jī)制可以實現(xiàn)一部分壓縮混淆的操作。

4. 如何使用webpack

筆者準(zhǔn)備的是一個單頁demo，此處首先列一下目錄結(jié)構(gòu)，僅做參考。

├── dist?? #發(fā)布目錄

├── package.json

├── src?? #工程源碼

│?? ├── assets?? #靜態(tài)資源

│?? ├── index.html

│?? ├── index.js?? #入口文件

│?? ├── js

│?? ├── styles

│?? └── utils?? #工具庫

└── webpack.config.js?? #webpack配置文件

4.1 安裝

在項目的根目錄下運(yùn)行

npm init

npm install -D webpack

創(chuàng)建webpack配置文件webpack.config.js

4.2 配置

一個webpack配置主要包含entry, output, modules, plugins和resolve這幾類字段。

entry定義了文件的入口配置，output對應(yīng)的是項目的輸出配置。（如圖3所示）這里的filename使用了hash字段添加hash后綴，解決因緩存導(dǎo)致的頁面內(nèi)容不更新的問題。

本文所提供的例子是單頁模式，所以并沒有多個入口。如果有多個入口的需求，可以通過以下的形式（圖4）生成。編譯后，代碼會在outputDir目錄下生成多個文件的bundle.js。

圖3 webpack? entry/output配置

圖4 webpack 多入口的entry/output配置

Loaders是webpack.config中的核心內(nèi)容。它規(guī)定了每個模塊使用哪種加載器來處理。具體配置如圖5所示?？梢杂^察到，loaders包含了很多個loader, 每個loader會使用test字段匹配文件名，如果符合其正則，那么可以通過loader字段對該文件進(jìn)行加載。所有的加載器都需要使用npm進(jìn)行安裝。例如：如果我想使用css-loader，那么在根目錄下運(yùn)行npm install css-loader -D即可安裝對應(yīng)的loader，不用把loader通過require的方式引入，webpack自己可找到對應(yīng)的加載器。然后在loader字段中寫明loader: ‘css-loader’，這里的‘-loader’可以省略不寫。文件也有可能會使用多個加載器，使用!進(jìn)行分隔，多個loader加載的執(zhí)行順序是從右向左，在實際操作過程中需要注意這一細(xì)節(jié)。涉及到參數(shù)的字段使用?進(jìn)行添加，使用’&’進(jìn)行分隔多個參數(shù)。

圖5 webpack loader配置

Loaders功能固然強(qiáng)大，但也有很多事情不能通過loaders實現(xiàn)。例如，webpack的loader默認(rèn)會把所有的文件都打包到一個bundle中，而實際的項目中為了網(wǎng)站的性能，html、css、js等資源一般都是需要分開并有選擇的進(jìn)行異步加載的。這時候就需要plugins在上線過程中進(jìn)行一些處理了。在此，介紹一些常用的plugins。

圖6 ?webpack plugins配置

HtmlWebpackPlugin，用于創(chuàng)建服務(wù)wepack打包的bundle的HTML文件。該插件需要安裝npm依賴html-webpack-plugin，并通過require引用進(jìn)來。

ExtractTextPlugin，用來從bundle中剝離css的插件，一般在生成線上版本時加入到plugins中。需要通過npm 來安裝extract-text-webpack-plugin依賴。

UglifyJsPlugin，用于壓縮混淆打包生成的bundle文件。這個plugin是webpack內(nèi)置的，將webpack require進(jìn)來后，通過webpack.optimize.UglifyJsPlugin進(jìn)行調(diào)用。

OptimizeCssAssetsPlugin，用于壓縮css文件。需要安裝npm依賴optimize-css-assets-webpack-plugin。

Resolve是用來簡化模塊配置的一項。其中比較常用的字段有alias, extensions等。alias定義模塊別名，避免出現(xiàn)依賴名稱過長的引用。 extensions定義默認(rèn)的擴(kuò)展名，webpack默認(rèn)忽略的擴(kuò)展名是.js，也就是說在項目中你可以通過require(‘js/index’)即可獲取到j(luò)s目錄下的index.js文件，而通過extensions，你可以設(shè)置更多可以識別的后綴。

圖7 ?webpack resolve配置

4.3 命令行設(shè)置

寫好了webpack.config.js后，我們可以在根目錄下運(yùn)行webpack命令，即可實現(xiàn)webpack的工作流。這里順便提一下webpack命令常用的一些參數(shù)。

-colors? 輸出帶顏色的命令

-progress? 輸出打包顯示

-watch?? 動態(tài)監(jiān)測依賴文件變化并進(jìn)行更新

-hot?? 熱插拔

-p?? 對打包的文件進(jìn)行壓縮

在實際項目中，如果有g(shù)ulp/grunt一類的工具，可以使用gulp/grunt的自身機(jī)制設(shè)置不同運(yùn)行環(huán)境。如果沒有此類工具，也可以選擇將命令封裝到npm scripts中。如圖所示，按照這種方式進(jìn)行設(shè)置，只需要運(yùn)行npm run + 關(guān)鍵字，即可運(yùn)行對應(yīng)的命令，避免了在調(diào)試過程中頻繁的輸入大量 的字符和參數(shù)。

圖8?npm scripts設(shè)置

5. webpack的圖片加載

圖片資源引用方式多變，在使用webpack的過程中，不同場景下的圖片引用往往會困擾著初學(xué)者。這里簡單介紹一些webpack的圖片處理方式。

一般來說，webpack中的圖片都可以通過url-loader來實現(xiàn)加載（圖9）。這里主要針對js和css文件中依賴的圖片資源。

圖9 通過url-loader實現(xiàn)webpack對圖片的加載

url-loader也是一個很實用的loader，它可以對圖片資源進(jìn)行篩選，當(dāng)圖片很小時，url-loader可以選擇將圖片編譯成base64格式放進(jìn)bundle文件中；也可以實現(xiàn)給圖片添加hash碼等等。

如果圖片是通過js代碼進(jìn)行加載，需要注意的是，圖片資源必須要用require的方式進(jìn)行引用,否則 webpack不能識別相應(yīng)的圖片。

圖10 使用require進(jìn)行圖片加載

如果圖片是通過scss/css進(jìn)行加載。首先，也圖片也必須通過入口文件將圖片添加至依賴中。這樣即使圖片路徑有發(fā)生變動，webpack也會在后續(xù)的處理中將css中對應(yīng)的路徑進(jìn)行替換。

對于html中的圖片處理方式，首先是webpack對于多html的支持并不好，進(jìn)而導(dǎo)致相關(guān)頁面中的圖片路徑問題很難解決。如果是使用webpack+react的多入口方式進(jìn)行項目搭建，react的自身特性決定了它可以通過require的方式解決此類問題。但如果不是react頁面我們應(yīng)該如何處理呢？

筆者在這里向大家推薦一個插件html-withimg-loader。安裝了html-withimg-loader后，在入口 文件中require相應(yīng)的html文件，webpack即可識別html中對應(yīng)的img標(biāo)簽了。

圖11 在入口文件中添加含img元素的html

如果圖片希望在入口html中也想識別圖片資源，可以使用HtmlWebpackPlugin插件中的template字段對其進(jìn)行設(shè)置，在template中補(bǔ)充相應(yīng)的loader，即可完成配置。

圖12 使用html-withimg-loader插件對入口html添加圖片依賴

6. 總結(jié)

webpack是一款十分優(yōu)秀的模塊管理器。它語法易懂，配置簡單，可以實現(xiàn)高效快速的搭建前端工程。在實際項目中，webpack的運(yùn)用已不鮮見。尤其是react框架一經(jīng)推廣后，react好搭檔webpack的地位也日益提升。本文從多個角度對webpack進(jìn)行了闡述，相信讀者在閱讀完后定能有所收獲。