title: Why is my webpack bundle.js bigger than 7.58MB
body: <p>Why is my bundle.js so large?</p>
  
  <p>What is wrong with my configuration file?</p>
  
  <p>All my React projects tend to be incredibly large in file size (bundle.js is 7.58 mb). I have no idea why is it this large. I already have uglifyJS on, but this doesn't seem to help a lot.</p>
  
  <p>Here are the details:</p>
  
  <pre><code>bundle.js    7.58 MB       0  [emitted]  main
  
  index.html  942 bytes          [emitted] 
  </code></pre>
  
  <p>My webpack.config.js    </p>
  
  <pre><code>const webpack = require('webpack');
  const htmlWebpackPlugin = require('html-webpack-plugin');
  const path = require('path');
  
  const BUILD_DIR = path.resolve(__dirname, 'dist');
  const APP_DIR = path.resolve(__dirname, 'src/components');
  const DATA_DIR = path.resolve(__dirname, 'data');
  
  
  const config = {
      entry: APP_DIR + '/App.jsx',
      output: {
          path: BUILD_DIR,
          filename: 'bundle.js'
      },
      module: {
          loaders: [
              {
                  test: /\.jsx?/,
                  include: APP_DIR,
                  loader: [
                      'babel'
                  ],
                  query: {
                      presets: ["es2015", "react"]
                  }
              },
              {
                  test: /\.css$/,
                  loader:'style-loader!css-loader?importLoaders=1!postcss-loader'
              },
              {
                  test:/\.scss$/,
                  loader:'style-loader!css-loader?importLoaders=1!postcss-loader!sass-loader'
              },
              {
                  test: /\.html/,
                  loader:'html-loader'
              },
              {
                  test: /\.(json)([\?]?.*)$/,
                  include: DATA_DIR,
                  loader: "file-loader",
                  query:{
                      name:"data/[name].[ext]"
                  }
              },
              {
                  test: /\.(eot|woff|woff2|svg|ttf)([\?]?.*)$/,
                  loader: "file-loader",
                  query:{
                      name:"asserts/fonts/[name].[ext]"
                  }
              },
              {
                  test: /\.(gif|png|jpe?g)$/i,
                  include: DATA_DIR,
                  loader: "file-loader",
                  query:{
                      name:"data/images/[name]-[hash:5].[ext]"
                  }
              }
          ]
      },
      postcss:[
          require('autoprefixer')({
              broswers:['last 5 versions']
          })
      ],
      devtool:'eval-source-map',
      devServer:{
          historyApiFallback:true,
          hot:true,
          inline:true,
          proxy:{
              '/api/*':{
                  target:'http://localhost:8081',
                  secure:false
              }
          }
      },
      plugins: [
          new webpack.optimize.OccurenceOrderPlugin(),
          new webpack.optimize.UglifyJsPlugin({
              compressor: {
                  warnings: false
              }
          }),
          new htmlWebpackPlugin({
              filename: 'index.html',
              template: 'index.html',
              title:'this is a title',    //一个title 属性
              inject:'body'
          })
      ]
  };
  
  module.exports = config;
  </code></pre>
  
  <p>My package.json</p>
  
  <pre><code>{
    "name": "react-demo",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
      "start": "webpack-dev-server --progress --profile --colors --hot --inline --port 3000 --host 0.0.0.0",
      "dev": "webpack -d --watch",
      "webpack": "webpack -p --config webpack.config.js --colors --display-reasons --display-error-details --display-modules --sort-modules-by size"
    },
    "author": "Sharp",
    "license": "MIT",
    "dependencies": {
      "babel-core": "^6.2.1",
      "babel-loader": "^6.2.0",
      "babel-preset-es2015": "^6.1.18",
      "babel-preset-react": "^6.1.18",
      "react": "^0.14.3",
      "react-dom": "^0.14.3",
      "webpack": "^1.12.8"
    },
    "devDependencies": {
      "autoprefixer": "^6.7.7",
      "axios": "^0.15.3",
      "babel-plugin-import": "^1.1.1",
      "babel-plugin-transform-runtime": "^6.23.0",
      "css-loader": "^0.27.3",
      "extract-text-webpack-plugin": "^2.1.0",
      "file-loader": "^0.10.1",
      "history": "^4.6.1",
      "html-loader": "^0.4.5",
      "html-webpack-plugin": "^2.28.0",
      "lodash": "^4.17.4",
      "node-sass": "^4.5.0",
      "postcss-loader": "^1.3.3",
      "react-addons-update": "^15.4.2",
      "react-bootstrap": "^0.30.8",
      "react-bootstrap-datetimepicker": "0.0.22",
      "react-redux": "^5.0.3",
      "react-router": "^3.0.2",
      "redux": "^3.6.0",
      "redux-logger": "^2.8.2",
      "redux-thunk": "^2.2.0",
      "remove": "^0.1.5",
      "sass-loader": "^6.0.3",
      "scss-loader": "0.0.1",
      "style-loader": "^0.14.1",
      "webpack-dev-server": "^1.16.3"
    }
  }
  </code></pre>
  
  <p>Does anyone have any idea how to fix this?</p>