CODEWITHSUNDEEP
javascriptangularwebpackangular-cli
Remotec
Remotec

Reputation: 10760

What is the difference between ng build and webpack

As I understand it, ng-build creates a distributable packaged version of your application. I also understand that webpack is used to bundle Javascript modules.

I ran ng build on a test project and found that it created a dist folder containing what looked like a packaged version of my Angular application. All of the .js files had been combined however my referenced .css files had been left in the original form (not bundled or minified).

Therefore, what is the difference between using ng build or webpack to do this job. Or are they complimentary? Would I potentially use both in my deployment pipeline?

Upvotes: 2

Views: 5028

Answers (2)

mekala goutham budda dev
mekala goutham budda dev

Reputation: 335

Webpack and ng-build do pretty much the same job, which is bundling your modules to be used in a browser environment For example, the Angular module is a feature, which doesn't support in the browser, and ES 6 modules are not implemented in any browser yet, which is why things need to be bundled.ng build only for angular. we can you webpack any UI related applications including angular.

Upvotes: 0

Julius Dzidzevičius
Julius Dzidzevičius

Reputation: 11000

Not a complete answer, but worth to note:

If your css files were not compiled, it probably means, either:

  1. you ran ng build (a.k.a. ng build --dev) which adds default --extract-css to false:

--extract-css (aliases: -ec)

Extract css from global styles onto css files instead of js ones.

  1. You ran ng build --prod but forgot to reference your styles as global styles in angular.cli.json:

    "styles": [ "styles.css", "assets/styles/test.component.css" ],

Once you do this you will find your css files inlined, however, you will also find them in normal format as well. Cant understand why is that..

Upvotes: 3

Related Questions