如何同时使用webpack“文件加载器”和"@svgr/webpack“(或svg-inline-loader)

同时使用webpack的文件加载器和"@svgr/webpack"（或svg-inline-loader）可以实现将SVG文件转换为React组件，并在项目中使用。

首先，需要安装所需的依赖包。可以使用npm或者yarn进行安装。

对于webpack的文件加载器，可以使用file-loader或者url-loader。file-loader会将SVG文件复制到输出目录，并返回文件路径，而url-loader可以将小于指定大小的SVG文件转换为base64编码的DataURL。

对于"@svgr/webpack"，它是一个webpack加载器，用于将SVG文件转换为React组件。它会将SVG文件转换为可导入的JavaScript模块，可以在React组件中直接使用。

以下是使用webpack配置同时使用文件加载器和"@svgr/webpack"的示例：

module.exports = {
  // ...其他webpack配置

  module: {
    rules: [
      // 配置文件加载器
      {
        test: /\.(png|jpe?g|gif)$/i,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[name].[ext]',
              outputPath: 'images/',
            },
          },
        ],
      },
      // 配置SVG加载器
      {
        test: /\.svg$/,
        use: [
          '@svgr/webpack',
          // 或者使用svg-inline-loader
          // 'svg-inline-loader',
        ],
      },
    ],
  },
};

在上述配置中，首先配置了文件加载器来处理图片文件（png、jpg、gif），将它们复制到输出目录的images文件夹下。

然后，配置了SVG加载器来处理SVG文件。使用"@svgr/webpack"加载器将SVG文件转换为React组件。如果想使用svg-inline-loader，只需将注释部分的配置替换即可。

使用以上配置后，可以在项目中直接导入SVG文件并将其作为React组件使用，例如：

import React from 'react';
import Logo from './logo.svg';

const App = () => {
  return (
    <div>
      <Logo width={100} height={100} />
    </div>
  );
};

export default App;

这样就可以同时使用webpack的文件加载器和"@svgr/webpack"（或svg-inline-loader）来处理SVG文件，并将其转换为React组件在项目中使用了。

腾讯云相关产品和产品介绍链接地址：