Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Angular CLI custom webpack config

In previous versions of Angular there was an option for eject so that you could modify your webpack configuration as you please.
One of the most common use cases for this feature was adding custom webpack loaders.

In Angular 6 this option has been removed, so currently there is literally no way to get the webpack config (beside looking it up in angular source code).

Is there any way to add a custom webpack config to Angular application that uses @angular/cli 6+? Or alternatively, is there any way to "eject" the webpack config the new Angular CLI uses under the hood?

like image 213
JeB Avatar asked Jun 27 '18 18:06

JeB


People also ask

Does angular CLI use 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.

Where is webpack config in angular project?

Angular core webpack config is placed in node_modules/@angular-devkit/build-angular/src/webpack/configs/browser. js and you can change the parameters there. Suggestion is to create a patch. js file to change the file after every npm update to prevent rewriting codes.

Does ng build use webpack?

The application builder uses the webpack build tool, with default configuration options specified in the workspace configuration file ( angular. json ) or with a named alternative configuration.


1 Answers

You can use angular-builders library that allows you extending the existing browser and server targets (and more than that) with a custom webpack config.

The usage is pretty simple:

  1. Install the library: npm i -D @angular-builders/custom-webpack

  2. Modify your angular.json:

    "architect": {    ...    "build": {        "builder": "@angular-builders/custom-webpack:browser"        "options": {               "customWebpackConfig": {                  "path": "./extra-webpack.config.js",                  "replaceDuplicatePlugins": true               },               "outputPath": "dist/my-cool-library",               "index": "src/index.html",               "main": "src/main.ts",               "polyfills": "src/polyfills.ts",               "tsConfig": "src/tsconfig.app.json"               ...        } 
  3. Add extra-webpack.config.js to the root of your application

  4. Put the extra configuration inside extra-webpack.config.js (just a plain webpack configuration)

  • Quick guide
  • Full documentation
  • An example that adds node-loader to browser config.
like image 101
JeB Avatar answered Sep 22 '22 01:09

JeB