title: Angular 7 custom webpack.config.js
body: <p>since newest Angular has deprecated 'ng eject' command, I've started my project with adding custom file with webpack.config named: </p>
  
  <blockquote>
    <p>extra-webpack.config.js</p>
  </blockquote>
  
  <p>I've followed this tutorial: 
  <a href="https://codeburst.io/customizing-angular-cli-6-build-an-alternative-to-ng-eject-a48304cd3b21" rel="noreferrer">https://codeburst.io/customizing-angular-cli-6-build-an-alternative-to-ng-eject-a48304cd3b21</a></p>
  
  <p>I have configured everything and it seems to work fine. My problem is, that I would like to set my new file</p>
  
  <blockquote>
    <p>extra-webpack.config.js</p>
  </blockquote>
  
  <p>to work only when I start command </p>
  
  <blockquote>
    <p>"npm run start:dev"</p>
  </blockquote>
  
  <p>, I don't want to use it when I start </p>
  
  <blockquote>
    <p>"npm run start:prod"</p>
  </blockquote>
  
  <p>I've tried to make an if statement, to check if environment is not set to production on module.exports, but I can't gather environment from environment.ts file. I've tried with:
  import {environment} from './src/environments/environment';</p>
  
  <p>Can anyone help me with proper configuration? Thanks a lot</p>
  
  <p>Here is my extra-webpack.config.js file:</p>
  
  <pre><code>'use strict'; 
  const path = require('path'); const ForkTsCheckerWebpackPlugin = 
  require('fork-ts-checker-webpack-plugin');
  
  module.exports = {
      optimization: {
          splitChunks: {
            chunks: 'async',
            minSize: 30000,
            maxSize: 0,
            minChunks: 1,
            maxAsyncRequests: 5,
            maxInitialRequests: 3,
            automaticNameDelimiter: '~',
            name: true,
            cacheGroups: {
              vendors: {
                test: /[\\/]node_modules[\\/]/,
                priority: -10
              },
              default: {
                minChunks: 2,
                priority: -20,
                reuseExistingChunk: true
              }
            }
          }
        },
      context: __dirname,
      output: {
          pathinfo: false
      },
      mode: 'development',
      optimization: {
          removeAvailableModules: false,
          removeEmptyChunks: false,
          splitChunks: false
      },
      module: {
          rules: [
              {
                  test: /\.ts?$/,
                  include: path.resolve(__dirname, 'src'),
                  use: [{
                      loader: 'ts-loader',
                      options: {
                          transpileOnly: true,
                          experimentalWatchApi: true,
                      },
                  }]
                }
          ]
      },
      resolve: {
          extensions: [ '.ts', '.js' ]
      },
      plugins: [
          new ForkTsCheckerWebpackPlugin({
              tslint: true
          })
      ]
  };
  </code></pre>
  
  <p>this is my angular.json file:</p>
  
  <pre><code>{   "$schema": "./node_modules/@angular/cli/lib/config/schema.json",   "version": 1,   "newProjectRoot": "projects",   "projects": {
      "my-portal": {
        "root": "",
        "sourceRoot": "src",
        "projectType": "application",
        "prefix": "app",
        "schematics": {
          "@schematics/angular:component": {
            "styleext": "scss"
          }
        },
        "architect": {
          "build": {
            "builder": "@angular-builders/custom-webpack:browser",
            "options": {
              "customWebpackConfig": {
                "path": "./extra-webpack.config.js"
              },
              "outputPath": "dist/my-portal",
              "index": "src/index.html",
              "main": "src/main.ts",
              "polyfills": "src/polyfills.ts",
              "tsConfig": "src/tsconfig.app.json",
              "assets": [
                "src/favicon.ico",
                "src/assets"
              ],
              "styles": [
                "src/app/styles/style.scss"
              ],
              "scripts": []
            },
            "configurations": {
              "production": {
                "fileReplacements": [
                  {
                    "replace": "src/environments/environment.ts",
                    "with": "src/environments/environment.prod.ts"
                  }
                ],
                "optimization": true,
                "outputHashing": "all",
                "sourceMap": false,
                "extractCss": true,
                "namedChunks": false,
                "aot": true,
                "extractLicenses": true,
                "vendorChunk": false,
                "buildOptimizer": true,
                "budgets": [
                  {
                    "type": "initial",
                    "maximumWarning": "2mb",
                    "maximumError": "5mb"
                  }
                ]
              }
            }
          },
          "serve": {
            "builder": "@angular-builders/dev-server:generic",
            "options": {
              "browserTarget": "my-portal:build"
            },
            "configurations": {
              "production": {
                "browserTarget": "my-portal:build:production"
              }
            }
          },
          "extract-i18n": {
            "builder": "@angular-devkit/build-angular:extract-i18n",
            "options": {
              "browserTarget": "my-portal:build"
            }
          },
          "test": {
            "builder": "@angular-devkit/build-angular:karma",
            "options": {
              "main": "src/test.ts",
              "polyfills": "src/polyfills.ts",
              "tsConfig": "src/tsconfig.spec.json",
              "karmaConfig": "src/karma.conf.js",
              "styles": [
                "src/styles.scss"
              ],
              "scripts": [],
              "assets": [
                "src/favicon.ico",
                "src/assets"
              ]
            }
          },
          "lint": {
            "builder": "@angular-devkit/build-angular:tslint",
            "options": {
              "tsConfig": [
                "src/tsconfig.app.json",
                "src/tsconfig.spec.json"
              ],
              "exclude": [
                "**/node_modules/**"
              ]
            }
          }
        }
      },
      "my-portal-e2e": {
        "root": "e2e/",
        "projectType": "application",
        "prefix": "",
        "architect": {
          "e2e": {
            "builder": "@angular-devkit/build-angular:protractor",
            "options": {
              "protractorConfig": "e2e/protractor.conf.js",
              "devServerTarget": "my-portal:serve"
            },
            "configurations": {
              "production": {
                "devServerTarget": "my-portal:serve:production"
              }
            }
          },
          "lint": {
            "builder": "@angular-devkit/build-angular:tslint",
            "options": {
              "tsConfig": "e2e/tsconfig.e2e.json",
              "exclude": [
                "**/node_modules/**"
              ]
            }
          }
        }
      }   },   "defaultProject": "my-portal" }
  </code></pre>
  
  <p>I have also noticed that, if I removed:</p>
  
  <pre><code>plugins: [
          new ForkTsCheckerWebpackPlugin({
              tslint: true
          })
      ]
  </code></pre>
  
  <p>from webpack configuration, I'm able to run it with </p>
  
  <blockquote>
    <p>npm run start:prod</p>
  </blockquote>