上一章，咱們學(xué)了如何用webpack來(lái)打包c(diǎn)ss，壓縮js等。這一篇文章咱們來(lái)學(xué)習(xí)一下如何用webpack來(lái)處理圖片。廢話(huà)不多說(shuō)，咱們開(kāi)始吧。

　　首先，咱們隨便找一張你喜歡的圖片放到src/images目錄下，然后把圖片設(shè)置為背景圖片，代碼是這個(gè)樣子。

src/index.html：

<div id="title"></div> <div id="name"></div> <div id="img"></div> <script src="./entry1.js"></script> <script src="./entry2.js"></script>

src/css/index.css：

body{background:red; } #title{background:orange; color:blue; } #img{background: url(../images/dog.jpg);width: 500px;height: 500px; }

　　ok,我們寫(xiě)完了代碼，現(xiàn)在webpack是無(wú)法解析的，我們可以打包試一下，發(fā)現(xiàn)會(huì)報(bào)錯(cuò)。嗯，沒(méi)有加入loader肯定會(huì)報(bào)錯(cuò)的！

　　那么，接下來(lái)我們來(lái)安裝一下打包圖片需要用到的loader：

npm install --save-dev file-loader url-loader

　　在等待安裝之際，我們先解釋一下這兩個(gè)loader分別都是做什么的：

　　file-loader：解決引用路徑的問(wèn)題，拿background樣式用url引入背景圖來(lái)說(shuō)，我們都知道，webpack最終會(huì)將各個(gè)模塊打包成一個(gè)文件，因此我們樣式中的url路徑是相對(duì)入口html頁(yè)面的，而不是相對(duì)于原始css文件所在的路徑的。這就會(huì)導(dǎo)致圖片引入失敗。這個(gè)問(wèn)題是用file-loader解決的，file-loader可以解析項(xiàng)目中的url引入（不僅限于css），根據(jù)我們的配置，將圖片拷貝到相應(yīng)的路徑，再根據(jù)我們的配置，修改打包后文件引用路徑，使之指向正確的文件。

　　url-loader：如果圖片較多，會(huì)發(fā)很多http請(qǐng)求，會(huì)降低頁(yè)面性能。這個(gè)問(wèn)題可以通過(guò)url-loader解決。url-loader會(huì)將引入的圖片編碼，生成dataURl。相當(dāng)于把圖片數(shù)據(jù)翻譯成一串字符。再把這串字符打包到文件中，最終只需要引入這個(gè)文件就能訪(fǎng)問(wèn)圖片了。當(dāng)然，如果圖片較大，編碼會(huì)消耗性能。因此url-loader提供了一個(gè)limit參數(shù)，小于limit字節(jié)的文件會(huì)被轉(zhuǎn)為DataURl，大于limit的還會(huì)使用file-loader進(jìn)行copy。其實(shí)簡(jiǎn)單來(lái)說(shuō)，url-loader的作用就是根據(jù)配置來(lái)判斷圖片是否需要轉(zhuǎn)換成字符串編碼，來(lái)使項(xiàng)目的性能和速度更快。

　　那么，接下來(lái)我們?cè)趍odule中配置一下loader，現(xiàn)在我們的module看起來(lái)是這樣的，其中l(wèi)imit參數(shù)就是用來(lái)判斷需要把圖片轉(zhuǎn)換成字符串編碼的大小范圍，單位是B。

module:{rules: [{test: /\.css$/,use: [ 'style-loader', 'css-loader' ]},{test:/\.(png|jpg|gif)/ ,use:[{loader:'url-loader',options:{limit:500000}}]}]},

　　唉？不對(duì)啊，你安裝了兩個(gè)loader，為什么只用了url-loader啊？！因?yàn)閡rl-loader內(nèi)置了file-loader。這里安裝file-loader是為了方便下面用到的時(shí)候不用再安裝了。

　　OK，咱們來(lái)打包一下看看會(huì)發(fā)生什么吧。打開(kāi)頁(yè)面發(fā)現(xiàn)我們引入的圖片已經(jīng)顯示了。

　　下面說(shuō)一下怎么把css從js中分離出來(lái)，我們上面的css都是通過(guò)import引入到j(luò)s中再進(jìn)行打包的，這樣不利于維護(hù)，也違背了js，css，html互相分離的基本原則。但是一旦分離了css，那么原本的圖片路徑就會(huì)出現(xiàn)問(wèn)題。我們下面來(lái)解決一下。但是webpack官方認(rèn)為css就應(yīng)該打包進(jìn)js中以減少http請(qǐng)求。所以，仁者見(jiàn)仁智者見(jiàn)智，怎么做看具體情況來(lái)選擇吧。

　　其實(shí)要解決這個(gè)問(wèn)題很簡(jiǎn)單，用插件，extract-text-webpack-plugin。怎么安裝就不說(shuō)了，已經(jīng)說(shuō)了好多遍了，跟上面的安裝方法一樣，改個(gè)名字而已。

　　既然是插件，我們就需要在config中引入并且new一個(gè)實(shí)例之后才可以使用：

module:{rules: [{test: /\.css$/, /*修改了一下使用的方式*/use: extractTextPlugin.extract({fallback: "style-loader",use: "css-loader"})},{test:/\.(png|jpg|gif)/ ,use:[{loader:'url-loader',options:{limit:500000}}]}] }, //插件，用于生產(chǎn)模版和各項(xiàng)功能 plugins:[new uglify(),new htmlPlugin({minify:{removeAttributeQuotes:true},hash:true,template:'./src/index.html'}), /*這里new了一個(gè)插件的實(shí)例*/ new extractTextPlugin("css/index.css") ],

