Trying to understand Webpack

Question

I'm an HTML/CSS/PHP/MYSQL programmer, now trying to learn some javascript. I'm doing that by digging trough the code of the webmail I'm currently using (open source) and trying to understand how it works. I'm trying to understand how the different parts of the page are getting loaded (without the page reload you would get in PHP). If I'm not wrong it's using webpack to do that. Every part of the page is loaded as a module if I'm not wrong.

/******/ (function(modules) { // webpackBootstrap
/******/    // The module cache
/******/    var installedModules = {};
/******/
/******/    // The require function
/******/    function __webpack_require__(moduleId) {
/******/
/******/        // Check if module is in cache
/******/        if(installedModules[moduleId])
/******/            return installedModules[moduleId].exports;
/******/
/******/        // Create a new module (and put it into the cache)
/******/        var module = installedModules[moduleId] = {
/******/            exports: {},
/******/            id: moduleId,
/******/            loaded: false
/******/        };
/******/
/******/        // Execute the module function
/******/        modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/        // Flag the module as loaded
/******/        module.loaded = true;
/******/
/******/        // Return the exports of the module
/******/        return module.exports;
/******/    }
/******/
/******/
/******/    // expose the modules object (__webpack_modules__)
/******/    __webpack_require__.m = modules;
/******/
/******/    // expose the module cache
/******/    __webpack_require__.c = installedModules;
/******/
/******/    // __webpack_public_path__
/******/    __webpack_require__.p = "webmail/v/0.0.0/static/js/";
/******/
/******/    // Load entry module and return exports
/******/    return __webpack_require__(0);
/******/ })

This seems to be (part of) the code that makes that magic possible. Now, later on in the code webpack is used like this:

AbstractSystemDropDownUserView.prototype.settingsClick = function ()
{
    __webpack_require__(/*! Knoin/Knoin */ 5).setHash(Links.settings());
};

If I'm correct, this function loads a module when clicking on the button liked to settingsClick. However, where are the module numbers defined/assigned?

Any help with getting me on my way is greatly appreciated!

Answer 1

Webpack starts with a primary JS file, and its configured addons (allow for additional resources to be required in), compiles these resources into a merged script, as well as watchers for hot-swap updates when JS or CSS changes. Odds are, if you look at the source code for the project, it will be setup as a number of CommonJS/Node-Style modules that use require or ES6 style module import/export directives.

Some places to get started:

• WebPack Docs -> Motivation
• React/WebPack Cookbook

You should also look at:

• Introduction to NPM - NPM is where most modules that you will likely want to use reside.
• NodeJS - Server-Side JS environment, most of these tools run via node.
• Browserify - Webpack is pretty much browserify + more, You may prefer a more direct approach
• Gulp - Gulp is a stream based build tool, webpack has its' own, but it's worth looking at for additional ideas.
• BabelJS - formerly 6to5 - lets you use modern JS features in browsers today.
• ES5 Shims - if you need to support IE8, you'll need these.

Webpack relies on modules, and tools from node/iojs, it's also similar to browserify with extras.