{"id":447,"date":"2020-09-22T12:39:10","date_gmt":"2020-09-22T10:39:10","guid":{"rendered":"http:\/\/www.myblog.nguenkam.com\/?p=447"},"modified":"2022-06-08T17:59:58","modified_gmt":"2022-06-08T15:59:58","slug":"how-to-customize-your-angular-build-with-webpack","status":"publish","type":"post","link":"https:\/\/nguenkam.com\/blog\/index.php\/2020\/09\/22\/how-to-customize-your-angular-build-with-webpack\/","title":{"rendered":"How to Customize Your Angular Build With Webpack"},"content":{"rendered":"\n

If you\u2019re a frontend dev in the world today you\u2019ve probably heard of (and possibly even used) webpack<\/strong>. The Angular build process uses webpack behind the scenes to transpile TypeScript to JavaScript, transform Sass files to CSS, and many other tasks. To understand the importance of this build tool, it helps to understand why it exists.<\/p>\n\n\n\n

Browsers have very limited support for JavaScript modules. In practice, any JavaScript application loaded into the browser should be contained in a single source file. On the other hand, it is good software development practice to separate out code into modules contained in separate files. When deploying a JavaScript application for the browser, the modules must then be built into a single source file. Bundling multiple modules into a single file is the main purpose of webpack.<\/p>\n\n\n\n

Webpack is not limited to simply bundling source files. Because it can support a multitude of plugins, it can perform many additional tasks. Webpack module loaders are able to parse different file types. This allows, for example, Angular TypeScript files to use the import<\/code> statement to import stylesheet files. Usually, webpack is hidden behind the Angular command-line tool. But in some cases, it may be necessary to tweak the configuration of webpack when building an Angular application.<\/p>\n\n\n\n

In earlier versions of Angular, it was possible to eject the webpack configuration and modify it directly. But, since Angular 8, access to the base configuration has been disabled. But it is still possible to extend the webpack configuration and add additional loaders or configuration options. In this tutorial,we will see how to create an Angular application and tweak the webpack configuration.<\/p>\n\n\n\n

Set Up Angular With Webpack<\/span><\/h4>\n\n\n\n

To allow customization of the webpack configuration, you will need to install the custom webpack Angular builder. Navigate into the Project directory  and run the following command.<\/p>\n\n\n\n

npm i @angular-builders\/custom-webpack<\/code><\/pre>\n\n\n\n
You will be using the webpack-define<\/code> plugin to inject global value definitions into your code. As an example, this could be used to feature flag parts of your applications.<\/p>\n\n\n\n
To enable custom webpack configurations, open the angular.json<\/code> configuration file. Locate the line \"builder\": \"@angular-devkit\/build-angular:browser\"<\/code> inside the architect.build<\/code> section. Replace it with the following lines.<\/p>\n\n\n\n
\"builder\": \"@angular-builders\/custom-webpack:browser\",<\/code><\/pre>\n\n\n\n
Now, inside architect.build.options<\/code> add the following property.<\/p>\n\n\n\n
\"customWebpackConfig\": {\n  \"path\": \".\/custom-webpack.config.js\"\n},<\/code><\/pre>\n\n\n\n
This adds the custom-webpack.config.js<\/code> to the default webpack configuration for the ng build<\/code> command. To also enable the configuration for the ng serve<\/code> command, locate the line \"builder\": \"@angular-devkit\/build-angular:dev-server\",<\/code> and replace it with the code below.<\/p>\n\n\n\n
\"builder\": \"@angular-builders\/custom-webpack:dev-server\",<\/code><\/pre>\n\n\n\n
Now create the file custom-webpack.config.js<\/code> and paste the following content into it.<\/p>\n\n\n\n
const webpack = require('webpack');\n\nmodule.exports = {\n  plugins: [\n    new webpack.DefinePlugin({\n      'STABLE_FEATURE': JSON.stringify(true),\n      'EXPERIMENTAL_FEATURE': JSON.stringify(false)\n    })\n  ]\n};<\/code><\/pre>\n\n\n\n
This creates two global constants, STABLE_FEATURE<\/code> and EXPERIMENTAL_FEATURE<\/code>, and makes them available in your application. To read more about the usage of the DefinePlugin<\/code>, please see the DefinePlugin\u2019s documentation<\/a>.<\/p>\n\n\n\n
<\/p>\n\n\n\n
The DemoComponent<\/code> will display content depending on the feature flags that you defined in the webpack configuration. Open demo.component.ts<\/code> file and paste the following code into it.<\/p>\n\n\n\n
import { Component, OnInit } from '@angular\/core';\n\ndeclare const STABLE_FEATURE: boolean;\ndeclare const EXPERIMENTAL_FEATURE: boolean;\n\n@Component({\n  selector: 'app-demo',\n  templateUrl: '.\/demo.component.html',\n  styleUrls: ['.\/demo.component.css']\n})\nexport class DemoComponent implements OnInit {\n  stableFeature: string;\n  experimentalFeature: string;\n\n  constructor() { }\n\n  ngOnInit() {\n    this.stableFeature = STABLE_FEATURE ? 'Stable feature enabled' : 'Stable feature disabled';\n    this.experimentalFeature = EXPERIMENTAL_FEATURE ? 'Experimental feature enabled' : 'Experimental feature disabled';\n  }\n}<\/code><\/pre>\n\n\n\n
Note the declarations of STABLE_FEATURE<\/code> and EXPERIMENTAL_FEATURE<\/code> at the top of the file. These are needed for TypeScript to know that the two constants exist. But also notice that no values are assigned here.<\/p>\n\n\n\n
Next, open the file demo.component.html<\/code> and replace the contents with the following lines.<\/p>\n\n\n\n
<div class=\"container\">\n  <div class=\"row mt-5\">\n    <div class=\"col-sm col-md-8 offset-md-2\">\n      <h2>Demo Features<\/h2>\n      <p>\n        {{stableFeature}}\n      <\/p>\n      <p>\n        {{experimentalFeature}}\n      <\/p>\n    <\/div>\n  <\/div>\n<\/div>\nAdd Angular<\/code><\/pre>\n\n\n\n
Well done! You have completed the implementation of an Angular application with a custom webpack configuration. <\/p>\n\n\n\n
You can try out the application by opening the terminal again and running the following command.<\/p>\n\n\n\n
ng serve<\/code><\/pre>\n\n\n\n
Open your browser and navigate to http:\/\/localhost:4200\/<\/code> and you will see your application. You should see something like this.<\/p>\n\n\n\n
\"The<\/figure>\n\n\n\n
References:<\/h5>\n\n\n\n
https:\/\/developer.okta.com\/<\/a><\/p>\n\n\n\n
<\/p>\n","protected":false},"excerpt":{"rendered":"
If you\u2019re a frontend dev in the world today you\u2019ve probably heard of (and possibly even used) webpack. The Angular build process uses webpack behind the scenes to transpile TypeScript to JavaScript, transform Sass files to CSS, and many other tasks. To understand the importance of this build tool, it helps to understand why it exists. […]<\/p>\n","protected":false},"author":1,"featured_media":1965,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[37,104],"tags":[40,106,105,107],"_links":{"self":[{"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/447"}],"collection":[{"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/comments?post=447"}],"version-history":[{"count":7,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/447\/revisions"}],"predecessor-version":[{"id":1975,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/447\/revisions\/1975"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/media\/1965"}],"wp:attachment":[{"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/media?parent=447"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/categories?post=447"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/tags?post=447"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}