webpack 图片打包时,,出现图像未加载问题

一.出现的问题

 

 

 

 

开始采坑:

百度搜索结果都是说,图片那文件没有在dist啊,HTML加载的文件路径错了啊---------------不是一个问题

添加file-loader---------不好使

 

研究了一天多.看了N多个网页之后,

当看到

webpack4.x打包图片文件遇到效果不显示的问题(file-loader加载遇到的狗血问题)(https://blog.csdn.net/IT_CREATE/article/details/106891203)

 这篇文章之后,获得了思路

 

我看视频学习的webpack 是3.X版本,所以老师用3,X版本配置是没问题

当webpack4.x时,图片打包出现了变化,具体请看上面的连接

我查询我的webpack版本:5.48.0

我TMD的是5.X版本,我拿着3.X版本的配置去整5.X配置的内容.这不就相当于拿着前朝的剑,斩本朝的官么

然后我搜索关键字变成:webpack5.x 

找到了

从零搭建基于 Webpack5.x 的 Vue 项目(https://zhuanlan.zhihu.com/p/339679136)

这篇文章 图片配置变成了翻天覆地的变化

1
2
3
4
5
6
7
8
9
10
11
12
      {
          test: /\.png|jpg|gif|jpeg|svg/,
        type: 'asset',
        parser: {
          dataUrlCondition: {
                maxSize: 10 * 1024,
                },
      },
    generator: {
          filename: 'images/[base]',
          },
},

  按这个配置进行配置后,执行成功

共耗时16小时解决问题

 

吐槽一下:webpack中文官网,给的参考手册一点都不正确,浪费大家时间

 

posted @   唐同学  阅读(436)  评论(0编辑  收藏  举报
努力加载评论中...
点击右上角即可分享
微信分享提示