2

I tried searching for the function in the GitHub repo sources but for some reason I cannot find the webpackJsonp() function definition.

I know I can use webpackJsonp([], null, ["moduleId"]) to return a module by id, but I want to know what does this function really do in detail and learn all I can do with it.

Edit: I would also like to know about __webpack_require__.c and __webpack_require__.m (some comments found in the code here).

cprcrack
  • 17,118
  • 7
  • 88
  • 91
  • Some of these things, only a core team can answer. about the require functions: https://github.com/webpack/webpack/blob/master/lib/MainTemplate.js – PlayMa256 Jul 16 '18 at 19:14
  • There are not that many different things you can do with webpackjsonp, this is basically only used by webpack to load files, no other library manipulates this by itself. Idk exactly what you are looking for, but it is similar to (a simpler version) this: https://github.com/ronami/minipack/blob/master/src/minipack.js – PlayMa256 Jul 16 '18 at 19:19
  • Thanks @MatheusSilva, very helpful. Seems like .c returns all module ids whereas .m returns all function ids of those modules? For some reason some ids are repeated in both .c and .m – cprcrack Jul 16 '18 at 19:28
  • @MatheusSilva basically I'm trying to understand and possibly customize [this code](https://github.com/sigalor/whatsapp-web-reveng/pull/59#issuecomment-398623347) before I use it. – cprcrack Jul 16 '18 at 19:31
  • 1
    webpackJsonp is generated in JsonpMainTemplatePlugin.js [webpack/lib/JsonpMainTemplatePlugin.js]. You can check it there or better observe one generated in your project. http://plnkr.co/edit/xFT4ib5uHqkQ8XIrPqf3?p=catalogue (In this plunk html I copied js generated in my project) Not that interested in details, but in general looks pretty clear. – Petr Averyanov Jul 17 '18 at 18:48

1 Answers1

4

Based on Petr's comment, it seems like the function is typically generated with such a code:

  window["webpackJsonp"] = function webpackJsonpCallback(chunkIds, moreModules, executeModules) {
    // add "moreModules" to the modules object,
    // then flag all "chunkIds" as loaded and fire callback
    var moduleId, chunkId, i = 0, resolves = [], result;
    for(;i < chunkIds.length; i++) {
      chunkId = chunkIds[i];
      if(installedChunks[chunkId]) {
        resolves.push(installedChunks[chunkId][0]);
      }
      installedChunks[chunkId] = 0;
    }
    for(moduleId in moreModules) {
      if(Object.prototype.hasOwnProperty.call(moreModules, moduleId)) {
        modules[moduleId] = moreModules[moduleId];
      }
    }
    if(parentJsonpFunction) parentJsonpFunction(chunkIds, moreModules, executeModules);
    while(resolves.length) {
      resolves.shift()();
    }
    if(executeModules) {
      for(i=0; i < executeModules.length; i++) {
        result = __webpack_require__(__webpack_require__.s = executeModules[i]);
      }
    }
    return result;
  };

The 3 parameter names and the comments on the source code are quite insightful.

cprcrack
  • 17,118
  • 7
  • 88
  • 91
  • Is `webpackJsonp` also used to share code between modules? Say if `bundle-1` and `bundle-2` both need `React`, so will Webpack include `React` in both bundles or will it use `webpackJsonp` (or some other mechanism?) to share `React` between `bundle-1` and `bundle-2`? – darKnight Jun 01 '21 at 20:29