标签：webpack Webpack 添加 报错 版本 png 图片

1、问题描述：

A、在 webpack.config.js 中也添加了代码为：

{
     test: /\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/, 
     use: "url-loader?limit=16940"
}

B、在 ‘.css’ 文件中添加的信息为：

.box {
    width: 300px;
    height: 300px;
    background: red url(../img/sass.png); 
}

C、但此时就是不能将图片的信息加载出来(但背景颜色能添加出来)；
显示结果为：

2、问题原因：

是因为 Webpack 版本的原因，由于我使用的 Webpack 的版本是 “webpack”: “^5.57.1” ，已经是 5.0 版本及以上了，而采用之前 5.0 版本以下的方法是行不通的；

3、问题解决的方法：

A、在 webpack.config.js 添加的代码修改为：(其余的信息不变)

{
     test: /\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/, 
     type: 'asset'
}

B、此时信息就能显示，显示的图片结果为：

C、想看文档最好去官网：
网址为：https://webpack.docschina.org/guides/asset-modules/

4、小结：

哪里有不对或不合适的地方，还请大佬们多多指点和交流！

标签：webpack,Webpack,添加,报错,版本,png,图片
来源： https://blog.csdn.net/weixin_43405300/article/details/120745452

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。