下载打包处理样式中与url路径相关的包
npm i url-loader file-loader -D
添加url-loader规则,没有报错
module: {
rules: [
{
test: /\.jpg|png|gif$/,
use: ['url-loader],
}
]
}
加入limit,来指定图片的大小时,图片不能显示
module: {
rules: [
{
test: /\.jpg|png|gif$/,
use: ['url-loader?limit=22228'],
}
]
}
解决步骤:
1.查看浏览器Console是否有报错------未报错
2.重新运行npm run dev,查看终端是否报错-------未报错
3.查看webpack官网搜索Asset Modules ,查询到:
在 webpack 5 之前,通常使用:
在 webpack 5 中使用旧的资产加载器(即raw-loader/url-loader/file-loader)
总而言之,就是如果想用webpack5,但是又不想更改旧的loader配置文件,要用旧的loader来完成当前任务,可以 加type: 'javascript/auto'来实现。
加了type: 'javascript/auto' 后,不会报错,但是还是不会显示图片。
module: {
rules: [
{
test: /\.jpg|png|gif$/,
use: ['url-loader?limit=22228'],
}
],
type: 'javascript/auto'
}
4.在Asset Modules页面有url-loader,点击进入可以看见关于url-loader的一些用法 ,
用排除法,可以除去一些知道意思,并且没有用的设置选项,
limit:可以通过加载程序选项指定限制,默认为无限制。
boolean:启用或禁用将文件转换为 base64。
...
最后,无解。
5.查询浏览器Console报错情况,第一次没显示,刷新后,显示错误信息。
6. 看报错信息查找问题,
(1)寻找index.html:38----------无错误,我只有30行代码,没有38行
(2)查找get是否成功----------全文件无get,没有报错
(3)找寻最后的关键字---------[object%20Module],在webpack官网搜索object module无解
(4) 返回4,在4中有看见esModule(都有module,也在url-loader范围内)
7.看不懂,但是放入代码中试了一下,发现会显示图片且不会报错。
8.最后百度搜索了一下问题[object Module],确认猜想正确,得出:
解决结论:
加esModule: false -_-