Performing compression on our Angular application's compiled assets in our Express application's build system makes sense if you are serving them from an Express web server. However, what if you wanted to compress within your Angular application's own build system? It's possible to customize the configuration for an Angular application's build system by ejecting it from Angular CLI. This approach trades the ready-made, one-size-fits-all build functionality in Angular-CLI's default WebPack build system for a fully customizable and controllable WebPack setup. The choice to eject shouldn't be taken lightly, but it does offer the best way to take full control of your WebPack configuration.

A detail of ejecting that can be tricky to deal with at first is that configuration options are baked into the output WebPack configuration during ejection. That means that, if we want to target both development and production environments, we either need to update our output configuration to support another type of environment flag or eject our project twice to get a production and development configuration. For the sake of simplicity, let's cover the multi-configuration solution to this problem.

First, we will need to remove the start script from our package.json file:

...
"scripts": {
  "ng": "ng",
  "start": "ng serve --proxy-config proxy.conf.json",
  "build": "ng build",
  "test": "ng test",
  "lint": "ng lint",
  "e2e": "ng e2e"
},
...

Then, we can run the ejection command with a configuration target for the production mode:

ng eject --prod

This will create a new webpack.config.js WebPack configuration that matches your default Angular CLI production configuration, but now with all the internals exposed for customization. Since we want to do this same process for development configuration also, we will want to rename this file webpack.prod.config.js:

mv webpack.config.js webpack.prod.config.js

To run the eject command again, we will have to delete the ejected flag from our .angular-cli.json configuration:

...
"project": {
  "name": "my-angular4-project",
  "ejected": true
},
...

We will also need to remove the build, test, e2e and start scripts from our package.json file:

...
"scripts": {
  "ng": "ng",
  "build": "webpack --config ./webpack.prod.config.js",
  "test": "karma start ./karma.conf.js",
  "lint": "ng lint",
  "e2e": "protractor ./protractor.conf.js",
  "start": "webpack-dev-server --port=4200",
  "pree2e": "webdriver-manager update --standalone false --gecko false --quiet"
},
...

Now, we can rerun our ejection command without an environment flag to get the default WebPack development configuration. It's recommended that you run this command with the --sourcemaps flag as well, so we can make sure that our source maps are exported in our development WebPack configuration:

ng eject --sourcemaps 

Now, we can fully customize our WebPack configuration in our Angular application to make any customizations we might want. Let's explore a few frontend application WebPack optimizations that might make sense in our application over the next few sections.