CODEWITHSUNDEEP
reactjswebpack
user9623401
user9623401

Reputation:

why there are multiple js files generated by webpack

I'm new to React and webpack, just some questions on js files generated by webpack. I always thought webpack will get all the dependencies js into a single bundle.js file, but when I check my browser, I see there are actually three files which are:

0.chunk.js bundle.js main.chunk.js

Below is my questions:

Q1-Why not webpack just get everything and bundle them into a single bundle.js file?

Q2-what's the purpose of 0.chunk.js, main.chunk.js?

Q3-Who inserts the script elements for each js file in the index.html file, webpack, or loader?

Upvotes: 2

Views: 2086

Answers (2)

Mohhamad Hasham
Mohhamad Hasham

Reputation: 2032

Q1. Why not webpack just get everything and bundle them into a single bundle.js file?

This allows for lazy loading and code splitting that makes your application load fast.

Q2. what's the purpose of 0.chunk.js, main.chunk.js?

These are chunk which are named by webpack. They have JS code that is transpiled to work in older and newer browsers both.

Q3.Who inserts the script elements for each js file in the index.html file, webpack, or loader?

The tags are inserted by webpack. Webpack uses loaders for using non JS resources such as images and stylesheets etc.

Hope that helps

Upvotes: 0

Luïs
Luïs

Reputation: 2853

Q1-Why isn't webpack bundling everything into a single bundle.js file

Generating chunks is an opt-in feature. Webpack doesn't generate chunks by default. The reason why generating chunks might be useful is explained in Q2.

Q2-What's the purpose of 0.chunk.js, main.chunk.js

A chunk is a separate file consisting of common modules shared between multiple entry points. Separating these common modules from bundles allows for those chunks to be loaded once initially and stored in the cache for later use.

Q3-Who inserts the script elements for each .js file in the index.html file, Webpack or loader?

Webpack. Loaders are used to pack any non-javascript resource and help Webpack compile and bundle those non-javascript resources as Webpack itself only understands javascript. Loaders work at their files during or before the bundle is generated.

Upvotes: 1

Related Questions