时间戳

首页 > 解决方案 > 在 css webpack 中为图像添加哈希

css - 在 css webpack 中为图像添加哈希

问题描述

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

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

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

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

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

标签： csswebpack

解决方案

我最终使用了 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='
                })
              ]
            }
          },

推荐阅读