【072】解决webpack-dev-server对图片缓存的问题

错误重现

项目中使用了 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 的图片文件缓存。新文件名称的模式： “图片文件名称”_“文件哈希值”.“文件扩展名”。