带有 .svg 文件和自定义配置的 Webpack 模块解析失败警告答案

【问题标题】：Webpack module parse failed warning with .svg files and custom config带有 .svg 文件和自定义配置的 Webpack 模块解析失败警告
【发布时间】：2020-12-09 01:20:06
【问题描述】：

我在我的 React/Rails 应用程序中使用 Webpack。我的团队在我们的部分应用中使用了.svg 图像。

我们有两个主要用例。

在我们的样式表中使用 SVG 作为背景图片（我们使用 .scss）。
在 React 组件中使用 SVG，通过一个名为 SVGR 的工具将 SVG 转换为 React 组件。

因此，我们在 config/webpack/environment.js 文件中设置了以下配置（Rails' Webpack integration 使用这种不寻常的方案进行 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 option，它根据正在执行 SVG 的 import 的文件类型来指示 Webpack 使用哪个加载器。

我想知道是否有任何 Webpack 专家可以解释为什么 Webpack 仍会发出此警告，即使实际上有加载器配置为处理文件类型，而且当没有输出包中的“真正”问题（没有运行时错误或损坏的图像）。

谢谢！

【问题讨论】：

导入Phone.svg的文件是什么？
我们的应用中有一对。它们都是.jsx 文件

标签： javascript ruby-on-rails reactjs svg webpack

【解决方案1】：

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

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

我不知道是否有办法用 no issuer 指定加载程序。但是，如果您尝试使动态导入中的模板字符串更加严格，使其无法匹配 svg，您会发现警告消失了。

【讨论】：