webpack5-打包img,icon等各种资源无法显示的问题及解决

原因

Webpack5已经废弃了url-loader、file-loader，使用后资源无法正常加载，图片无法正常显示

参考文档：
https://webpack.docschina.org/migrate/5/#clean-up-configuration

解决方案

1.在use后添加type

rules: [{
                test: /\.less$/,
                use: ['style-loader', 'css-loader', 'less-loader']
            },
            {
                //处理图片资源
                test: /\.(jpg|png|gif|jpeg)$/,
                //------下载url-loader file-loader
                //loader只有一个时
                loader:'url-loader',
                options:{
                    //设置当图片小于8kb就会被base64处理
                    //优点：减少请求数量（减轻服务器压力）/缺点:图片体积会更大（文件请求速度更慢）
                    limit:8*1024,
                    esModule:false
                },
                type: 'javascript/auto'
            }
        ]

Ps:
url-loader默认采用的是ES6模块语法，即import '...'，在引入css等文件时comandjs语法就会报错(require('...')),将esModule设置为false即可

2.使用资源模块类型（asset module type）代替

rules: [{
                test: /\.less$/,
                use: ['style-loader', 'css-loader', 'less-loader']
            },
            {
                //处理图片资源
                test: /\.(jpg|png|gif|jpeg|svg)$/,

                //------使用webpack5内置的type
                type: "asset",
                parser:{
                    dataUrlCondition:{
                        maxSize:8*1024  //data转成url的条件，也就是转成bas64的条件,maxSize相当于limit
                    }
                },
                generator:{
                    //geneator中是个对象，配置下filename，和output中设置assetModuleFilename一样，将资源打包至imgs文件夹
                    filename:"imgs/[name].[hash:6][ext]"  //[name]指原来的名字，[hash:6]取哈希的前六位，[ext]指原来的扩展名
                }
            }
        ]

参考：https://blog.csdn.net/lin_fightin/article/details/115140736