Webpack 如何指定将资产加载到哪种类型的父文件的哪种类型的网页包加载器？

我想为加载到CSS中的svg资产使用文件加载器，但我想为加载到JS中的svg资产使用react svg加载器。这似乎是不可能的…

您可以在

webpack.config.js

中将

文件加载器定义为SVG文件的默认加载器，然后在
require
语句中使用
react SVG loader
。网页包配置中的加载程序配置：

module: {
    rules: {
        {
            test: /\.svg$/,
            use: [
                {
                    loader: 'file-loader',
                    options: { name: '[name].[ext]' }
                }
            ]
        }
    }
}

然后在JavaScript文件中的
require
语句中使用loader：

import React from 'react';
const Icon = require('!!react-svg-loader?es5=1!../../../assets/svg/icon.svg');

export default function(props) {
    return (
        <div>
          <Icon />
        </div>
    );
}

从“React”导入React；
const Icon=require（“！！react svg loader？es5=1！。/../../../assets/svg/Icon.svg”）；
导出默认功能（道具）{
返回(
);
}

请注意，此处使用了双感叹号（
！！
）来防止使用我们在配置文件中定义的文件加载器。
看起来您可以在任何网页
规则
上设置
颁发者
条件，以便为不同的“父文件”使用不同的加载器

更多信息请参阅文档

module: {
  rules: [
    {
      test: /\.svg$/,
      oneOf: [
        {
          issuer: /\.css$/,
          loader: 'file-loader',
        },
        {
          issuer: /.jsx?$/,
          loader: 'react-svg-loader',
        },
    },
  ],
}