錯誤重現

專案中使用了 url-loader 來處理圖片。配置放到 webpack.config.js 檔案中。url-loader 相關的配置如下：

module.exports = {
  // 其他的程式碼已忽略
  module: {
    rules:[
      // 其他的程式碼已忽略
      {
        test: /\.(ttf|eot|woff|svg)$/i,
        loader: 'url-loader'
      },
      // 圖片處理，關鍵部分
      {
        test: /\.(png|jpg|gif)$/,
        loader: 'url-loader'
 
,
        options: {
          limit: '1000',
          name: '[name].[ext]?[hash]'
        }
      }
    ] // end rules
  } // end module
}

這種配置偶爾會出現圖片修改後，webpack-dev-server 會快取舊的圖片檔案的情況。解決方法請閱讀接下來的內容。

解決方法

在配置檔案中，[name] 表示檔案原來的名字；[ext] 表示檔案的副檔名；[hash] 表示 webpack 根據檔案內容計算出的檔案雜湊值。我可以這樣理解檔案的雜湊值：同一個檔案，如果內容做了修改，那麼這個檔案的雜湊值一定會改變。上面的程式碼中，注意這麼一行：

name: '[name].[ext]?[hash]'

這表明編譯後，圖片檔名並沒有改變。只是在編譯後的程式碼中，在圖片 URL 的後面出現一個問號加雜湊值。URL 看起來像這個樣子：

http://localhost:8080/img/myimg.jpg?adcb45fae7f0060074872c79ab43637f8

這種方式一般也能對瀏覽器快取起作用。然而，個別情況下會碰到 webpack-dev-server 快取圖片，一直不更新圖片的情況。此時，就算你把硬碟上的舊圖片刪除，換上同一個名字的新圖片，也無濟於事。

那麼該怎麼解決這個問題呢？我們可以利用上面提到的 [name]、[ext] 和 [hash] 來讓 webpack 在釋出的時候自動把圖片改名。新的配置如下所示：

module.exports = {
  // 其他的程式碼已忽略
  module: {
    rules:[
      // 其他的程式碼已忽略
      {
        test: /\.(ttf|eot|woff|svg)$/i,
        loader: 'url-loader'
      },
      // 圖片處理，關鍵部分
      {
        test: /\.(png|jpg|gif)$/,
        loader: 'url-loader',
        options: {
          limit: '1000',
          name: '[name]_[hash].[ext]?[hash]'
        }
      }
    ] // end rules
  } // end module
}

這麼配置後，webpack 每次會生成一個名稱類似 filename_bab45fae7f0060074872c79ab43637f8.png 的檔案。因為連檔名都改了，所以可以避免 webpack-dev-server 的圖片檔案快取。新檔名稱的模式： “圖片檔名稱”_“檔案雜湊值”.“副檔名”。