webpack圖片處理

407指導員發表於2020-12-27

webpack圖片處理

如果在css檔案中,背景設定成圖片,我們直接通過之前步驟配置css,然後就會報錯,圖片又需要對應的loader進行配置。直接在css中運用圖片,以及新增了依賴。

在這裡插入圖片描述

url-loader配置

第一步安裝url-loader

npm install url-loader@1.1.2 --save-dev

第二部在webpack.config.js的rules新增

{
  test: /\.(png|jpg|gif|jpeg)$/,
  use: [{
    loader:'url-loader',
    options: {
      limit:8192
    }
  }]
}
//當載入圖片,小於limit時,會將圖片編譯成base64字串形式
//當載入圖片,大於limit時,會將圖片使用file-loader模組載入

所以還要安裝一個file-leader

npm install --save-dev file-loader@3.0.1

這個loader不需要在config.js裡配置

同時需要在config.js裡配置output

output: {
  /*絕對路徑,動態獲取,第一個引數獲取當前檔案所在路徑,我們要放到dist資料夾下*/
  path: path.resolve(__dirname, 'dist'),
  filename: 'bundle.js',
  publicPath:'dist/'
},

publicPath屬性目的是,將所有涉及到url的路徑前都加上值得路徑。為得是將打包後得圖片放到dist資料夾下,這個資料夾用於釋出。

現在是由於我們沒有將html打包放入dist檔案,所以需要加路徑找到圖片,如果放入,就可以直接找到打包後圖片。

當我們安裝完成後,大於8kb檔案再次打包,會將該圖片放到dist資料夾下,採用雜湊值重新命名圖片

在這裡插入圖片描述

但是真實開發我們還是需要有一定規範的名字

在這裡插入圖片描述

在options中新增

options: {
  //當載入圖片,小於limit時,會將圖片編譯成base64字串形式
  //當載入圖片,大於limit時,會將圖片使用file-loader模組載入
  limit:8192,
  name:'img/[name].[hash:8].[ext]'
}

意思是:在img資料夾下,[name]就是原來得名字.[hash:8]取八位雜湊值.[ext]原來得檔案字尾。

注意這裡要加[],如果不加括號會當成字串,而不是變數。

在這裡插入圖片描述

相關文章