Почему webpack подменяет картирки при сборке?

Question

[equilibrium09]

webpack.conf

const config = {
    mode: 'development',
    //mode: "production",
    entry: ['./assets/js/common.js'],
    output: {
        filename: 'index.js',
        path: path.resolve(__dirname, 'bundle')
    },
    devtool: 'inline-source-map',
    devServer: {
        contentBase: './bundle'
    },
    module: {
        rules: [
            {
                test: /\.scss$/,
                use: [

                    {
                        loader: "file-loader",
                        options: {
                            name: '[contenthash].css',
                            outputPath: 'css',
                            publicPath: '/css'
                        }
                    },

                    'extract-loader',
                    'css-loader',
                    'sass-loader',
                ]
            },

            {
                test: /\.js$/,
                exclude: /node_modules/,
                rules: [
                    {
                        loader: 'babel-loader',
                        options: {
                            presets: [
                                "@babel/env"
                            ]
                        }
                    }

                ]
            },
            {
                // ASSET LOADER
                test: /\.(eot|ttf|woff|woff2)$/,
                loader: 'file-loader',
                options: {
                    outputPath: 'fonts',
                    publicPath: '/fonts',
                    name: '[name].[ext]'
                }
            },
            {
                test: /\.pdf$/,
                loader: "file-loader",
                options: {
                    outputPath: '/pdf',
                    publicPath: '/pdf',
                    name: '[contenthash].pdf'
                }
            },
            {
                test: /\.(png|jpe?g|gif|svg)$/i,
                use:[
                    {
                        loader: 'file-loader',
                        options: {
                            outputPath: 'img/',
                            publicPath:'/img/',
                            name: '[hash].[ext]',
                        }
                    }
                ]
            },
            {
                test: require.resolve('jquery'),
                use: [{
                    loader: 'expose-loader',
                    options: 'jQuery'
                },{
                    loader: 'expose-loader',
                    options: '$'
                }]
            }
        ]
    },

    //remove comments from JS files
    optimization: {

        runtimeChunk: 'single',
        splitChunks: {
            cacheGroups: {
                vendor: {
                    test: /[\\/]node_modules[\\/]/,
                    name: 'vendors',
                    chunks: 'all'
                }
            }
        }
    },
    plugins: [
        new webpack.ProgressPlugin(),
        new CleanWebpackPlugin(),
        new webpack.ProvidePlugin({
            $: "jquery",
            jQuery: "jquery",
            "window.jQuery": "jquery",
        }),
        new HtmlWebpackPlugin ({
            inject: true,
            hash: true,
            template: "./assets/tamplate/index.ejs",
            filename: 'index.html',
        }),
    ],
};

input(scss):

...
.phone:before {
  content: "";
  display: block;
  position: absolute;
  width: 24px;
  height: 24px;
  background: url('../img/a-arrow-dropdown.svg') no-repeat center;
  right: 5px;
  top: 50%;
  margin-top: -12px;
  transition: all .15s ease-in-out;
}
...

output(css):

...
.phone:before {
  content: "";
  display: block;
  position: absolute;
  width: 24px;
  height: 24px;
  background: url(/img/a-user.svg) no-repeat center;
  right: 5px;
  top: 50%;
  margin-top: -12px;
  transition: all .15s ease-in-out; }
...

вот собственно и все...
только и остается вопрос "почему? "
кстати шрифты он тоже не загружает...