這篇文章給大家介紹如何實(shí)現(xiàn)基于webpack實(shí)現(xiàn)Web工程搭建，內(nèi)容非常詳細(xì)，感興趣的小伙伴們可以參考借鑒，希望對(duì)大家能有所幫助。

在成都網(wǎng)站設(shè)計(jì)、做網(wǎng)站過(guò)程中，需要針對(duì)客戶的行業(yè)特點(diǎn)、產(chǎn)品特性、目標(biāo)受眾和市場(chǎng)情況進(jìn)行定位分析，以確定網(wǎng)站的風(fēng)格、色彩、版式、交互等方面的設(shè)計(jì)方向。創(chuàng)新互聯(lián)還需要根據(jù)客戶的需求進(jìn)行功能模塊的開(kāi)發(fā)和設(shè)計(jì)，包括內(nèi)容管理、前臺(tái)展示、用戶權(quán)限管理、數(shù)據(jù)統(tǒng)計(jì)和安全保護(hù)等功能。

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添加圖片依賴

webpack是一款十分優(yōu)秀的模塊管理器。它語(yǔ)法易懂，配置簡(jiǎn)單，可以實(shí)現(xiàn)高效快速的搭建前端工程。在實(shí)際項(xiàng)目中，webpack的運(yùn)用已不鮮見(jiàn)。尤其是react框架一經(jīng)推廣后，react好搭檔webpack的地位也日益提升。

關(guān)于如何實(shí)現(xiàn)基于webpack實(shí)現(xiàn)Web工程搭建就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到。

分享題目：如何實(shí)現(xiàn)基于webpack實(shí)現(xiàn)Web工程搭建
鏈接URL：http://www.rwnh.cn/article18/pedddp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供軟件開(kāi)發(fā)、企業(yè)網(wǎng)站制作、微信公眾號(hào)、用戶體驗(yàn)、品牌網(wǎng)站設(shè)計(jì)、企業(yè)建站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)