webpack中图片的加载需要使用到file-loader/url-loader,url-loader(可以将图片转为base64)包含了file-loader
module: {rules: [{test: /\.(png|jpeg|jpg|gif)$/,use: [{loader: 'url-loader',options: {// 默认为true,即使用es6模块化;设为false,即使用commonJs模块语法esModule: false, outputPath: 'images', // 图片打包后的路径limit: 100*1024, // 小于100kb的图片转为base64name: '[hash].[ext][query]', //自定义输出文件名}}],// webpack5使用旧的assets loader(如file-loader/url-loader)// 可以加'javascript/auto'来解决图片无法生成images文件夹(目标文件夹)type: 'javascript/auto' }]}
如果觉得《webpack5图片打包处理》对你有帮助,请点赞、收藏,并留下你的观点哦!