title: Why doesn't background url work with svg files in webpack?
body: <p><strong>webpack.base.config.js:</strong></p>
  
  <pre><code>const MiniCssExtractPlugin = require('mini-css-extract-plugin');
  const path = require('path');
  
  const resolve = dir =&gt; path.join(__dirname, '..', dir);
  
  module.exports = {
    entry: {
      app: './src/index.js',
    },
    output: {
      path: resolve('dist'),
      filename: 'js/[name].[hash].js',
      publicPath: process.env.NODE_ENV === 'production' ? '/' : '/',
    },
    optimization: {
      splitChunks: {
        cacheGroups: {
          vendor: {
            chunks:'initial',
            name: 'vendor',
            test: 'vendor',
            enforce: true,
          },
        },
      },
    },
    resolve: {
      extensions: ['.js', '.json'],
    },
    module: {
      rules: [
        {
          test: /\.jsx?$/,
          exclude: /node_modules/,
          enforce: 'pre',
          use: {
            loader: 'eslint-loader',
          },
        },
        {
          test: /\.jsx?$/,
          exclude: /node_modules/,
          use: {
            loader: 'babel-loader',
          },
        },
        {
          test: /\.html$/,
          exclude: /node_modules/,
          use: {
            loader: 'html-loader',
          },
        },
        {
          test: /\.(sa|sc|c)ss$/,
          exclude: /node_modules/,
          use: [
            MiniCssExtractPlugin.loader,
            {
              loader: 'css-loader',
              options: {
                sourceMap: true,
              },
            },
            {
              loader: 'postcss-loader',
              options: {
                sourceMap: true,
              },
            },
            {
              loader: 'sass-loader',
              options: {
                sourceMap: true,
              },
            },
          ],
        },
        {
          test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
          exclude: /node_modules/,
          loader: 'url-loader',
          options: {
            limit: 10000,
            name: '[hash]-[name].[ext]',
          },
        },
        {
          test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
          exclude: /node_modules/,
          loader: 'url-loader',
          options: {
            limit: 10000,
            name: '[hash]-[name].[ext]'
          },
        },
        {
          test: /\.(woff2?|eot|ttf|otf|svg)(\?.*)?$/,
          exclude: /node_modules/,
          loader: 'file-loader',
          options: {
            limit: 10000,
            name: '[name]-[hash].[ext]',
          },
        },
      ],
    },
  };
  </code></pre>
  
  <p>I write in css like this:</p>
  
  <pre><code>.icon {
    width: 4.2rem;
    height: 5.3rem;
    background: url('../img/icon.svg') left top no-repeat;
    background-size: contain;
  }
  </code></pre>
  
  <p>And instead of the icon, this is what happens:</p>
  
  <pre><code>background: url(data:image/svg+xml;base64,bW9kdWxlLmV4cG9ydHMgPSBfX3dlYnBhY2tfcHVibGljX3BhdGhfXyArICJpY29uLWRvYy1hNjk0NTdkY2IzZWQ1OWVhZmZhZjE4MDA3MTkwNWI1Yi5zdmciOw==) left top no-repeat
  </code></pre>
  
  <p>The project structure is as follows:</p>
  
  <pre><code>project
  --public
  ----index.html
  --src
  ----assets
  ------img
  --------icon.svg
  ------scss
  --------icons.scss (тут и пишу)
  ----components
  ----views
  ----...
  </code></pre>
  
  <p><strong>Question:</strong> with this config, the import inside jsx works fine, both dev mode and in sale. But the background url does not work, that is, the SVG picture is not visible, everything is fine with PNG.</p>