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]"
                        }
                    }
                ]
            },
            {
                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 pictures in base64 format are not displayed after webpack packages them with url-loader,file-loader image-webpack-loader? Trouble God to help see where there is a problem, very anxious, thank you very much!