如何指定資產加載到哪種類型的父文件的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> 
    ); 
} 

注意，雙感嘆號（!!）在這裏被用來防止使用我們定義的文件加載器在配置文件中。