CODEWITHSUNDEEP
angularwebpack
Salman Kazmi
Salman Kazmi

Reputation: 3248

Role of Webpack in Angular's ng serve

I am new to Angular and was wondering what role does Webpack play behind the scene when we ng serve the application. During initial impressions, I have come to know that webpack acts as a build and package tool that groups all the required JS files into separate bundles. I could not, however, find the webpack configuration file and could not figure how angular and webpack come together in the picture.

So when I serve the angular 4 app, this is what is printed on the terminal. Can't exactly understand what is happening behind the scenes.

webpack: Compiling...
Date: 2017-12-05T07:13:25.436Z
Hash: a6d360a858a29480ebbc
Time: 310ms
chunk {inline} inline.bundle.js, inline.bundle.js.map (inline) 5.83 kB [entry]
chunk {main} main.bundle.js, main.bundle.js.map (main) 35.4 kB {vendor} [initial] [rendered]
kB {vendor} [initial] [rendered]                            ap (polyfills) 200 kB {inline} [initial]chunk {polyfills} polyfills.bundle.js, polyfills.bundle.js.map (polyfills) 200 kB {inline} [initial]
chunk {styles} styles.bundle.js, styles.bundle.js.map (styles) 195 kB {inline} [initial]chunk {vendor} vendor.bundle.js, vendor.bundle.js.map (vendor) 3.65 MB [initial]
webpack: Compiled successfully.

Any help would be appreciated.

Upvotes: 4

Views: 4217

Answers (2)

x2twelve
x2twelve

Reputation: 55

basically youre totally right!

maybe you want to have a look at the webpack article in the official documentation? https://angular.io/guide/webpack

btw: webpack is used since late 2016 and has some benefits compared to Broccoli & SystemJS for example AoT and faster build times.

Upvotes: 1

Joe Clay
Joe Clay

Reputation: 35797

Angular CLI effectively puts together a Webpack config file on the fly based on the project configuration options you pass in.

You can find the main piece of the code that generates this config here, and the code that passes it to Webpack when you run ng serve here.

Upvotes: 3

Related Questions