Javascript Webpack正在为每个SVG文件生成一个捆绑文件

我有一个带有单个组件的小react库，它从

图标

目录导入SVG。我正试图捆绑我的项目，并获得一（1）个bundle.js文件作为webpack的输出，但相反，我在

icons

目录中获得的每个SVG文件都有一个bundle.js和一个bundle.js.map文件

这是我的webpack.config.js

var webpack = require('webpack');
var path = require('path');
var libraryName = 'bundle';
var outputFile = libraryName + '.js';

var config = {
  entry: __dirname + '/src/index.js',
  devtool: 'source-map',
  output: {
    path: __dirname + '/dist',
    filename: outputFile,
    library: libraryName,
    libraryTarget: 'umd',
    umdNamedDefine: true,
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
      },
      {
        test: /\.(js|jsx)$/,
        loader: 'eslint-loader',
        exclude: /node_modules/,
      },
      {
        test: /\.svg$/,
        loader: 'svg-loader',
        exclude: /node_modules/,
      },
    ],
  },
};

module.exports = config;

我在这里遗漏了什么吗？

使用Webpack而不是svg加载程序

rules: [
  ...
  {
    test: /\.svg$/,
    loader: 'svg-inline-loader'
  }
]

---

此加载程序将svg作为最终捆绑文件中的内联模块加载

我使用svg-inline-loader获得相同的结果。您如何从index.js导入svg文件？如果您使用的是

import（'filename'）

，这将指示webpack将该文件拆分为单独的捆绑包。确保使用

require（）

或es6导入语句导入svg。好的，这可能是问题所在，我使用

import（'./path/to/file.svg'）

导入它。那么，有没有办法将它们捆绑为一个单独的输出文件呢？