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

Question

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

Answer 1

好像您可以在任何Webpack issuer上设置一个Rule条件，以便为不同的“父文件”使用不同的加载程序。

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

文档中的更多信息 https://webpack.js.org/configuration/module/#rule-issuer

Answer 2

您可以在file-loader中将webpack.config.js定义为SVG文件的默认加载器，然后在react-svg-loader语句中使用require。 webpack config中的Loader配置：

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

然后在JavaScript文件的require语句中使用加载程序：

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

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

请注意，此处使用双重感叹号（!!）来防止使用我们在配置文件中定义的文件加载器。