Webpack模块使用.svg文件和自定义配置解析失败警告

Question

我在React/RRails应用程序中使用Webpack。我的团队在应用程序的某些部分使用.svg图像。

我们有两个主要的用例。

1. 在样式表中使用SVG作为背景图像(我们使用.scss(
2. 在React组件中使用SVG，使用一种名为SVGR的工具将SVG转换为React组件

因此，我们在config/webpack/environment.js文件中设置了以下配置(Rails的Webpack集成使用这种不寻常的Webpack配置方案(：

const { environment } = require("@rails/webpacker")
const fileLoader = environment.loaders.get("file")
const babelLoader = environment.loaders.get("babel")
// ... other stuff
environment.loaders.insert("svg", {
test: /.svg$/,
issuer: { test: /.jsx?$/ },
use: babelLoader.use.concat([
"@svgr/webpack"
])
}, { after: "file" })
fileLoader.exclude = /.(svg)$/i
environment.loaders.insert("scss svg", {
test: /.svg$/,
issuer: { test: /.scss?$/ },
use: ["file-loader"]
}, { after: "svg" })
// ... more other stuff
module.exports = environment

然后，我们在Webpack构建中得到以下错误：

WARNING in ./app/javascript/shared/svg/Phone.svg 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

奇怪的是，对于我描述的两个用例，配置实际上都是按原样工作的。

正如您所看到的，我们在加载程序配置中使用issuer选项，该选项指示Webpack根据执行SVG的import的文件类型使用哪个加载程序。

我想知道是否有任何Webpack专家可以解释为什么Webpack仍然会发出这个警告，尽管事实上有加载程序被配置为处理文件类型，而且当没有"；真实的"；输出捆绑包中的问题(没有运行时错误或损坏的图像(。

谢谢！

Answer 1

我不知道如何解决它，但我知道发生了什么。

在某个时刻，您正在使用模板参数进行动态导入。这个参数足够宽松，可以匹配你的.svg文件。这意味着webpack将成为svg的入口点，因为它不知道你是否会匹配它们。因为它们是条目，所以没有发布者。

我不知道是否有一种方法可以指定一个带有无颁发者的加载程序。然而，如果您尝试使动态导入中的模板字符串更加严格，使其无法与svg匹配，您会发现警告会消失。