0
点赞
收藏
分享

微信扫一扫

下载url-loader,用limit指定图片大小后,显示不出图片

骨灰级搬砖工 2022-04-07 阅读 81

下载打包处理样式中与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                                                                                                                   -_-

举报

相关推荐

0 条评论