Geek Answers Handbook

Trying to understand Webpack

I am an HTML / CSS / PHP / MYSQL programmer, now trying to learn some javascript. I do this by digging out the webmail code that I am currently using (open source) and trying to figure out how this works. I am trying to understand how different parts of the page load (without reloading the page you would get in PHP). If I'm not mistaken, use webpack for this. Each part of the page loads as a module, if I'm not mistaken.

/******/ (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 this magic possible. Now, later in the code, webpack is used as follows:

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

If I'm right, this function loads the module when I click on the button that I liked settingsClick. However, where are the module numbers / assigned?

Any help in getting me on my way is much appreciated!

+10
javascript module webpack
source share
1 answer

Webpack starts with the main JS file, and it sets up add-ons (allow additional resources), compiles these resources into a unified script, as well as hot-swap updates observers when changing JS or CSS, Odds, if you look at the source code of the project , it will be configured as a series of CommonJS / Node-Style modules that use require .

Some places to get started:

You should also see:

  • An Introduction to NPM - NPM is where most of the modules you probably want to use live.
  • NodeJS is a server-side JS environment, most of these tools work through node.
  • Browserify - Webpack is very different from the browser and more, you may prefer a more direct approach
  • Gulp - Gulp is a tool for creating a streaming assembly, webpack has its own, but it's worth looking at additional ideas.
  • BabelJS - previously 6to5 - allows you to use modern JS features in browsers today.
  • ES5 Shims - If you need to support IE8, you will need these.

Webpack uses modules and tools from node / iojs, it also looks like a browser with additional features.

+8
source share

More articles:


All Articles