Загрузка изображений из css через file-loader

Всем привет. Пытаюсь разобраться с вебпаком, в частности с загрузкой изображений. Поставил плагины, и в дев-режиме все работает отлично, но при попытке собрать билд, вебпак отказывается видеть файлы из css (background-image). В папке dist есть все изображения, кроме фонового. Я выкрутился, использовав в js-файле required. Есть ли способ лучше?

Второй вопрос - у меня неправильно обрабатываются пути к файлу. Вебпак сохраняет картинки в папку ./src/images/[name].[ext]', получается путь dist/src/images, но при открытии собранного билда, видно что в css путь прописывается как dist/src/styles/src/images

Что не так? Воюю с этим уже несколько часов, но придумать решения не могу...

const path = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const isDev = process.env.NODE_ENV === 'development';
const HtmlWebpackPlugin = require('html-webpack-plugin');
const WebpackMd5Hash = require('webpack-md5-hash');
const webpack = require('webpack');

module.exports = {
    entry: {
        main: './src/index.js',
        profile: './src/profile.js',
        about: './src/about.js'
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'src/js/[name].[chunkhash].js'
    },
    module: {
        rules: [{
            test: /\.js$/,
            use: { loader: "babel-loader" },
            exclude: /node_modules/
        },
        {
            test: /\.css$/i,
            use: [
                (isDev ? 'style-loader' : MiniCssExtractPlugin.loader),
                {
                    loader: 'css-loader',
                    options: { importLoaders: 1 }
                },
                'postcss-loader'
            ] // к этим файлам нужно применить эти пакеты
        },
        {
            test: /\.(png|jpg|gif|ico|svg)$/,
            use: [
                'file-loader?name=./src/images/[name].[ext]',
                {
                    loader: 'image-webpack-loader',
                    options: {
                        mozjpeg: {
                            progressive: true,
                            quality: 65
                        },
                        optipng: {
                            enabled: false,
                        },
                        pngquant: {
                            quality: [0.65, 0.90],
                            speed: 4
                        },
                        bypassOnDebug: true,
                        disable: true,
                    }
                },
            ]
        },
        {
            test: /\.(eot|ttf|woff|woff2)$/,
            loader: 'file-loader?name=/vendor/fonts/[name].[ext]'
        }
        ]
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: 'src/styles/[name].[contenthash].css'
        }),
        new OptimizeCssAssetsPlugin({
            assetNameRegExp: /\.css$/gi,
            cssProcessor: require('cssnano'),
            cssProcessorPluginOptions: {
                preset: ['default'],
            },
            canPrint: true
        }),
        new HtmlWebpackPlugin({
            inject: false,
            hash: true,
            template: './src/index.html',
            filename: 'index.html'
        }),
        new WebpackMd5Hash(),
        new webpack.DefinePlugin({
            'NODE_ENV': JSON.stringify(process.env.NODE_ENV)
        })
    ]
};