走近webpack(3)--图片的处理
上一章,咱們學(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)題。
- 上一篇: ASP.NET MVC编程——控制器
- 下一篇: 简单的 密文认证方式