　　ok,我們興致勃勃地去打包一下，竟然報(bào)錯(cuò)了，報(bào)錯(cuò)的主要原因是extract-text-webpack-plugin當(dāng)前還沒(méi)有支持webpack4.x，那么我們?cè)撛趺崔k呢？別急，咱們想想辦法解決：

npm install --save-dev extract-text-webpack-plugin@next /*更新版本*/

　　這樣就可以打包了，但是我們打包完成之后發(fā)現(xiàn)index.html并沒(méi)有引入相應(yīng)的css，頁(yè)面沒(méi)有任何css，別急，我們來(lái)進(jìn)行下一步解決這個(gè)問(wèn)題。

　　我們?cè)赾onfig中定義一個(gè)路徑變量：

var webpath={publicPath:"http://192.168.199.124:9090/" } /*就是你在devServer中定義的host和端口*/

　　然后在output屬性中定義一個(gè)publicPath屬性：

output:{path:path.resolve(__dirname,'dist'),filename:'[name].js',publicPath:webpath.publicPath },

　　并且要把之前配置在devServer中的host修改成你自己的本機(jī)host，我的是http://192.168.199.124，如果你不知道，可以在cmd中使用ipconfig來(lái)查詢(xún)。

　　然后，我們npm run server一下，發(fā)現(xiàn)打開(kāi)的頁(yè)面已經(jīng)有圖片和樣式了。

　　那么我們就學(xué)會(huì)了如何處理css中的圖片問(wèn)題，下面我們學(xué)習(xí)一下如何處理html中的圖片（也是用插件，各種插件，你可以去github隨便找一個(gè)你喜歡的可以處理這中問(wèn)題類(lèi)型的插件）：

　　這里我們使用html-withimg-loader，然后在config中如下配置：

npm install html-withimg-loader --save /*因?yàn)樵谏a(chǎn)環(huán)節(jié)中也需要用到，所以使用--save命令*/ {test: /\.(htm|html)$/i,use:[ 'html-withimg-loader'] }

　　完事了。。。。。。簡(jiǎn)單吧。

　　前邊的內(nèi)容，打包后的圖片并沒(méi)有放到images文件夾下，要放到images文件夾下，其實(shí)只需要配置我們的url-loader選項(xiàng)就可以了。前面也說(shuō)到了，要限制limit的大小，不然圖片在小于limit的范圍內(nèi)會(huì)進(jìn)行轉(zhuǎn)碼，咱們來(lái)小小的修改下代碼就可以了：

{test:/\.(png|jpg|gif)/ ,use:[{loader:'url-loader',options:{limit:500,outputPath:'images/'}}] }

　　我們?cè)趕rc/index.html中加入一個(gè)圖片的引入：

<div id="title"></div> <div id="name"></div> <div id="img"></div> <!-- 通過(guò)src引入圖片 --> <img id="htmlImg" src="./images/dog.jpg">

　　然后在src/css/index.css下寫(xiě)上這樣的css：

body{background:red; } #title{background:orange; color:blue; } #img{background: url(../images/dog.jpg);width: 500px;height: 500px; } /*設(shè)置圖片大小*/ #htmlImg{width: 500px;height: 500px; }

　　然后我們npm run server一下看看結(jié)果吧。這里說(shuō)明一下，可能細(xì)心的小伙伴會(huì)問(wèn)，為什么以前打包用npm run build 而這里用npm run server呢？

　　通常情況下，我們有兩種環(huán)境，一種是dev，一種是prod，也就是開(kāi)發(fā)環(huán)境和生產(chǎn)環(huán)境，一般在開(kāi)發(fā)環(huán)境下，我們本地會(huì)通過(guò)webpack-dev-server通過(guò)express起一個(gè)node服務(wù)器，而不是真正的打包，而我們以前所一起學(xué)習(xí)的webpack使用方法即包含了開(kāi)發(fā)環(huán)境下的需求，又有生產(chǎn)環(huán)境下的內(nèi)容，當(dāng)我們要把整個(gè)項(xiàng)目打包上線(xiàn)的時(shí)候，我們會(huì)壓縮js，壓縮圖片，整合資源以減少http請(qǐng)求，但是我們?cè)陂_(kāi)發(fā)環(huán)境下的時(shí)候，往往需要更多的功能以使代碼更容易閱讀和debug。再有就是，我們?cè)谝雸D片的時(shí)候，用的是絕對(duì)地址，也就是node起服務(wù)器后你本地的ip地址，如果不通過(guò)npm run server起本地服務(wù)器，是無(wú)法找到圖片的。有興趣的小伙伴可以試試npm run build然后手動(dòng)打開(kāi)dist下的html看看效果。

　　至此，圖片的處理方式就結(jié)束了。下一章咱們來(lái)看看怎么處理less啊，sass這樣的css預(yù)編譯語(yǔ)言，畢竟現(xiàn)在很少用css來(lái)寫(xiě)樣式了。

?

轉(zhuǎn)載于:https://www.cnblogs.com/zaking/p/8593897.html

總結(jié)

以上是生活随笔為你收集整理的走近webpack（3）--图片的处理的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。