Webpack + React +多個SVG加載程序問題

Question

{
  test: /\.svg/,
  use: [
    {
      loader: 'url-loader'
    },
    {
      loader: 'svg-react-loader'
    }
  ]
}

這是module: { rules: [我的webpack.config.js有關SVG加載程序的webpack.config.js

任何人都使用類似的設置，並在React中導入svg文件時遇到問題？

我既需要在CSS中加載svg，又需要在React中導入它們。 如果我用

• 單獨使用url-loader CSS即可。
• 如果我單獨使用svg-react-loader，則在React工程中會導入。

但是在React中一起導入失敗，並出現以下錯誤：

Module build failed: Error: Non-whitespace before first tag.

這是我在React cmp中導入SVG的方法：

import StarIcon from 'svg-react-loader!mdi-svg/svg/star.svg';

Answer 1

顯然，在導入過程中無需在實際的JS / CSS代碼中引用加載程序的最簡單的處理加載程序的方法是使用帶有exclude屬性的oneOf：

    {
      test: /\.svg$/,
      oneOf: [
        {
          exclude: path.resolve(__dirname, '../src/'),
          use: 'svg-react-loader'
        },
        {
          exclude: path.resolve(__dirname, '../node_modules/'),
          use: 'url-loader'
        },
      ],
    }

Answer 2

更好的方法是使用oneOf ，但是使用include選項，從邏輯oneOf ，它比exclude選項更正確：

{
  test: /\.svg$/,
  oneOf: [
    {
      include: path.resolve(__dirname, '../node_modules/'),
      use: 'svg-react-loader'
    },
    {
      include: path.resolve(__dirname, '../src/'),
      use: 'url-loader'
    },
  ],
}