webpack配置——asset 模块解决图片被多 loader 重复打包冲突问题

项目背景

在Webpack项目打包中，我想用url-loader或file-loader处理图片，确保JavaScript和LESS文件里的图片能正常打包加载。项目技术版本：

• webpack@5.98.0
• css-loader@7.1.2
• file-loader@6.2.0
• url-loader@4.1.1

问题出现

1. 路径引用问题：用相对路径打包后，JavaScript文件里的图片能正确放到dist/images，但LESS文件里的图片无法正常访问。
2. 打包文件异常：打包生成一个正常图片images/img86fe1648.jpg，还有个43字节的b0e653bae58a43c60c40.jpg，内容是module.exports = "/images/img86fe1648.jpg";，不是图片数据。

排查过程

1. 调整加载器：把file-loader换成url-loader，设esModule: false，问题没解决。
2. 多方面排查：清除node_modules/.cache重新打包，给loader加verbose看详细日志，问题依旧。

问题原因

css-loader 6.x后能处理CSS文件里url()引入的图片，无需额外loader。但项目中file-loader或url-loader也处理了LESS里的图片，导致重复打包起冲突，用了css-loader打包的图片，却因冲突无法正常显示。

解决办法

用Webpack 5内置的asset模块，设parser.dataUrlCondition.maxSize区分大小图片处理方式，用generator.filename指定输出路径和文件名，成功解决图片打包异常和多余文件问题。