For those of you reading this, make sure you have a basic understanding of WebPack.
You can read my previous article: Webpack 10 Minute Primer to run a Webpack Hello World project locally. www.toutiao.com/i6612879647…
I can review the Hello World project for the Web Pack here.
Once packaged with Webpack, the project folder contains these resources:
The source code for index.html is very simple, and contains a bundle.js file generated when webpack is packaged:
So at runtime, how does Hello Jerry’s string get printed from bundle.js?
This is the content of this article. We can set a breakpoint from the first line of bundle.js and start debugging:
Inject the two modules defined in our web project into __webpack_require__.m:
Because the entry module we define in webpack.config.js is main.js:
Return webpack_require(webpack_require.s = “./main.js “);
The __webpack_require__ function is defined in bundle.js:
First check if main.js is already loaded in memory:
In my case, obviously not, so load main.js from scratch. First create an object with an id of./main.js:
We then execute the module function, the javascript code we implement in main.js. Of course, after webpack, the code in main.js is already embedded in bundle.js via eval.
The original main.js code:
After the above code is converted by webpack, the source code in main.js is replaced with __webpack_require__:
The entry module defined by webpack.config.js is called main.js. In main.js, it needs to require other mobules. Recursively into __webpack_require__:
Print: module exports: print.js: module exports: print.js: module exports: print.js: module exports: print.js: module exports: print.js: module exports: print.js: module exports: print.js: module exports: print.js: module exports: print.js: module exports:
Once the print.js module is loaded, it’s ready to execute.
Notice that after line 2, the expected characters appear on the HTML page:
For more of Jerry’s original articles, please follow the public account “Wang Zixi “:
