vue loader 一个扩展的不同加载器答案

【问题标题】：vue loader different loaders for one extensionvue loader 一个扩展的不同加载器
【发布时间】：2018-08-29 05:26:41
【问题描述】：

我目前正在尝试在我的 vue-loader/webpack 模板项目中使用 SVG。

我需要加载不同类型的 SVG：
图标：在我的组件中使用并加载 svg-inline 加载器，用于内联和自定义 css。
SVGImages : 在 img 标签内使用或使用 url 加载器加载的背景图像，就像其他图像一样。

我在 webpack.base.conf.js 中尝试了以下配置：

{
    test: /\.svg$/,
    oneOf: [
      {
        resourceQuery: /ico/, // image.svg?ico,
        use: 'svg-inline-loader'
      },
      {
        resourceQuery: '/normal/',
        use: 'url-loader'
      }
    ]
  }

但我有一个错误：您可能需要适当的加载程序来处理此文件类型。

错误是关于背景图像中使用的 svg，svg 内联加载器似乎工作正常。

感谢您的帮助

【问题讨论】：

标签： javascript svg webpack vue.js vue-loader

【解决方案1】：

如果您尝试在没有查询的情况下加载 svg 文件，那么我认为您不应该使用resoueceQuery。所以：

{
    test: /\.svg$/,
    oneOf: [
      {
        resourceQuery: /ico/, // image.svg?ico,
        use: 'svg-inline-loader'
      },
      {
        use: 'url-loader'
      }
    ]
}

这应该包括以下情况：

image.svg?ico – svg-inline-loader
image.svg - 网址加载器
image.svg?foo – url-loader

查看此 webpack 问题以供参考：https://github.com/webpack/webpack/issues/3497

【讨论】：