title: Why use WebPack?
body: <p>I've spent a couple days getting Webpack up and running and just got a test going. However I found that the bundle.js file that came out of webpack was doing a lot of unnecessary things that make no sense to me.</p>
  
  <p>index.js</p>
  
  <pre><code>import greet from './greet';
  
  console.log("I'm the entry point");
  greet();
  </code></pre>
  
  <p>greet.js</p>
  
  <pre><code>function greet() {
      console.log('Have a great day!');
  };
  
  export default greet;
  </code></pre>
  
  <p>So super simple. But bundle.js</p>
  
  <pre><code>!(function(e) {
    var t = {};
    function n(r) {
      if (t[r]) return t[r].exports;
      var o = (t[r] = { i: r, l: !1, exports: {} });
      return e[r].call(o.exports, o, o.exports, n), (o.l = !0), o.exports;
    }
    (n.m = e),
      (n.c = t),
      (n.d = function(e, t, r) {
        n.o(e, t) || Object.defineProperty(e, t, { enumerable: !0, get: r });
      }),
      (n.r = function(e) {
        "undefined" != typeof Symbol &amp;&amp;
          Symbol.toStringTag &amp;&amp;
          Object.defineProperty(e, Symbol.toStringTag, { value: "Module" }),
          Object.defineProperty(e, "__esModule", { value: !0 });
      }),
      (n.t = function(e, t) {
        if ((1 &amp; t &amp;&amp; (e = n(e)), 8 &amp; t)) return e;
        if (4 &amp; t &amp;&amp; "object" == typeof e &amp;&amp; e &amp;&amp; e.__esModule) return e;
        var r = Object.create(null);
        if (
          (n.r(r),
          Object.defineProperty(r, "default", { enumerable: !0, value: e }),
          2 &amp; t &amp;&amp; "string" != typeof e)
        )
          for (var o in e)
            n.d(
              r,
              o,
              function(t) {
                return e[t];
              }.bind(null, o)
            );
        return r;
      }),
      (n.n = function(e) {
        var t =
          e &amp;&amp; e.__esModule
            ? function() {
                return e.default;
              }
            : function() {
                return e;
              };
        return n.d(t, "a", t), t;
      }),
      (n.o = function(e, t) {
        return Object.prototype.hasOwnProperty.call(e, t);
      }),
      (n.p = ""),
      n((n.s = 0));
  })([
    function(e, t, n) {
      "use strict";
      n.r(t);
      var r = function() {
        console.log("Have a great day!");
      };
      console.log("I'm the entry point"), r();
    }
  ]);
  </code></pre>
  
  <p>It seems like WebPack is doing a lot of unnecessary code that just makes no sense to me. The bundle.js is also 3 times larger in file size than the index.js and greet.js. The development build of the app also just looks very confusing and messy for something so simple.</p>
  
  <p>So why should I continue to invest time into using WebPack for my projects?
  What is all the extra code it is outputting and why is it there?
  Are the any better alternatives that will help me ship my code from a modular development environment?</p>
  
  <p>I'd really appreciate your help in getting me to understand why I should or shouldn't use WebPack.</p>
  
  <p>Thanks!</p>