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).

5
  • Some of these things, only a core team can answer. about the require functions: github.com/webpack/webpack/blob/master/lib/MainTemplate.js Commented Jul 16, 2018 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: github.com/ronami/minipack/blob/master/src/minipack.js Commented Jul 16, 2018 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 Commented Jul 16, 2018 at 19:28
  • @MatheusSilva basically I'm trying to understand and possibly customize this code before I use it. Commented Jul 16, 2018 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. 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. Commented Jul 17, 2018 at 18:48

1 Answer 1

5

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.

Sign up to request clarification or add additional context in comments.

1 Comment

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?

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.