在 css webpack 中为图像添加哈希答案

【问题标题】：Add hash to images in css webpack在 css webpack 中为图像添加哈希
【发布时间】：2020-02-27 16:02:27
【问题描述】：

有没有办法在使用 Webpack 编译时向 CSS 中引用的图像添加哈希值？

我正在使用 React，并且每个组件文件都有单独的 scss 文件（例如 header.js 和 header.scss）。在一些 scss 文件中，我有一个背景图像。但是，我的服务器具有超高的缓存级别，并且正在将图像缓存在已编译的 css 文件中。

我想做的是，在 css 编译期间，为每个图像引用添加一个哈希值，该值将在每次构建时更新。例如，它会编译成这样：

.background-class {
  background-image: url('images/my-image.jpg?0adg83af0');
}

我尝试使用 url-loader，但是因为这些图像没有在 JS 文件中被引用，我认为它们没有被拾取？

【问题讨论】：

标签： css webpack

【解决方案1】：

我最终使用了 PostCSS 和 PostCSS CacheBuster 的组合。如果有人想将此添加到他们的 webpack 设置中，您需要运行 npm i postcss-loader postcss-cachebuster，然后在您的 webpack.config.js 中，将 const PostCssCacheBuster = require('postcss-cachebuster'); 添加到文件顶部，并在 css-loader 之间添加以下加载器配置和 sass-loader（显然，如果你使用这个设置）：

            loader: 'postcss-loader',
            options: {
              sourceMap: true,
              plugins: () => [
                PostCssCacheBuster({
                  imagesPath: "/src/Frontend",
                  cssPath: "/" + distributionPath,
                  supportedProps: [
                    'background',
                    'background-image'
                  ],
                  paramName: 'v='
                })
              ]
            }
          },

【讨论】：