Webpack输出一个缩小但超大的JS文件

Question

我正在使用Webpack进行JS缩小。我在一个简化的捆绑包中导入了3个模块，但最终的结果是导入的内容（超过90kb）的文件大小 - 它们看起来像这样：

1

var $ = require('jquery');

$(function() {
  // main expansion element
  $(".expander").click(function() {
    var subShown = $(this).children(".indented").css("display");

    if (subShown != "block") {
      $(this).children(".indented").css("display", "block");
      $(this).children(".caret").addClass("reversedCaret");
    } else {
      $(this).children(".indented").css("display", "none");
      $(this).children(".caret").removeClass("reversedCaret");
    }
  });
  // sub expansion element - .caret class is targeted as well due to issue with clicking on it not registering as a .sub-expander click
  $(".sub-expander, .caret").click(function() {
    var subSelectText = $(".sub-expander").text();
    if (subSelectText != "More") {
      $(".sub-expander").text("More");
    } else {
      $(".sub-expander").text("Show Less");
    }
  });
  // stop propagation on the link element within .expander class
  $(".indented").click(function(event) {
    event.stopPropagation();
  });
});

2：

console.log("a test message");

var clickButton = document.getElementById("clicker");

clickButton.addEventListener("click", (e) => {
  e.target.classList.toggle("modified");
});

3：

class ColorPick extends React.Component {

constructor(props) {
  super(props);
  this.state = {
    color: "Let's pick a color"
  };
}

changeColor(event) {
  var colorInput = document.getElementById('colorInput').value;
  this.setState({
    color: event.target.value,
    backgroundColor: event.target.value
  });

  if (colorInput === '') {
    this.setState({
      color: "Let's pick a color",
      backgroundColor: "#fff",
  });
}
}

render () {
  var styleObj = {
    backgroundColor: this.state.backgroundColor,
  };

  return (
    <section style={styleObj} id="Profile" >
      <h2 className="colorHeader">{this.state.color}</h2>
      <input id="colorInput" placeholder="Enter Hex Code Here" onChange={this.changeColor.bind(this)}/>
      <div id="slider"></div>
    </section>
  );
}
}

ReactDOM.render(<ColorPick name="connorcolorpicker" />, document.getElementById('color-picker'));

这三个文件本身的总时钟为12kb。然而，在webpack缩小的捆绑包中，它以90kb的速度运行。这对我没有意义。我的webpack配置如下所示：

webpack.config.js：

var debug = false;
var path = require('path');
var webpack = require('webpack');

module.exports = {
  context: __dirname,
  // entry is already defined in gulpfile.js - leave this line commented out.
  // entry: "/app/js/script.js",
  devtool: debug ? "inline-sourcemap" : null,
  module: {
    rules: [{
      test: /\.js$/,
      use: 'babel-loader'
    }],
    loaders: [
      {
        test: /\.jsx?$/,
        loader: 'babel-loader',
        query  :{
          presets:['react','es2015']
        },
        exclude: /node_modules/
      }
    ]
  },
  resolve: {
    root: [path.resolve(__dirname, 'app'), path.resolve(__dirname, 'node_modules')],
    extensions: ['', '.js']
  },
  output: {
    path: __dirname + "public/javascripts",
    filename: "scripts.min.js"
  },
  plugins: debug ? [] : [
    // new webpack.optimize.DedupePlugin(),
    // new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.optimize.UglifyJsPlugin({ minimize: true, mangle: true })
  ],
};

  

[15:20:33]版本：webpack 1.15.0            资产大小块块名称scripts.min.js 90.1 kB 0 [emit] main

我过去遇到过这个问题，建议将debug设置为false。我做到了，但它并没有像预期的那样表现。

为什么Webpack中12kb的JS /导入总量达到90kb？