license GitHub package.json version coverage

mutable-webpack-angular-builder allows to freely modified the Webpack configuration generated before Angular ng use it for building.

This project is licensed under the terms of the MIT license.

package.json:

 ..
 "devDependencies": {
 "@angular-devkit/build-angular": "*",
 "mutable-webpack-angular-builder": "1.0.0",
 ..

angular.json:

 ..
 "architect": {
 "build": {
 "builder": "mutable-webpack-angular-builder:browser",
 "options": {
 "mutatorFile": "webpack.config.mutator.js",
 ..

webpack.config.mutator.js:

module.exports = (sourceWebpack) => {
 const filteredRules = sourceWebpack.module.rules.filter(
 (rule) => !rule.test instanceof RegExp || !rule.test.test('.css')
 )
 sourceWebpack.module.rules = filteredRules
 return sourceWebpack
}

Many things in Angular Ng processes are hard-coded and it is difficult to do some advanced customization[1]. The purpose of mutable-webpack-angular-builder is to allow for fully modification of the Webpack Configuration provided by Angular for more "advanced" uses.

[1] Angular Ng processes are quite closed (and documentation is sometimes scattered and with a lot of "WIP").
There are other builders like @angular-builders/custom-webpack, which allows only to do merging of Webpack options.

• @angular-devkit/build-angular.

1 . Add mutable-webpack-angular-builder (and prerequisite) to package.json:

 ..
 "devDependencies": {
 "@angular-devkit/build-angular": "*",
 "mutable-webpack-angular-builder": "1.0.0",
 ..

2 . Set builder to mutable-webpack-angular-builder in angular.json:

 ..
 "architect": {
 "build": {
 "builder": "mutable-webpack-angular-builder:browser",
 ..

Usually set as "builder": "@angular-devkit/build-angular:browser".

3 . Add "mutatorFile" option to the builder to indicate the file that will contain the function that mutates the Webpack configuration:

 ..
 "build": {
 "builder": "mutable-webpack-angular-builder:browser",
 "options": {
 "mutatorFile": "webpack.config.mutator.js",
 ..

mutatorFile option is an additional option introduced by mutable-webpack-angular-builder.
If the option is not defined, then mutable-webpack-angular-builder:browser will silently "fail", i.e. no mutation will be applied.

4 . Create the function that mutates the Webpack configuration:

(sourceWebpack) => {
 // do something with the Original Webpack Configuration
 return sourceWebpack // return the Modified Webpack Configuration
}

E.g: The following removes some module rules that do not work quite well with React, and add some new rules (not shown)

(sourceWebpack) => {
 const filteredRules = sourceWebpack.module.rules.filter(
 (rule) => !rule.test instanceof RegExp || !rule.test.test('.css')
 )
 filteredRules.push(reactRule)
 filteredRules.push(cssRule)
 sourceWebpack.module.rules = filteredRules
 return sourceWebpack
}

For an actual use example, see basecode-ionic-react project

5 . Export the mutator function using CommonJs (which is what is use by Angular Ng to load this):

webpack.config.mutator.js:

module.exports = (sourceWebpack) => {
 // do something with the Original Webpack Configuration
 return sourceWebpack // return the Modified Webpack Configuration
}

A . Additional options may be define and use since no validation is imposed on the Builder's options:

angular.json:

 ..
 "architect": {
 "build": {
 "builder": "mutable-webpack-angular-builder:browser",
 "options": {
 "mutatorFile": "webpack.config.mutator.js",
 "option1": "..",
 "optionN": "..",
 ..

B . Mutator function additionally receive an object with the fields been used to call the Angular Ng Webpack's creator:

 (webpack: WebpackOptions, parameters: {root: string, projectRoot: string, host, options: {}}) => WebpackOptions

Then, the Mutator function can be:

(sourceWebpack, parameters) => {
 // do something with the Original Webpack Configuration
 // use the project root path: parameters.projectRoot
 // use an Additional options: parameters.option1
 return sourceWebpack // return the Modified Webpack Configuration
}

Developing

• CHANGELOG.md: add information of notable changes for each version here, chronologically ordered [1].

[1] Keep a Changelog

MIT License

• Use code style verification tools => Encourage Best Practices and Usability.
• Start testing early => Encourage Reliability and Maintainability.
• Code Review everything => Encourage Functional suitability, Performance Efficiency and Team work.

Don't forget:

• Love what you do.
• Learn everyday.
• Learn yourself.
• Share your knowledge.
• Learn from the past, dream on the future, live and enjoy the present to the max!.

At life:

• Let's act, not complain.
• Be flexible.

At work:

• Let's give solutions, not questions.