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;

这是我的文件结构：

另一个问题，当我在App.js中编写Javascript代码时，它不在最终的编译文件中。我应该在哪里写我的JS？