webpack打包图片

一：问题代码

首先贴下问题代码！刚刚开始的时候使用的是html-loader进行图片的打包，之后每次build之后出现两张图片，一张正常加载一个是坏了的。恰巧自己的html文件中引入的是这个错误的。下面是出现这种情况的代码，之后找了官方文档没发现问题所在，这就是代码玄学了。接着非要图片打包只能想到使用html-withimg-loader进行图片打包。

 module: {
        rules: [
            {
                test: /\.css$/,
                use:['style-loader','css-loader']
            },
            {
                test: /\.less$/,  //需要下载less-loader 和less
                use:['style-loader','css-loader','less-loader']
            },

            //问题：处理不了html中img标签引入的图片
            {   //url-loader 和 file-loader
                test: /\.(jpg|png|gif)/,
                loader: 'url-loader',  //多个loader使用use
                options: {
                    //图片小于8kb就会被base64处理
                    //优点减少请求数量
                    //缺点体积会变大（文件的请求速度就变慢）
                    limit:8 * 1024,  //以下的图片进行base64转化
                    //问题： url-loader 默认使用es6模板化解析，而html-loader引入的图片是commonjs，解析出现问题
                    //解决：关闭url-loader 的es6模板话，使用common解析，
                    // esModule: true
                }
            },
            {
                test: /\.html$/,
                loader: 'html-loader' // 处理html文件中的img标签（负责引入图片）
            }
        ]
    },

 

欢迎大家探讨下这个问题？