webpack圖片處理

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]原來得檔案字尾。

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