webpack在打包图片后出现的问题：background-image显示为“url([object Module])”，图片无法显示

webpack在打包图片后出现的问题：background-image显示为“url([object Module])”，图片无法显示

原因：

因为url-loader默认使用es6模块化解析，解析时会出现[object Module]。但是webpack5之后就没有这个问题了，可能默认已经配置。

解决方案：

关闭url-loader的es6Module，让他以commonjs的方式解析
在配置中添加：“esModule: false”

{
                // 问题：默认处理不了html中img图片
                //处理图片资源
                test:/\.(jpg|png|gif|jpeg)$/,
                //使用一个loader
                loader:'url-loader',
                options:{
                    // 图片大小小于8kb,就会被base64处理
                    // 优点：减少请求数量 (减轻服务器压力)
                    // 缺点：图片体积会更大（文件请求速度更慢）
                    limit:8*1024,
                    //问题：因为url-loader默认使用es6模块化解析，而html-loader引入图片是commonjs，解析时会出现[object Module]
                    esModule: false,
                    // 给图片进行重命名
                    // [hash:10]取图片的hash的前10位
                    // [ext]取文件原来的扩展名
                    name:'[hash:10].[ext]'
                }