Webpack4: Изображения не компилируются загрузчиком в моем файле Pug

Question

Я новичок в Webpack.Я пытаюсь создать своего рода шаблон, поддерживающий Pug, Sass, шрифты и изображения.Но у меня проблема: модуль загрузчика файлов правильно компилирует изображения из файлов Sass, но не из файлов Pug.Я не знаю, как это решить ... Вот мой webpack.config.js:

const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const autoprefixer = require("autoprefixer");
const CleanWebpackPlugin = require("clean-webpack-plugin");

const entry = {
    "index": ["/src/app.js", "/src/stylesheets/style.scss"]
}

entry["index"].push("webpack-hot-middleware/client");

const config = {
    entry: "./src/app.js",
    output: {
        path: path.resolve(__dirname, "dist"),
        filename: "[name].bundle.js"
    },
    module: {
        rules: [
            {
                test: /\.pug$/,
                use: ["html-loader?attrs=false", "pug-html-loader"]
            },
            {
                test: /\.scss$/,
                use: [
                    "css-hot-loader",
                    MiniCssExtractPlugin.loader,
                    "css-loader",
                    "postcss-loader",
                    {
                        loader: "resolve-url-loader"
                    },
                    {
                        loader: "sass-loader",
                        options: {
                            sourceMap: true,
                            sourceMapContents: false
                        }
                    }
                ]
            },
            {
                test: /\.(otf|eot|ttf|woff|woff2)$/,
                use: [{
                    loader: "file-loader",
                    options: {
                        name: "fonts/[name].[ext]"
                    }
                },],
            },
            {
                test: /\.(gif|png|jpe?g|svg)$/i,
                use: [{
                    loader: "file-loader",
                    options: {
                        name: "images/[name].[ext]"
                    }
                }
                ]
            }
        ],
    },
    plugins: [
        new HtmlWebpackPlugin({
            filename: "index.html",
            template: "src/index.pug",
            inject: false
        }),
        new MiniCssExtractPlugin({
            filename: "style.css",
        }),
        new webpack.LoaderOptionsPlugin({
            options: {
                postcss: [
                    autoprefixer()
                ]
            }
        }),
        new CleanWebpackPlugin("dist/*.*", {} )
    ],
    devServer: {
        contentBase: path.resolve(__dirname, "./src"),
        watchContentBase: true,
        historyApiFallback: true,
        inline: true,
        open: true,
        hot: true
    },
    devtool: "eval-source-map",
};

module.exports = config;

И это моя файловая структура:

Другая проблема, когда я пишу код Javascript в App.js, его нет в конечном скомпилированном файле.Где я должен написать свой JS?