原因
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]指原来的扩展名
}
}
]