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

【问题标题】：How do you use both webpack file-loader and svg-inline-loader for SVG?您如何将 webpack 文件加载器和 svg-inline-loader 用于 SVG？
【发布时间】：2019-11-12 10:24:09
【问题描述】：

我在互联网上搜索了使用文件加载器和 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";

【问题讨论】：

标签： javascript svg webpack webpack-file-loader inline-svg

【解决方案1】：

你可以试试这样的

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

【讨论】：

如果我正确阅读了raw-loader github 文档，这与svg-inline-loader 的工作方式相同。哪个可以正常工作，但是如果我想使用 inline 和，它将与 file-loader 冲突