CODEWITHSUNDEEP
angularwebpack
ttmt
ttmt

Reputation: 4984

Angular cli and webpack

Having a play round with angular cli https://github.com/angular/angular-cli#documentation

I can create a simple app and view it at localhost.

If I inspect the localhost site I can see the css and js links inserted by webpack.

How are these added when the index.html looks like this 

    <!doctype html>
    <html>
    <head>
      <meta charset="utf-8">
      <title>Wpng</title>
      <base href="/">

      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="icon" type="image/x-icon" href="favicon.ico">
    </head>
    <body>
      <app-root>Loading...</app-root>
    </body>
    </html>

Also I cant see any webpack.config.js in the files so how is webpack used

Upvotes: 2

Views: 992

Answers (2)

goto
goto

Reputation: 4425

The angular-cli is made in a way that you should not be worrying about setting anything up in the webpack.config.js file as this is done already for you... Unfortunately, last time I checked there was no official list of all webpack loaders that are inclucded in the angular-cli, however, everything you think you'd need is already there. This is what makes angular-cli so simple and easy.

With that being said, the reason why you're not seeing any javascript files linked in the index.html file is because when you're developing, you're not actually working with a build but rather with an app that is kept in "memory" and changes as you develop your app. I know it's like magic and the first time I used angluar-cli I was confused about this too...

Lastly, if you actually build the project using the ng build --prod command, then you'll get a new directory called dist with the actual source code and a index.html file that links the bundle.js file as you would expect it.

As far as I know the webpack config is not supposed to be meant for changing in the angular cli. At least this was the case last time I checked.

Upvotes: 3

DeborahK
DeborahK

Reputation: 60518

The Angular CLI is handling the webpack.config file internally. If you want to see it and work with it manually, you can use the ng eject option.

See this answer for more information: angular-cli where is webpack.config.js file - new 2017-Feb: ng eject

Upvotes: 3

Related Questions