将 react-svg-loader 添加到 webpack

Posted 2023-03-28

【中文标题】将 react-svg-loader 添加到 webpack

【英文标题】：Adding react-svg-loader to webpack

【发布时间】：2019-03-23 17:18:26

【问题描述】：

我想使用 react-svg-loader 来导入和使用我为我的应用程序拥有的一些 svg 资产。你可以在下面找到我的 webpack 配置。然而，问题是我还在为 svg 文件使用一些文件加载​​器。这些是必需的，因为我的应用程序的一部分正在从 font awesome 导入图标，例如<i className="fa fa-lock" aria-hidden="true" />。所以我可以通过停止让我的文件加载器查找 svg 文件来让 react-svg-loader 工作，但是我的应用程序上的很多图标都不会呈现。如果我不这样做，那么我的 webpack 将无法构建，并会说：

ERROR in ./node_modules/font-awesome/scss/font-awesome.scss
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/react-svg-loader/lib/loader.js):
NonErrorEmittedError: (Emitted value instead of an instance of Error) Error in parsing SVG: Non-whitespace before first tag.

那么我该如何解决这两个冲突呢？谢谢。

const path = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

const DIST_DIR = path.resolve(__dirname, "dist");
const SRC_DIR = path.resolve(__dirname, "src");

const config = 
  entry: [
    "babel-polyfill",
    `$SRC_DIR/app/index.js`,
    `$SRC_DIR/app/assets/stylesheets/application.scss`,
    `$SRC_DIR/app/components/index.scss`,
    "font-awesome/scss/font-awesome.scss",
    "react-datepicker/dist/react-datepicker.css",
    "rc-time-picker/assets/index.css",
    "react-circular-progressbar/dist/styles.css",
    "@trendmicro/react-toggle-switch/dist/react-toggle-switch.css",
  ],
  output: 
    path: `$DIST_DIR/app/`,
    filename: "bundle.js",
    publicPath: "/app/"
  ,
  module: 
    rules: [
      
        test: /\.svg$/,
        use: [
          
            loader: "babel-loader"
          ,
          
            loader: "react-svg-loader",
            options: 
              jsx: true
            
          
        ]
      ,
      
        enforce: "pre",
        test: /\.js$/,
        exclude: /node_modules/,
        loader: "eslint-loader",
        options: 
          failOnWarning: false,
          failOnError: true
        
      ,
      
        test: /\.js$/,
        include: SRC_DIR,
        loader: 'babel-loader',
        query: 
          presets: ['react', 'stage-2']
        
      ,
      
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader'
        ]
      ,
      
        test: /\.scss$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          'sass-loader'
        ]
      ,
      
        test: /\.(jpe?g|png|gif|svg)$/i,
        loaders: ['file-loader?context=src/images&name=images/[path][name].[ext]', 
          loader: 'image-webpack-loader',
          query: 
            mozjpeg: 
              progressive: true,
            ,
            gifsicle: 
              interlaced: false,
            ,
            optipng: 
              optimizationLevel: 7,
            ,
            pngquant: 
              quality: '75-90',
              speed: 3,
            ,
          ,
        ],
        exclude: path.resolve(__dirname, "node_modules"),
        include: __dirname,
      ,
      
        test: /\.woff2?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
        // loader: "url?limit=10000"
        use: "url-loader"
      ,
      
        test: /\.(ttf|eot|svg)(\?[\s\S]+)?$/,
        use: 'file-loader'
      ,
    ]
  ,
  plugins: [
    new MiniCssExtractPlugin(
      filename: "application.css"
    ),
  ]
;

module.exports = config;

【参考方案1】：

我在尝试使用 react-svg-loader 加载 SVG 时遇到了类似的问题，但使用 file-loader 加载了 Font Awesome SVG。这是我用来解决该问题的配置：

  
    test: /\.svg$/,
    exclude: path.resolve(__dirname, 'node_modules', 'font-awesome'),
    use: ['babel-loader', 'react-svg-loader'],
  ,
  
    test: /\.svg$/,
    include: path.resolve(__dirname, 'node_modules', 'font-awesome'),
    use: [
      loader: 'file-loader',
      options: 
        jsx: true,
      ,
    ],
  ,

如果您的 webpack 配置不在根目录中，请相应地更正排除/包含路径！

请注意，您的 webpack 配置中有多个 SVG 规则，请使用 include/excludes 以使它们都适用于您的情况。

【讨论】：

测试：/\.svg$/，排除：path.resolve(__dirname, 'node_modules', 'font-awesome')，使用：['babel-loader', 'react-svg -loader'], , 这一行解决了我的问题。很奇怪。很高兴知道确切的原因。我的 webpack.config 在根目录中。感谢分享。