Зачем использовать WebPack?

The bundle.js is also 3 times larger in file size than the index.js and greet.js

Webpack должен вставлять некоторые полифиллы для вещей, на которые браузеры не способны, например, для загрузки модулей. Если у вас есть 2 строки кода, эти полифиллы выглядят очень тяжелыми, однако, если вы напишете тысячи строк кода, вы не заметите каких-либо значительных накладных расходов, поскольку эти полифиллы добавляются только один раз.

So why should I continue to invest time into using WebPack for my projects?

Потому что он будет создавать меньшие пакеты для больших проектов, а также позволяет вам писать ESnext и чистый модульный код.

What is all the extra code it is outputting and why is it there?

Он сохраняет глобальную область видимости чистой, добавляет несколько помощников и загрузчик модулей, а затем загружает первый модуль:

// IIFE to keep global scope clean, ! to prevent Automatic Semicolon Insertion fun
!(function init(modules) {
  var cache = {}; // cache the modules results
  // All modules are in an array, their index is a unique identifier
  function require/*n*/(index/*r*/) {
    if (cache[index]) return cache[index].exports;
    var context/*o*/= (cache[index = { index/*i*/: index, loaded/*l*/: false/*!1*/, exports: {} });

    modules[index].call(
      context.exports, 
      context,
      context.exports, 
      require
    );
    context.loaded = true /*!0*/;
    return context.exports;
  }

  require.modules = modules; // I'm not sure why?...
  require.cache = cache;

  // helper for adding a getter
  require.addGetter /*n.d*/ = function(object, key, getter) {
    require.has(object, key) || Object.defineProperty(object, key, { enumerable: true, get: getter });
  });

  require.prepareExport /*n.r*/ = function(export) {
    if ("undefined" != typeof Symbol && Symbol.toStringTag)
      Object.defineProperty(export, Symbol.toStringTag, { value: "Module" });

    Object.defineProperty(export, "__esModule", { value: true });
  };

 // I have no idea what that is doing

  require.startModule /*n.s*/ = 0;
  require(require.startModule); // start execution
})([
  /* Your modules, identified by index */
  function mainModule(context, exports, require) {
      "use strict"; // better performance
      require.prepareExport(export); // as you could override exports in your module, this has to be called afterwards

     var otherModule = function() { // inlined!
        console.info("Have a great day!");
     };

    console.info("I'm the entry point"), 

    otherModule();
  } /* ... more modules would follow here if not inlined */
]);

Are the any better alternatives that will help me ship my code from a modular development environment?

Есть альтернативы, не уверен, что они "лучше".

Я согласен с тем, что Webpack добавляет кучу хлама, который вам может даже не понадобиться. У него также есть этот сумасшедший файл конфигурации, который граничит с чистым безумием.

Для простоты вы можете просто загрузить файлы модулей с тегами script и выбросить Webpack в окно! (только в современных браузерах (Edge16+, FF60+, Chrome61+, Safari11+)).

<script type = "module" src = "greet.js">
<script type = "module" src = "app.js">

Вы также можете использовать более простые альтернативы веб-пакетам, такие как ParcelJS или Rollup. Все эти компиляторы могут делать множество вещей, в зависимости от того, что вам нужно:

• объедините свои модули в один большой старый bundle.js файл
• сделать код совместимым со старыми устаревшими браузерами.
• преобразовать scss в css, typescript в javascript и т. д.
• запустить сервер разработки с автоматической перезагрузкой
• создайте всю папку вашего веб-сайта, включая только те файлы, которые фактически используются в проекте.

Я провел свою добрую долю сражений с упаковщиками. Есть и другие способы. После нескольких лет опыта, проб и ошибок, лучшая альтернатива, которую я придумал, — это мой проект Zwitterion: https://github.com/lastmjs/zwitterion

Он предназначен для замены статического файлового сервера. Он поддерживает ES2015+, TypeScript, AssemblyScript, Rust, C, C++ и, вероятно, скоро будет поддерживать JSX, TSX и Vue. Вам не нужно менять файловую структуру или способ интуитивной разработки. Просто напишите свой исходный код, включите его в элементы скрипта или импортируйте модуль, и он просто заработает.