Добавьте ха sh к изображениям в css веб-пакете

Question

Есть ли способ добавить значения ha sh к изображениям, на которые есть ссылки в CSS при компиляции с помощью Webpack?

Я использую React, и у меня есть отдельные файлы s css для каждый файл компонента (например, header. js & header.s css). В некоторых файлах s css у меня есть фоновое изображение. Однако мой сервер имеет очень высокий уровень кэширования и кэширует изображения в скомпилированных css файлах.

Что я хотел бы сделать, так это добавить во время компиляции css ха sh значение для каждой ссылки на изображение, которое будет обновляться при каждой сборке. Так, например, это скомпилировалось бы в следующее:

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

Я пытался использовать url-загрузчик, но поскольку на эти изображения нет ссылок в файлах JS, я не думаете, их забрали?

Answer 1

Я использовал комбинацию Post CSS и Post CSS CacheBuster. Если кто-то хочет добавить это в настройку своего веб-пакета, вам нужно запустить 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='
                })
              ]
            }
          },