webpack4 處理圖片

前言

1.webpack 在處理圖片的時候，會涉及一下幾個問題：

• 圖片的大小問題，好比是否壓縮圖片，限制圖片大小
• 圖片引用方式的問題，是用base64 的格式引用圖片，仍是用url 路徑引用圖片
• 圖片路徑問題，開發時寫的圖片路徑和發佈時的圖片路徑不一樣

2.跟圖片路徑有關的文件主要有一下幾類：

• css 裏的background-image
• html 裏的<img> 標籤：模板文件裏的<img> 標籤、主頁面的<img> 標籤
• js 裏引入的img

3.經常使用依賴

• file-loader：在css 和html 主頁中，相對路徑的圖片都會被處理，發佈到輸出目錄中
• url-loader：是對file-loader的封裝，所以在安裝了file-loader和url-loader 後，在webpack.config.js 中只對url-loader 作配置便可。url-loader的自身功能是給圖片一個limit 標準，當圖片小於limit時，使用base64 的格式引用圖片；不然，使用url 路徑引用圖片。
• image-webpack-loader：壓縮圖片。這個用得不算太多，由於前期能夠直接讓UI設計把圖片壓縮好，像ps 就能夠自動的批量壓縮圖片。

file-loader 示例

一，安裝依賴

npm i -D file-loader

二，file-loader 的配置，詳情參考 https://www.webpackjs.com/loa...

{
    test: /\.(png|svg|jpg|gif)$/,
    use: {
        loader: 'file-loader',
        options: {
            name:'assets/[name].[ext]',
        }
    }
},

三，圖片的引用

1.主頁

<img src="'../../assets/sm.jpg'"/>

2.模板頁，模板頁裏的<img> 標籤中相對路徑的圖片不會被loader 解析，所以須要使用require 引用圖片

<img src="${require('../../assets/sm.jpg')}"/>

3.css

.layer{
  width: 86px;
  height: 59px;
  background-image:url("../../assets/sm.jpg");
}

四，運行 webpack --mode production，圖片被輸出到指定目錄

url-loader 示例

一，安裝依賴

npm i -D file-loader
npm i -D url-loader

二，url-loader 的配置

{
    test: /\.(png|svg|jpg|gif)$/,
    use: {
        loader: 'url-loader',
        options: {
            name:'assets/[name].[ext]',
            limit:2048
        }
    }
},

三，圖片小於limit 時，會直接把圖片的數據流，即base64 格式，寫入到<img> 標籤或css 中，如

參考網址： https://www.webpackjs.com/loa...