Webpack 4 - фоновые изображения в css не отображаются

Question

Надеясь, кто-то может помочь. Не имею большого опыта работы с Webpack (это моя первая попытка). Но я не могу его скомпилировать, когда использую фоновое изображение в своем css. Я годами оглядывался по сторонам и не мог заставить работать предложения других людей. Кто-нибудь сможет помочь?

Моя установка выглядит как

const path = require("path");
const webpack = require("webpack");
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const UglifyJSPlugin = require("uglifyjs-webpack-plugin");
const OptimizeCssAssetsPlugin = require("optimize-css-assets-webpack-plugin");
const BrowserSyncPlugin = require("browser-sync-webpack-plugin");

const config = {
    entry: {
        app: "./js/app.js",
        editor: "./js/editor.js"
        // vendor: ["slick-carousel"]
    },
    output: {
        filename: "./js/[name].js",
        path: path.resolve(__dirname, "dist/")
    },
    module: {
        rules: [
            {
                test: /\.scss$/,
                use: ExtractTextPlugin.extract({
                    fallback: "style-loader",
                    use: ["css-loader", "postcss-loader", "sass-loader"]
                })
            },
            {
                test: /\.css$/,
                use: [
                    { loader: "style-loader" },
                    { loader: "css-loader" },
                    { loader: "resolve-url-loader" }
                ]
            },
            {
                test: /\.js$/,
                exclude: /(node_modules|bower_components)/,
                loader: "babel-loader",
                query: {
                    presets: ["es2015"]
                }
            },
            {
                test: /\.(png|jpg|gif|svg|css)$/i,
                use: [
                    {
                        loader: "url-loader",
                        options: {
                            limit: 8192
                        }
                    }
                ]
            },
            {
                test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
                use: [
                    {
                        loader: "file-loader",
                        options: {
                            name: "[name].[ext]",
                            outputPath: "fonts/"
                        }
                    }
                ]
            }
            // {
            //     test: /\.(jpe?g|png|gif|svg)$/i,
            //     use: ["url-loader", "file-loader"]
            // }
        ]
    },
    plugins: [
        new ExtractTextPlugin("/css/[name].css"),
        new BrowserSyncPlugin({
            proxy: "localhost:8888/onscale",
            port: 3000,
            files: ["**/*.php"],
            browser: [
                "google chrome"
                // "firefox",
                // "firefox developer edition",
                // "safari"
            ],
            // ghostMode: {
            //     clicks: false,
            //     location: false,
            //     forms: false,
            //     scroll: false
            // },
            injectChanges: true,
            logFileChanges: true,
            logLevel: "debug",
            logPrefix: "wepback",
            notify: true,
            reloadDelay: 0
        })
    ]
};

//If true JS and CSS files will be minified
if (process.env.NODE_ENV === "production") {
    config.plugins.push(new UglifyJSPlugin(), new OptimizeCssAssetsPlugin());
}

module.exports = config;

, а моя css равна background-image: url("../../assets/img/misc/wave.png");

Я продолжаю получать сообщение

Модуль не найден: Ошибка: невозможно разрешить '../../assets/img/misc/wave.png'

Спасибо!