Monday, 24 December 2018

How to customize build configuration with custom webpack config in Angular CLI 6

Background

In Angular CLI 1.x (Angular 5) we had a command called "ng eject" which ejected underlying webpack configuration so that you could make changes based on your requirements. This has been disabled with Angular CLI 6.


As you can see it will be completely removed in Angular CLI 8.0 version. In this post, I will show you how you can customize your builds with custom webpack configuration without using ng eject. For this, we will use a library called angular-builders. This post assumes you have done necessary setup and have basic knowledge of Angular 6. I have written multiple posts previously on these. If you are not following it then take a look at the links in the related section at the end of this post.

This uses the concept of Builders. You can provide a builder of your own or can use one that is provided by the community.


How to customize build configuration with custom webpack config in Angular CLI 6

Let's start by adding new dependencies. Go to package.json and add following dependencies under devDependencies =

"@angular-builders/custom-webpack": "^7.0.0",
"@angular-builders/dev-server": "^7.0.0",
"@angular-devkit/build-angular": "~0.11.0", 

Make sure build-angular dependency is ~0.11.0. This is something that you may need to upgrade version for. We will see in a  moment how to use this. Once done go to your apps root folder and run -
  • npm install
This should install the required additional dependencies in the node_modules folder in the same directory.


Now go to angular.json file. Here you need to change the builder from "@angular-devkit/build-angular:browser" to "@angular-builders/custom-webpack:browser".

NOTE: If you are building an universal app and would like to change server build configuration use @angular-builders/custom-webpack:server instead of @angular-builders/custom-webpack:browser.


Next, you need to add customWebpackConfig property to your build target options to point it to your custom webback config file.

"customWebpackConfig": {"path": "./custom-webpack.config.js"},

Now your angular.json build configuration should look something like -

      "architect": {
        "build": {
          "builder": "@angular-builders/custom-webpack:browser",
          "options": {
            "customWebpackConfig": {"path": "./custom-webpack.config.js"},
            "outputPath": "dist/angular-demo",
            "index": "src/index.html",
            ....


Now you can create a file called custom-webpack.config.js in the root directory (Same place where the angular.json file exists).

In this file, you can add your custom webpack config. For example, if you want to add a custom loader for files with extension .example you can do something like below -


const path = require("path");

module.exports = {
  module: {
    rules: [
      {
        test: /\.example$/,
        use: ["example-loader"],
        include: path.resolve(__dirname, "./")
      }
    ]
  }
};



NOTE: Unlike ng eject command this configuration will be merged with default angular build configuration. So you need to add configuration to this file which you wish to change/add (and not the whole thing).


How to use ng serve with custom webpack configuration we set up above?

If you wish to use ng serve with above setup - i.e with custom webpack configuration make following additional changes -

Inside serve target in angular.json file change "builder": "@angular-devkit/build-angular:dev-server" to "builder": "@angular-builders/dev-server:generic".

Your serve target should look something like below -


"serve": {
  "builder": "@angular-builders/dev-server:generic",
  "options": {
    "browserTarget": "angulardemo:build"
  },
  "configurations": {
    "production": {
      "browserTarget": "angulardemo:build:production"
    }
  }
},


Now you can do an ng serve and custom webpack configuration changes we did will be used.

In the next post we will see how we can create a custom webpack plugin with setup in place. So stay tuned :)


Related Links

3 comments:

  1. thank you very much, it was very helpful

    ReplyDelete
  2. I found this extremely helpful!

    I followed your tutorial above but I'm getting an odd TypeError:

    Getting this error ```Cannot create property 'main' on string './src/index.js'
    Cannot create property 'main' on string './src/index.js'
    at GenericDevServerBuilder._addLiveReload (G:\Repos\CoreBridgeV3\node_modules\@angular-de
    vkit\build-angular\src\dev-server\index.js:191:38)```

    Any help would be awesome :)

    ReplyDelete
    Replies
    1. Starting from webpack 4 there is no need to define the entry point: it will take ./src/index.js as the default.

      So you need to create that file

      Delete

t> UA-39527780-1 back to top