To start you will need to globally install the Angular command-line tool. I will assume that you have a general knowledge of JavaScript and Angular and that you have installed node and the npm package manager on your system. In this tutorial, I will be showing you how to create an Angular 8 application and tweak the webpack configuration. But it is still possible to extend the webpack configuration and add additional loaders or configuration options. With Angular 8, access to the base configuration has been disabled. In earlier versions of Angular, it was possible to eject the webpack configuration and modify it directly. But in some cases, it may be necessary to tweak the configuration of webpack when building an Angular application. Usually, webpack is hidden behind the Angular command-line tool.

This allows, for example, Angular TypeScript files to use the import statement to import stylesheet files. Webpack module loaders are able to parse different file types. Because it can support a multitude of plugins, it can perform many additional tasks. Webpack is not limited to simply bundling source files. Webpack’s superpower is bundling multiple modules into a single file, making it a very important build tool. It’s also a best practice to distinguish out code into modules contained in separate files, which is why when deploying a JavaScript application, modules are built into a single source file. In theory, any JavaScript application should be confined within a single source file before loading it into a browser. JavaScript modules have very restricted support within web browsers.

The Angular build process uses webpack to tackle many tasks such as transforming Sass files to CSS, and transpiling TypeScript to JavaScript. If you’re a front-end developer, then there are good chances that you’ve heard or even used webpack.

Angular app builder