在前端開發(fā)中,圖片是經(jīng)常使用到的資源.

在使用圖片的時(shí)候,我們一般會(huì)有兩種方式.

• 使用圖片地址 url
• 使用 base64 編碼.

對(duì)于小圖片而言,我們一般直接使用 base64 編碼,把圖片寫入到 css 代碼中.
這樣的好處是可以減少一個(gè)http請(qǐng)求.

之前我們打包的是js 和 css 文件.

結(jié)構(gòu)是從我們寫代碼的 app 目錄,將所需要的資源打包進(jìn) dist 目標(biāo)目錄.

image.png

我們已經(jīng)知道了如何將 .js|.css 文件,利用 webpack 工具打包到 dist 文件.

但開發(fā)的時(shí)候,又有很多圖片等靜態(tài)資源,我們?nèi)绾位?webpack

打包到目標(biāo)目錄中去呢?

新建一個(gè)基于webapck的項(xiàng)目.

有個(gè)點(diǎn)說(shuō)一下

不管你干了什么蓖救！
只要代碼里出現(xiàn)了 import require 或者在樣式中使用了 url .
在 webpack 眼里，這些玩意都叫模塊旁理。
除了 .js|.json 外责球，其他的通過這些方式導(dǎo)入的模塊
(不管你是.jpg,.css 還是.xxx 亂七八招的什么東西）
webpack 都不認(rèn)識(shí)翅睛。
它不認(rèn)識(shí)，就會(huì)去找看你有沒有配置對(duì)應(yīng) xx.xx 模塊(文件)的 loader.

step 1.

安裝 url-loader & file-loader .
url-loader 依賴 file-loader

npm i --save-dev @url-loader@1.1.2 file-loader@2.0.0

step 2.

編寫 .css 文件,在內(nèi)部寫上一段需要使用到背景圖片的樣式.

body {
  background-color: rgba(0, 0, 0, 0.9);
  background-image: url('../images/beijing.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

step 3.

在 webpack.config.js 中,定義這個(gè)處理圖片文件的loader.

{
        test: /\.(jpg|jpeg|png|gif|svg|webp)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 1024 * 100, // 小于100kb --> url --> base64編碼
              // 這里如果只寫一個(gè)文件名,那么圖片將打包到  entry.output.path 路徑下,也就是 dist/name.ext
              // name: '[name].[ext]',// 大于100KB 把 url(xx) 替換成 ../images/[name].[ext]
              // 如果,這里寫的名字包含路徑,那么也是相對(duì)于 entry.ouput.path 路徑
              // 同時(shí)這個(gè)名字將會(huì)作為生成的css中url中的圖片地址.
              name:'images/[name].[ext]', // -> 存儲(chǔ)路徑是 dist/images/name.ext
              publicPath: '/webpack-demo-img/dist/' // 加上這個(gè)配置,就等于是 pulblicPath + name = css.url中的鏈接地址.
            }
          },

對(duì)于 url-loader 補(bǔ)充說(shuō)明:(有個(gè)坑,關(guān)于為什么配置publicPath)

• 在webpack打包過程中,如果遇到了 import (xxx.jpg) require(xxx.jpg) 或者是樣式代碼中的 background-image:url(xxxx) 時(shí),會(huì)把這個(gè)內(nèi)容交給 url-loader 處理.

• url-loader 根據(jù) options 里的兩項(xiàng)配置對(duì)圖片進(jìn)行相關(guān)處理.

  • limit : 數(shù)字,單位字節(jié). 102400 = 102400bytes = 100KB. 對(duì)于小于 100 KB 的圖片,url-loader 會(huì)對(duì)其進(jìn)行 base64 編碼,并用來(lái)替換css中url這塊代碼部分.比如 background-image: url('../images/beijing.jpg'); ===> background-image: url('base64xxxxxxx');
  • name: 對(duì)于大于 limit 設(shè)置的值的圖片,如果文件名中包含路徑,那么就會(huì)以 webpack.config.js 中配置的輸出目標(biāo)路徑為根路徑,來(lái)配置這里的路徑.比如 : options.name="images/[name].[ext]" ===> dist/images/[name].[ext]. 同時(shí)將css代碼中的 background-image:(url) 的 **url部分替換成dist/images/[name].[ext]**這樣的格式.

• publicPath: 這是一個(gè)非常重要的參數(shù).它解決了當(dāng) url-loader 在打包大于 options.limit 值的圖片,同時(shí)設(shè)置background-image:url(options.name) 而導(dǎo)致的最終打包出來(lái)的css文件中,url 訪問錯(cuò)誤,而出現(xiàn)圖片無(wú)法訪問的問題.

  • 一般情況下,在dist目錄,我們都是以一個(gè) images 文件夾放圖片. 一個(gè) css 文件夾放樣式.

  .
  ├── app
  │ ├── assets
  │ │ ├── images
  │ │ │ └── beijing.jpg
  │ │ └── style
  │ │ └── index.less
  │ └── index.js
  ├── dist
  ├── bundle.js
  ├── css
  │ └── style.css
  ├── images
  │ └── beijing.jpg
  └── index.html

• 在上述例子中,我們最后打包的 css 文件存放路徑在 dist/css/style.css 文件中. new ExtractTextPlugin('css/style.css'),

• 圖片文件我們?cè)O(shè)置 images/beijing.png 的時(shí)候,圖片會(huì)打包進(jìn) dist/images/beijing.jpg

• url-loader.options.name 我們?cè)O(shè)置的是 images/beijing.jpg -> 這就會(huì)導(dǎo)致 css 文件中的 background-url:(images/beijing.png)

• 所以,對(duì)于 css 文件中的 images/beijing.png 是在同級(jí)目錄下找 images/beijing.png ,將無(wú)法獲取到圖盤內(nèi)容.應(yīng)該改成 ../images/beijing.png 就可以成功獲取.

• 但是如果修改 url-loader.options.name 為 ../images/beijing.png 又會(huì)導(dǎo)致圖片文件夾存儲(chǔ)路徑發(fā)生變化.

• 所以,這里需要使用絕對(duì)路徑在替換css文件中的background-image:(url)

  • 圖片仍然進(jìn)入 dist/images/beijing.png
  • 樣式還是進(jìn)入 dist/css/style.css
  • 但是url-loader替換background-image:url(/webpack-demo/dist/images/beijing.jpg) 才行.
  • 于是就是配置替換的根目錄 publicPath:/webpack-demo-img/dist/ 為網(wǎng)站根目錄.
  • 最終url-loader替換的目錄為 /webpack-demo-img/dist/images/beijing.jpg ===> publicPath + name

step 4.

運(yùn)行 npm run build

image.png

step 5.

打開瀏覽器,查看效果.

image.png

對(duì)于圖片尺寸大于 url-loader.options.limit 的圖片,已經(jīng)測(cè)試通過,并url鏈接也是對(duì)的.

那么現(xiàn)在添加一張小于 url-loader.options.limit(100KB) 的圖片.

image.png

改寫 index.html 文件和 .less 文件.

index.html
<div class="img"></div>

index.less
 .img {
    width: 200px;
    height: 200px;
    background-image: url('../images/1-44kb.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }

重新運(yùn)行 npm run build

查看結(jié)果

image.png

打開 webpack 打包生成的 style.css 文件.

image.png

url-loader 確實(shí)將小于 options.limit 值的圖片文件設(shè)置成了 base64 編碼,并寫入到了 css 文件對(duì)應(yīng)的 url 中了.