1.引言

隨著互聯(lián)網(wǎng)前端技術(shù)的發(fā)展，在前端工程愈發(fā)復(fù)雜多變的今天，模塊化已經(jīng)變成了前端從業(yè)者津津樂(lè)道的話題，各種模塊化工具層出不窮。seajs, requirejs，bower，browserify 以及我們今天所要提到的一款前端模塊化工具—webpack。達(dá)觀數(shù)據(jù)的前端技術(shù)選型中也時(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版本添加支持)等等。并且，你可以通過(guò)module, plugins等參數(shù)對(duì)依賴的模塊進(jìn)行整合打包，可以替代一部分gulp, grunt類似的打包功能。

圖2 modules with dependencies

3.為什么要用webpack

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

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

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

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

4.如何使用webpack

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

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

├── package.json

├── src #工程源碼

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

│ ├── index.html

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

│ ├── js

│ ├── styles

│ └── utils #工具庫(kù)

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

4.1安裝

在項(xiàng)目的根目錄下運(yùn)行：

npm init

npm install -D webpack

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

4.2配置

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

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

本文所提供的例子是單頁(yè)模式，所以并沒(méi)有多個(gè)入口。如果有多個(gè)入口的需求，可以通過(guò)以下的形式(圖4)生成。編譯后，代碼會(huì)在outputDir目錄下生成多個(gè)文件的bundle.js。

圖3 webpack entry/output配置

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

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

圖5 webpack loader配置

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

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

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

UglifyJsPlugin，用于壓縮混淆打包生成的bundle文件。這個(gè)plugin是webpack內(nèi)置的，將

webpack require進(jìn)來(lái)后，通過(guò)webpack.optimize.UglifyJsPlugin進(jìn)行調(diào)用。

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

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

圖6 webpack resolve配置

4.3命令行設(shè)置

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

-colors 輸出帶顏色的命令

-progress 輸出打包顯示

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

-hot 熱插拔

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

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

5.webpack的圖片加載

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

一般來(lái)說(shuō)，webpack中的圖片都可以通過(guò)url-loader來(lái)實(shí)現(xiàn)加載(圖7)。這里主要針對(duì)js和css文件中依賴的圖片資源。(施列宇 達(dá)觀數(shù)據(jù))

圖7 通過(guò)url-loader實(shí)現(xiàn)webpack對(duì)圖片的加載

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

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

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

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

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

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

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

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

圖10 使用html-withimg-loader插件對(duì)入口html添加圖片依賴

6總結(jié)

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

達(dá)觀數(shù)據(jù)(http://www.datagrand.com)專注于企業(yè)大數(shù)據(jù)技術(shù)服務(wù)，以***的多層智能挖掘算法，實(shí)現(xiàn)對(duì)海量用戶行為和文本數(shù)據(jù)的深入分析和挖掘，為企業(yè)提供智能文本分析、精準(zhǔn)用戶行為建模、個(gè)性化推薦、智能搜索等***數(shù)據(jù)挖掘功能。

【本文為51CTO專欄作者“達(dá)觀數(shù)據(jù)”的原創(chuàng)稿件，轉(zhuǎn)載可通過(guò)51CTO專欄獲取聯(lián)系】

戳這里，看該作者更多好文