What is the best way to set up work with pictures and fonts in WEBPACK?

Question

webpack

Please tell me how to set up webpack:

I want css, html to use images and fonts from files that I copy through CopyWebpackPlugin, but due to the fact that css uses images (and css is imported into js), they are run through url -loader and are converted to BASE64, which increases the css size hundreds of times.

(and this scares me, as I understand, these files are already stored in css, since base64 is the string representation of these files, but how good is this)

If you use a file-loader, then the following problem arises:

{
        test: /\.(png|jpg|jpeg|gif|svg)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              publicPath: '../',
              name: `assets/image/[name].[ext]`,
            }
          },
        ],
      },
      {
        test: /\.(ttf|woff|woff2|eot|svg)/,
        use: [
          {
            loader: 'file-loader',
            options: {
              publicPath: '../',
              name: `assets/fonts/[name].[ext]`,
            },
          },
        ],
      },

He does not see the difference between a svg image and a svg font and spits out both:

which, in principle, can be solved by adding its type to the file names (for font fonts at the end, and for img images) and do the same for regular expressions. But how right is this?

Answer 1

Everyone does this, I think if you are too lazy to take a steam bath over the code, then it’s easier to make a definition like everyone else)