如何同时使用Webpack的file-loader和svg-inline-loader来加载SVG文件？

Question

我已经搜索了互联网寻找一种使用file-loader和svg-inline-loader来加载svg的解决方案。更确切地说，我想要分别使用这两个选项，但是我似乎无法正确设置webpack.config。以下是我的配置：

module.exports = {
  entry: {
    app: Path.resolve(__dirname, '../src/scripts/index.js')
  },

  module: {
    rules: [
      {
        test: /\.mjs$/,
        include: /node_modules/,
        type: 'javascript/auto'
      },
      {
        test: /\.(svg)(\?.*)?$/,
        use: {
          loader: 'svg-inline-loader?classPrefix',
        }
      },
      {
        test: /\.(ico|jpg|jpeg|png|gif|eot|svg|otf|webp|ttf|woff|woff2)(\?.*)?$/,
        use: {
          loader: 'file-loader',
          options: {
            name: '[path][name].[ext]'
          }
        }
      }
    ]
  },

};

我想要实现的是既能像加载图片一样，将svg作为img元素加载： <img id="logo" src="../assets/img/my.svg" alt="My Svg" /> 也可以通过引入svg文件得到内容： import mySvg from "../assets/img/my.svg"; 但是我目前的配置存在一个问题，其中一个会破坏另一个。我可能做错了什么或是以错误的方式来实现这个功能。无论如何，我需要建议、帮助或任何能让这些可能性可行的东西……否则我只能选择其中一个，但这并不是我的首选。

先谢谢了！

哦，还有我的临时解决方案是从配置中删除svg-inline-loader，然后在js中使用以下代码导入它们： import mySvg from "-!svg-inline-loader?classPrefix!../assets/img/my.svg";

- TheYuwana

Answer 1

你可以尝试像这样做

 module: {
      rules: [{
        test: /\.(svg)(\?.*)?$/,
        loader: 'raw-loader'
      }]
    },

- kamprasad

---

如果我正确地阅读了 raw-loader 的 Github 文档，它的工作方式与 svg-inline-loader 相同。这个工具可以正常工作，但是如果我想同时使用内联和 <img src="">，它将与 file-loader 冲突。 - TheYuwana