Webpack为每个映像

Question

我有一个包含大量图像和Webpack2配置的React项目。每当我构建我的项目时，它会为每个图像生成一个捆绑文件 - 这会产生大约140个bundle.min.js文件：

我一直在寻找一个狂热分子来找出原因或者是否有更好的方法来做到这一点（如果我可以为所有这些提供一个文件，那会很棒 - 如果可能的话？）。这是我的代码：

webpack.config.prod.js

//  PRODUCTION

const webpack = require('webpack');
const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

const entry = {
    app: path.join(process.cwd(), 'src/app.js')
}

const output = {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.min.js',
}

const plugins = [
    new webpack.DefinePlugin({
      // 'process.env.NODE_ENV': JSON.stringify('production')
        'process.env': {
        NODE_ENV: JSON.stringify('production')
      }
    }),
    new webpack.optimize.UglifyJsPlugin({
        mangle: false,
        compress: {
            warnings: false
        }
    }),
  new ExtractTextPlugin('bundle.css'), // creation of HTML files to serve your webpack bundles
    new HtmlWebpackPlugin({
        template: 'index-template.html',
        inject: true,
    minify: {
      removeComments: true,
      collapseWhitespace: true,
      removeRedundantAttributes: true,
      useShortDoctype: true,
      removeEmptyAttributes: true,
      removeStyleLinkTypeAttributes: true,
      keepClosingSlash: true,
      minifyJS: true,
      minifyCSS: true,
      minifyURLs: true,
    }
    }),
    new webpack.optimize.CommonsChunkPlugin({
        name: 'bundle',
        filename: '[name].common.js'
    })
]

const config = {
  context: path.join(__dirname, 'src'),
  entry: entry,
    output: output,
    devtool: "source-map",
  module: {
    rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                include: path.join(__dirname, 'src'),
                use: "babel-loader"
            },
      {
              test: /\.(png|jpg|gif)$/,
              use: [{
                    loader: 'url-loader',
                    options: { limit: 10000, name: './images/[name].[ext]' } // Convert images < 10k to base64 strings (all in images folder)
                }]
            },
            {
                test: /\.(sass|scss)$/,
                use: ExtractTextPlugin.extract({
                fallback: 'style-loader',
                use: [
                  'css-loader',
                  {
                            loader: 'postcss-loader',
                            options: {
                                plugins: (loader) => [ require('autoprefixer')() ]
                            }
                        },
                  'sass-loader',
                ]
              })
            }
        ]
  },
    plugins: plugins,
    externals: {
      jquery: 'jQuery'
    }
}

module.exports = config;

的package.json

{
  "name": "magdenmagden",
  "version": "1.0.0",
  "description": "A webbased art gallery",
  "main": "index.js",
  "author": "fransBernhard <mimilundberg@fransbernhard.se>",
  "license": "ISC",
  "scripts": {
    "start": "NODE_ENV=development node dev-server.js --history-api-fallback",
    "build": "rimraf dist && NODE_ENV=production webpack --config webpack.config.prod.js",
    "test": "rimraf jest/__snapshots__ coverage && jest --no-cache --coverage"
  },
  "jest": {
    "transform": {
      "^.+\\.(js|jsx$)": "<rootDir>/node_modules/babel-jest",
      "^.+\\.css$": "<rootDir>/jest/config/styleTransform.js",
      "^.+\\.(jpg|jpeg|png|gif)$": "<rootDir>/jest/config/fileTransform.js"
    },
    "moduleFileExtensions": [
      "js",
      "jsx"
    ],
    "moduleNameMapper": {
      ".*\\.scss$": "<rootDir>/jest/config/styleTransform.js"
    }
  },
  "dependencies": {
    "axios": "^0.16.2",
    "backstopjs": "^2.7.5",
    "react": "^15.5.4",
    "react-dom": "^15.5.4"
  },
  "devDependencies": {
    "babel-core": "^6.24.1",
    "babel-eslint": "^7.2.3",
    "babel-jest": "^20.0.3",
    "babel-loader": "^7.0.0",
    "babel-plugin-dynamic-import-node": "^1.0.2",
    "babel-plugin-syntax-dynamic-import": "^6.18.0",
    "babel-plugin-transform-es2015-modules-commonjs": "^6.24.1",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-react-hmre": "^1.1.1",
    "babel-preset-stage-0": "^6.24.1",
    "css-loader": "^0.28.2",
    "eslint": "^3.19.0",
    "eslint-config-react-app": "^1.0.4",
    "eslint-loader": "^1.7.1",
    "eslint-plugin-flowtype": "^2.34.0",
    "eslint-plugin-import": "^2.3.0",
    "eslint-plugin-jsx-a11y": "^5.0.3",
    "eslint-plugin-react": "^7.0.1",
    "extract-text-webpack-plugin": "^2.1.0",
    "file-loader": "^0.11.1",
    "html-webpack-plugin": "^2.28.0",
    "jest": "^20.0.4",
    "json-loader": "^0.5.4",
    "node-sass": "^4.5.3",
    "postcss-loader": "^2.0.5",
    "prop-types": "^15.5.10",
    "react-hot-loader": "^3.0.0-beta.7",
    "react-modal": "^1.7.7",
    "react-router": "^3.0.5",
    "react-router-dom": "^4.1.1",
    "react-scrollchor": "^3.0.0",
    "react-test-renderer": "^15.5.4",
    "rimraf": "^2.6.1",
    "sass-loader": "^6.0.5",
    "screener-storybook": "^0.7.10",
    "style-loader": "^0.17.0",
    "url-loader": "^0.5.8",
    "webpack": "^2.5.1",
    "webpack-dev-server": "^2.4.5"
  }
}

为任何输入感到高兴！