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