Как правильно собрать svg-спрайт с помощью webpack?

Question

[Pipop]

С Wepback работаю впервые, следую этой статье: https://sathyalog.wordpress.com/2019/04/04/convert...

Сейчас у меня генерируется icons.svg, но вместе с тем и остальные svg-ки тоже:


Код в конфиге:

{
    test: /\.svg$/,
    loader: 'svg-sprite-loader',
    include: path.resolve(__dirname, 'src/icons/'),
    options: {
         extract: true,
          spriteFilename: 'icons/icons.svg',
        }
   }

И в App.js:

function requireAll(r) {
    r.keys().forEach(r);
}

requireAll(require.context('./icons', true, /\.svg$/));

Подскажите, в чем проблема?

Answer 1

[Pipop]

Стоило сначала выспаться.

Выше пример правильно генерирует спрайт, остальные файлы в корне dist — следствие неправильной конфигурации изображений. Решено так:

{
    test: /\.(png|jpg|svg|webp|gif)$/,
    use: [
                {
                        loader: 'file-loader',
                        options: {
                            name: '[name].[ext]',
                            outputPath: 'images/'
                  }
              }
          ]
}