Missing .wepb & srcset (x2, x3) output. What's wrong?

[gorbatova]

webpack.config.js

module.exports = function imageRules () {
  return {
    rules: [
      {
        test: /\.(bmp|gif|jpe?g|png)$/,
        oneOf: [
          {
            issuer: reStyle,
            oneOf: [
              {
                test: /\.svg$/,
                loader: 'svg-url-loader',
                options: {
                  name: '[path][name].[ext]?[hash:8]',
                  limit: 4096 // 4kb
                }
              },
              {
                loader: 'url-loader',
                options: {
                  name: '[path][name].[ext]?[hash:8]'
                }
              }
            ]
          },
          {
            loader: 'file-loader',
            options: {
              name: '[path][name].[ext]?[hash:8]'
            }
          }
        ],
        use: [
          {
            loader: '@brigad/ideal-image-loader',
            options: {
              name: '[path][name].[ext]?[hash:8]',
              webp: {
                quality: 80
              },
              srcset: true,
              warnOnMissingSrcset: true
            }
          }
        ]
      }
    ]
  }
}

usage

import img from './images/img.png'

output (console.log(img))

{
  "x1": {
    "src": "/assets/src/components/home-page/images/img.png?66b822b8",
    "preSrc": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAHCAYAAAAxrNxjAAAAAklEQVR4AewaftIAAAD4SURBVAXBQUoCUQDH4d//zYwzjeS4CDK0aGodtMlo4SJq17aEoAN0gKAbteoCtQj0BGXLIKFMo0BEMIZ6817fp16v77OsRhRFSMJ7j3MOa0vGbx9Ua1WeHp8JXWEYfU+RfkniCKuQen2ZyXjCQWePSiVitdEgvLvv8XBzy+XRCu+fM/ovBafXV5x1T5CECQyBMYTGW3Yyy+CrQCZlq1oQeLFYLHDOkSQJMiLc2G4ybbf5QSgIWGqJfHMN7z2SsH8WSYSHxx3OL7pEUYj3HmtLjBHz+RznHJIoS4darfX9PM930zTNvPdyzjWNMYrjeCTJF0UxGw5fB//zamGNf5nA6gAAAABJRU5ErkJggg==",
    "webp": "/assets/src/components/home-page/images/img.png?66b822b8"
  }
}

[gorbatova]

Well the problem was with loaders order in my config. My final config looks this way:

module.exports = function imageRules () {
  return {
    rules: [
      {
        test: /\.(bmp|gif|jpe?g|png)$/,
        oneOf: [
          {
            issuer: /\.(css|less|styl|scss|sass|sss)$/,
            oneOf: [
              {
                test: /\.svg$/,
                loader: 'svg-url-loader',
                options: {
                  name: '[path][name].[ext]?[hash:8]',
                  limit: 4096 // 4kb
                }
              },
              {
                loader: 'url-loader',
                options: {
                  name: '[path][name].[ext]?[hash:8]'
                }
              }
            ]
          },
          {
            loader: '@brigad/ideal-image-loader',
            options: {
              name: '[path][name].[ext]?[hash:8]',
              webp: {
                quality: 80
              },
              srcset: true,
              warnOnMissingSrcset: true
            }
          },
          {
            loader: 'file-loader',
            options: {
              name: '[path][name].[ext]?[hash:8]'
            }
          }
        ]
      }
    ]
  }
}

[Titozzz]

Great news! Is there anything we can change in the docs to make it clearer?

[gorbatova]

Since the problem was in my config and it depends on basic understanding on how webpack loaders work together I can assume that you could cover it a litte in the docs to avoid similar questions in the future :)

[adrienharnay]

You shouldn't need url-loader or file-loader for ideal-image-loader to work, could you try without it please?