Question

我正在尝试将几个Webpack加载器组合在一起以加载我的SVG资产，将它们转换为内联使用，最后将结果转换为可在应用程序中使用的实际React组件。

const path = require('path')

module.exports = {
  entry: './src/index.js',
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        include: path.resolve(__dirname, 'src'),
        use: {
          loader: 'babel-loader',
          options: {
            presets: [
              ['env', {
                browsers: supportedBrowsers,
                modules: false
              }]
            ]
          }
        }
      },
      {
        test: /\.svg$/,
        include: path.resolve(__dirname, 'src'),
        use: [
          {
            loader: 'svg-inline-loader',
            options: {
              removeTags: true
            }
          },
          {
            loader: 'svg-react-loader'
          }
        ]
      }
    ]
  }
}

如果自己使用svg-react-loader，则加载程序按预期工作，但是很多SVG资产都有我想要使用svg-inline-loader去掉的不需要的元素和属性。

如上所述使用配置时，结果将作为文本而非可执行JavaScript加载。

我在尝试实现此目的时使用以下加载器：

Answer 1

使用其他装载机可以吗？您可以将svgo-loader与svg-inline-loader合并，并使用svgo提供的所有可能选项。

如果是，请执行npm i -D svgo-loader

将您的webpack配置更改为：

{
  test: /\.svg$/,
  use: [
    'svg-react-loader',
    {
      loader: 'svgo-loader',
      options: {
        plugins: [
          {cleanupAttrs: true}
        ]
      }
    }
  ],
  exclude: /node_modules/
}

使用多个Webpack加载器将SVG转换为React组件

1 个答案: