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?
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.
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
Related
I have a webpack react project. It runs only webpack, but I want to remove the webpack related matter and run as a normal react project.
webpack is just a bundler. It bundles all your js files and dump that as string in eval function in one single js file.
I Got your question now. I guess, you mean that you have a react project. Its developed now. And you want only the usefule files now, right? If thats the case, you need only two files(primarily for the project). First you build the project with whatever script you have, I guess, npm run build.
Post that, you will see a dist folder at the root.
Inside that dist folder you will find one index.html file and index.js file. Besides this you may want css and assets folder.
Does that answers your concern?
I'm wondering if it is possible to split up bundles using the angular cli based on a component. For instance, I would like to have multiple components in this app that could or could not exist on the same page, but reference them through separate bundles. Some kind of set up like this would be desired:
/test-app
.angular-cli.json
package.json
tslint.json
src
app
email-list
*.ts
*.html
email-compose
*.ts
*.html
links-links
*.ts
*.html
After the project is built, I would like to be able to have the following bundles:
poylfills.bundle.js
vendor.bundle.js
email.bundle.js
links.bundle.js
Is this possible?
They've prepared support for multiple apps/entry-points (which is equivalent to what you're asking) in the angular-cli.json, but they havn't gotten around to implement it yet. Here's a link to the issues page
In addition, they've announced that they don't intent to expose the webpack configuration of angular-cli, so you wont be able to use your own custom webpack config to do the separate bundling.
So for now, I guess the conclusion is, that it may not be possible (or worth the effort) to make Angular-cli create multiple separate bundles. So you'll probably have to either wait, or skip using the cli, and do the bundling "manually" (create your own bundling process using grunt, gulp, webpack or similar).
Here is my project structure
My goal is to generate stylus files into css, compile the jade files into HTML and image optimization. There is nothing much happening in the js folder, the js files need to be minified and in some instances, need to be combined into a single js file into dist/js folder. However I intend to use AngularJS, KendoUI and BrowserSync onto this project. I usually use Gulp to achieve the task. I would like to know if Webpack can make my life easier. Can I achieve the same using Webpack instead of Gulp. Is it worth the effort?
Yes you can use webpack!
Webpack can do much more then gulp, gulp is a only task runner on the other hand webpack is a bundler for modules. The main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging just about any resource or asset.
I used gulp before webpack and i have to admit it did the job but was very complicated for with all those tasks and now i let webpack to do the hard job :-)
Learn more about webpack
Simple configuration from my seed
I'm trying to use webpack with my angular-meteor application. Unfortunately the meteor build fails with the following error:
While determining active plugins:
error: conflict: two packages included in the app (pbastowski:angular-babel and webpack:webpack) are both trying to handle *.js
The angular-meteor package has a dependency on pbastowski:angular-babel for ES2015 support, while webpack uses the babel-loader. Any idea how I can avoid this conflict?
This is a Meteor message that will appear when two Meteor packages try to add a Meteor compiler plugin for the same file extension, in this case ".js".
Option 1
Remove webpack:webpack from your project. Do you really need webpack in your Meteor project? Meteor bundles everything for you, so, there is no need to use webpack, as such. If you want to use ES6 modules then consider using pbastowski:systemjs.
meteor remove webpack:webpack
I don't know your reasons for using webpack, but I thought I'd mention this option.
Option 2
You can configure pbastowski:angular-babel to not compile ".js" files by adding the line below to babel.json in your Meteor project's root folder. However, if you do this, Babel will only compile ".es6.js" files and not ".js" files.
babel.json
{
"extensions": ["es6.js"]
}
Some people here are trying to say that Webpack is useless but they really don't know much about it.
It can helps you bundle a lot better your assets.
You can bundle better your CSS and even have local CSS (css that is not applied globally but only in a section of your page)
You can do code splitting and not serve your entire app on the first page load
You can have hot-reloading with no page refresh (at least with React ;))
You can use angular and Webpack together without any problem. Here is what you need to do:
meteor remove angular
meteor add angular-meteor-data
meteor add angular-templates
The only missing piece then is ng-annotate and luckily, there is a few ways. You can use the ng-annotate-loader or ng-annotate-webpack-plugin in your Webpack config file.
i am trying trying to create a project with webpack, angular and gulp. Webpack creates a bundle file called build.js and an index.html from a template. When the browser enters the webpage i want it to go directly to a login screen by using ui-route.
this is how my directory structure looks like.
Firstly my problem is that the bundle only includes the entry file, app.module.js. I can require the other js files in app.module.js to have them in the bundle to but when this project grows it will be a lot of files to be required in one file. So is it possible to bundle all js files except the once in node_modules folder?
My next problem is that when the build.js and index.html has been created in the dist/build folder i cant seem to find the rest of the html files in the project if they are not in the build folder.
Not sure how your webpack config looks like, but many times the HTML is processed by webpack and might end up in your JS bundle (as a string) that then can be used by Angular.