const webpack = require("webpack");
const path = require("path");
const glob = require("glob");
const CleanWebpackPlugin = require("clean-webpack-plugin"); // dist
const HtmlWebpackPlugin = require("html-webpack-plugin"); // html
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const HtmlWebpackInlineSourcePlugin = require("html-webpack-inline-source-plugin");
const UglifyJSPlugin = require("uglifyjs-webpack-plugin");
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");

function buildEntriesAndHTML() {
    // entry
    const result = glob.sync("**/animate.js");
    /*const config = {
        hash: true,
        inject: true
    };*/
    const entries = {};
    const htmls = [];
    result.forEach(item => {
        const one = path.parse(item);
        const outputfile = one.dir.split("/").slice(-1)[0];
        entries[outputfile] = "./" + item;
        htmls.push(
            new HtmlWebpackPlugin({
                // ...config,
                template: "./" + one.dir + "/"+outputfile+".html",
                // filename: outputfile === "index" ? "./index.html" : "./" + outputfile + "/index.html", // html
                filename: "./" + one.dir + "/"+outputfile+".html",
                chunks: [outputfile],
                inlineSource: ".(js|css)$"
            })
        );
    });
    // htmls.push();
    return {
        entries,
        htmls
    };
}
const final = buildEntriesAndHTML();
module.exports = {
    entry: final.entries,
    output: { // 
        path:  __dirname+"/dist",
        // publicPath: __dirname+"/build/",
        filename: "[name]/[name].js", //
        // publicPath:"/build/dsp/dsp-static-test/"
    },
    devtool: "inline-source-map",
    module: {
        rules: [
            {
                test:/\.css$/,
                use:[
                    MiniCssExtractPlugin.loader,
                    "css-loader",
                    {loader: "postcss-loader",options:{plugins:[require("autoprefixer")("last 100 versions")]}}
                ]
            },
            {
                test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
                use:[
                    {
                        loader: "url-loader",
                        options: {
                            limit: 8192,
                            name: "image/[name].[hash:7].[ext]"
                        }
                    },
                    {
                        loader: "image-webpack-loader",// 
                        options: {
                            bypassOnDebug: true,
                        }
                    }
                ]
            },
            /*{
                test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
                use: [
                    {
                        loader: "file-loader",
                        options: {
                            name: "image/[name].[hash:7].[ext]"
                        }
                    }
                ]
            },*/ //background-imagejsbackground-image
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: "babel-loader"
                }
            },
            {
                test: /\.html$/,
                use: [
                    {
                        loader: "html-loader",
                        options: {minimize: true} // 
                    }
                ]
            }
        ]
    },
    plugins: [
        new CleanWebpackPlugin(["build"]),
        new MiniCssExtractPlugin({
            filename: "[name]/[name].css",
            chunkFilename: "[name].css"
        }),
        ...final.htmls,
        new UglifyJSPlugin({
            uglifyOptions: {
                warnings: false,
                parse: {},
                mangle: true, // Note `mangle.properties` is `false` by default.
                toplevel: false,
                nameCache: null,
                ie8: false,
                keep_fnames: false,
                output: {
                    comments: false,
                    beautify: false,
                },
                compress: true,
            }
            /*compress: {
                // UglifyJs
                warnings: false,
                exclude:["/node_modules/"],
                //  `console` ie
                drop_console: true,
                // 
                collapse_vars: true,
                // 
                reduce_vars: true
            },
            output: {
                // 
                beautify: false,
                // 
                comments: false
            }*/
        }),
        new OptimizeCSSAssetsPlugin({
            assetNameRegExp: /\.css\.*(?!.*map)/g,  // /\.css$/g
            cssProcessor: require("cssnano"),
            cssProcessorOptions: {
                discardComments: { removeAll: true },
                //  cssnano  z-index
                safe: true,
                // cssnano autoprefixer
                // autoprefixer
                // autoprefixer
                // postcssautoprefixer
                autoprefixer: false
            },
            canPrint: true
        }),
        // new HtmlWebpackInlineSourcePlugin()
    ],
    resolve: {
        extensions: [".js", ".json", ".jsx", ".css"]
    },
}

what is the reason why webpack uses url-loader,file-loader image-webpack-loader to package images that are not displayed in base64 format, does not show referenced images, and generates pictures represented by hash values? Trouble God to help see where there is a problem, very anxious, thank you very much!
this is after generation:

according to the first floor and the second floor, file-loader, has been removed but still cannot resolve the inline written background-image path and the background-image dynamically written by js