Shulou(Shulou.com)05/31 Report--

This article shows you how to analyze the principle of single-step debugging of bundle.js in webpack, the content is concise and easy to understand, it can definitely brighten your eyes. I hope you can get something through the detailed introduction of this article.

I can review this web pack hello world project here.

After packaging with webpack, the project folder contains these resources:

The source code for index.html is simple, including a bundle.js file that is packaged with webpack:

So how does the string of Hello,Jerry print out through bundle.js at run time?

This is the content of this article. We can set a breakpoint from the first line of bundle.js, and then start debugging:

Inject the two module defined in our web project into webpack_require.m:

Because the entry module we defined in webpack.config.js is main.js:

Run-time loading here in bundle.js: return webpack_require (webpack_require.s = ". / main.js")

The webpack_require function is originally defined in bundle.js:

First check to see if the main.js is loaded in memory:

For my example, obviously not, so load main.js from scratch. First, create an object with an id of. / main.js:

Then execute the function of this module, that is, the javascript code that we implement in main.js. Of course, after the processing of webpack, the code in main.js has been embedded in bundle.js through eval.

The original main.js code:

After the above code is transformed by webpack, the source code in main.js is replaced with webpack_require:

From here, you can also see the idea of webpack recursively dealing with module. Starting from the entry module defined by webpack.config.js, that is, main.js, where main.js encounters other mobule of require, recursively enter webpack_require:

The execution of require ("print.js") is to assign the print function itself defined in print.js to the exports attribute of module:

Once the print.js module is loaded, it can be executed.

Notice that after the second line of code is executed, the expected characters appear on the html page:

The above content is how to analyze the principle of bundle.js single-step debugging in webpack. Have you learned the knowledge or skills? If you want to learn more skills or enrich your knowledge reserve, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.