2

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...

R. Richards
  • 24,603
  • 10
  • 64
  • 64
Jon Sud
  • 10,211
  • 17
  • 76
  • 174

2 Answers2

1

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

Kamran Taghaddos
  • 452
  • 1
  • 10
  • 22
0

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

Update:

In the earlier versions of Angular, this file is placed in the following path node_modules/@angular-devkit/build-angular/src/builders/browser-esbuild/index.js.

Mahdi Zarei
  • 5,644
  • 7
  • 24
  • 54
  • It's a bad idea to patch original Angular configuration. Much better and cleaner way is to use a custom builder with custom webpack config (this one looks most popular and known - https://www.npmjs.com/package/@angular-builders/custom-webpack) or create your own custom builder (https://javascript.plainenglish.io/how-to-customize-an-angular-project-build-2e7e2c31ca6b) – vlad2135 Jan 12 '23 at 13:56
  • I did it in our team which develop an enterprise application in a banking industry and it worked fine for 5 new developers we hired without any documentation or anything. I just put the patch file runner in `postinstall` script. @vlad2135 – Mahdi Zarei Jan 14 '23 at 06:10
  • Are you sure about "browser.js" file? I don't have such file inside "configs"... – Alexander Feb 23 '23 at 22:13
  • what is your angular version? @Alexander – Mahdi Zarei Feb 25 '23 at 11:22
  • @MahdiZarei it's 15 – Alexander Feb 26 '23 at 12:12
  • 1
    @Alexander from angular 13 (or 12 I can't remember correctly) this file is placed in the following path `node_modules/@angular-devkit/build-angular/src/builders/browser-esbuild/index.js` – Mahdi Zarei Feb 27 '23 at 08:05