时间戳

首页 > 解决方案 > Webpack 正在为每个 SVG 文件生成一个捆绑文件

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

问题描述

我有一个带有单个组件的小型反应库，它从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;

我在这里错过了什么吗？

标签： javascriptreactjswebpack

解决方案

使用LimitChunkCountPlugin和设置maxChunks: 1：

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

推荐阅读