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

Question

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

Answer 1

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

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> 
    ); 
} 

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