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.
Related
I have a react app that opens a widget in a div. I want to bundle it using parcel, ideally as a single js file.
Currently my build command looks like this
// package.json
"build:widget": "parcel build src/index.js --no-source-maps -d docs"
which builds a folder of files. If I then include the index.css and index.js on a 3rd party/demo site, the app works. However it is missing the images as they are looked for relative to the host site's root, not the index.js files root.
Is it possible to combine the css and js into one convenient file, to help people add the embed to their sites?
Can I add images to the parcel so they are either embedded in the js or linked to the server/cdn where the index.js file is hosted?
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
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 am currently getting my head around how to serve an angular 1.4 app without all the concatenation/minification etc . In my current project we use grunt and the grunt serve option is bundling all the js/css together and I would like to see the 'as is' js files in the devtools. I tried to reconfigure the grunt serve but it looks too complicated. For example looks like the index.html file needs to be in the app folder for it too work but this is different in my project. How can I get it working or what other options( webpack ?) do I have?
How about looking at generating source maps for your .js files - this will allow you to serve minified (as you would in production) and map to your source files, allowing you to debug through the unminifed code.
Take a look at the grunt-contrib-concat plugin - https://github.com/gruntjs/grunt-contrib-concat
here is my folder structure
app
index.html
css folder
js folder
src folder
build
index.html
minified css
minified js
my src folder has angular.min.js and all other supporting files. Now I run grunt and move all css html and js files to build folder. But html is still referring to app/src folder which is not inside build. I don't want to create one more src folder inside build. I want to refer same folder which is inside app from build/index.html. How can I do these changes when I run grunt?
If it's just relative paths that you need to update in your built source files, you can always use something like grunt-rewrite to do a global glob find/replace. It's fast, it's easy to configure, and doesn't muck with your source.