How to properly assemble svg sprite using webpack?

Question

JavaScript

I work with Wepback for the first time, I follow this article: https://sathyalog.wordpress.com/2019/04/04/convert...

Now I have icons.svg generated, but at the same time other svg files too


: config:

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

And in App.js:

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

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

Tell me, what's the problem?

Answer 1

Should have slept first.
The above example correctly generates the sprite, the rest of the files in the dist root are the result of incorrect image configuration. Resolved like this:

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