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

【问题标题】：Webpack is generating a bundle file for every single SVG fileWebpack 正在为每个 SVG 文件生成一个捆绑文件
【发布时间】：2020-05-13 13:57:53
【问题描述】：

我有一个带有单个组件的小型 React 库，它从 icons 目录导入 SVG。我正在尝试捆绑我的项目并使用 webpack 获取一 (1) 个 bundle.js 文件作为输出，但是我为我拥有的每个 SVG 文件获取了一个 bundle.js 和一个 bundle.js.map 文件我的icons 目录。

这是我的 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;

我错过了什么吗？

【问题讨论】：

如何从 index.js 中导入 svg 文件？如果你使用import('filename')，它将指示 webpack 将该文件拆分为一个单独的包。确保您使用 require() 或 es6 import 语句导入 svgs
哦，好吧，这可能是问题所在，我正在使用import('./path/to/file.svg') 导入它。那么有没有办法让它将它们捆绑为一个输出文件呢？

标签： javascript reactjs webpack

【解决方案1】：

使用LimitChunkCountPlugin 并设置maxChunks: 1：

const webpack = require('webpack');
module.exports = {
  // ...
  plugins: [
    new webpack.optimize.LimitChunkCountPlugin({
      maxChunks: 1,
    }),
  ],
};

【讨论】：

【解决方案2】：

使用 Webpack svg-inline-loader 代替 svg-loader

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

这个加载器会将 svg 作为内联模块加载到最终的捆绑文件中

【讨论】：

我使用 svg-inline-loader 得到相同的结果。