How to see webpack config from angular application?

Question

I create angular application using ng new my-app command.

How I can see webpack.config that Angular built for my app? I don't want to customize this webpack config. just to log it to file/screen...

Answer 1

Angular core webpack config is placed in node_modules/@angular-devkit/build-angular/src/webpack/configs/browser.js and you can change the parameters there.

Suggestion is to create a patch.js file to change the file after every npm update to prevent rewriting codes.

And if you are talking about the webpack to use in building your additional package you have to create config file yourself and reference that in angular.json

Answer 2

I wanted to have a custom webpack config file like you and implement it as below:

1. Install custom-webpack library

   npm i -D @angular-builders/custom-webpack

2. Add the following configurations to angular.json file

   "architect": { ... "build": { "builder": "@angular-builders/custom-webpack:browser", "options": { "customWebpackConfig": { "path": "./webpack.config.js" }, ... } }

3. If your project configured with angular universal (SSR) then you should add following configurations in your angular.json file too:

    "architect": { ... "serve": { "builder": "@angular-builders/custom-webpack:dev-server", "options": { "customWebpackConfig": { "path": "./webpack.config.js" } } ...

   }

4. Create webpack.config.js in the root of your application project and write your custom webpack configurations in it