webpack5 svg 导入错误This page contains the following errors: error on line 1 at column 1

mmmmm12342

已于 2024-04-17 15:47:34 修改

阅读量1.5k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： javascript 文章标签： webpack

于 2024-04-17 15:45:26 首次发布

本文链接：https://blog.csdn.net/weixin_43094085/article/details/137875185

javascript 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了在使用webpack时处理svg-url-loader报错的方法，包括添加type属性为javascript/auto，使用新的资源模块配置如asset/inline或asset/resource，并提供了官方文档链接以供参考。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述
使用svg-url-loader处理svg 时报错如上

解决办法:

加上一行 type： 'javascript/auto',或者使用新的资源模块

{ test: /\.svg/, type: 'asset/inline' },
或者
 {
   test: /\.svg$/i,
   type: 'asset/resource', 
   generator: {
     filename: 'static/media/[name][contenthash:8].[ext]', 
   },
 },

官方文档如下
在这里插入图片描述

总结:

"多看文档" "多看文档" "多看文档"

webpack 文档相关地址
https://webpack.docschina.org/guides/asset-modules/