webpack使用url-loader打包图片之后base64格式的图片不显示？

Question

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功能
                // 使用postcss的autoprefixer功能
                autoprefixer: false
            },
            canPrint: true
        }),
        // new HtmlWebpackInlineSourcePlugin()
    ],
    resolve: {
        extensions: ['.js', '.json', '.jsx', '.css']
    },
}

webpack使用url-loader,file-loader image-webpack-loader打包图片之后base64格式的图片不显示,这是什么原因呢？麻烦大神帮忙看下哪里写的有问题，很着急，感激不尽！！

Answer 1

url-loader和file-loader用一个就好了，为啥要都用