Question

我搜寻了互联网，以寻找一种使用文件加载器和svg-inline-loader加载svgs的解决方案。为了更加精确，我希望该选项可以单独使用，但似乎无法正确安装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]'
          }
        }
      }
    ]
  },

};

我想实现的是同时做到这两种能力：

<img id="logo" src="../assets/img/my.svg" alt="My Svg" /> 很好地将svg加载为img。

和

import mySvg from "../assets/img/my.svg"; 这给了我svg内容。

我当前配置的问题是，一个破坏了另一个。我可能会做一些愚蠢的事情或以错误的方式实施此操作，无论是哪种方式，我都需要建议，帮助或任何可能使可能性发挥作用的方法……或者我必须坚持一个，这不是一种偏爱。

谢谢！

哦，我的临时而不是首选的解决方案是从配置中删除svg-inline-loader并使用以下命令将其导入我的js中：

import mySvg from "-!svg-inline-loader?classPrefix!../assets/img/my.svg";

Answer 1

您可以尝试这样的方式

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

如何将webpack文件加载器和svg-inline-loader用于SVG？

1 个答案: