Does webpack packages files referenced in .angular-cli.json?

Question

There is a "styles" section and "scripts" section in .angular-cli.json.

I have added some files under "styles" and "scripts" sections. It appears that my angular project does not recognise these files.

Is webpack aware of the configurations inside .angular-cli.json?

Does webpack packages files referenced under "styles" and "scripts" section of .angular-cli.json? If yes, how can I be sure it is actually doing this? How can I trace which files are packed, which files aren't packed by webpack?

Following is the error I receive from webpack:

ERROR in ./src/main/webapp/app/header/header.component.html
Module not found: Error: Can't resolve './dist/img/user2-160x160.jpg' in '/Users/halil/Projects/kodfarki/chargeback2/business-services/src/main/webapp/app/header'
 @ ./src/main/webapp/app/header/header.component.html 1:4961-5000 1:5174-5213
 @ ./src/main/webapp/app/header/header.component.ts
 @ ./src/main/webapp/app/app.module.ts
 @ ./src/main/webapp/app/app.main.ts

Following is my folder structure:

Following is my .angular-cli.json definition:

"apps": [{
    "root": "src/main/webapp/",
    "outDir": "target/www/app",
    "assets": [
        "content",
        "dist",
        "favicon.ico"
    ],

Answer 1

Looks like you are using jhipster which is just partly supports angular cli(only for codegeneration purposes). That is why your scripts, assets in your .angular-cli.json not making any effect as jhipster is using its own build chain. So with jhipser you have to do it a bit differently.

You need to use vendor.ts where you can reference your custom css and js files.