Попытка понять Webpack

Я программист HTML/CSS/PHP/MYSQL, теперь пытаюсь изучить некоторые javascript. Я делаю это, выкапывая код веб-почты, который я использую в настоящее время (с открытым исходным кодом), и пытаюсь понять, как это работает. Я пытаюсь понять, как загружаются разные части страницы (без перезагрузки страницы, которые вы получили бы на PHP). Если я не ошибаюсь, используйте webpack для этого. Каждая часть страницы загружается как модуль, если я не ошибаюсь.

/******/ (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);
/******/ })

Кажется, что это (часть) кода, который делает эту магию возможной. Теперь, позже в коде webpack используется следующим образом:

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

Если я прав, эта функция загружает модуль при нажатии на кнопку, понравившуюся settingsClick. Однако, где указаны номера модулей/назначены?

Любая помощь в получении меня на моем пути очень ценится!

ОТВЕТЫ

Ответ 1

Webpack начинается с основного JS файла, и он настроил аддоны (разрешить дополнительные ресурсы), компилирует эти ресурсы в объединенный script, а также наблюдатели за обновлениями с возможностью "горячей" замены при изменении JS или CSS, Коэффициенты, если вы посмотрите на исходный код проекта, он будет настроен как ряд модулей CommonJS/Node -Style, которые используют require.

Некоторые места для начала работы:

Вы также должны посмотреть:

  • Введение в NPM - NPM - это то, где большинство модулей, которые вы, вероятно, захотите использовать, проживают.
  • NodeJS - серверная JS-среда, большинство из этих инструментов работают через node.
  • Browserify - Webpack в значительной степени отличается от браузера и больше, вы можете предпочесть более прямой подход
  • Gulp - Gulp - это инструмент для создания потоковой сборки, webpack имеет свои собственные, но стоит посмотреть на дополнительные идеи.
  • BabelJS - ранее 6to5 - позволяет использовать современные функции JS в браузерах сегодня.
  • ES5 Shims - если вам нужно поддерживать IE8, вам понадобятся эти.

Webpack использует модули и инструменты из node/iojs, он также похож на браузер с дополнительными функциями.