Mutable Webpack Angular Builder
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.
Quick Start
package.json
:
.. "devDependencies":
angular.json
:
.. "architect":
webpack.config.mutator.js
:
module { const filteredRules = sourceWebpackmodulerules sourceWebpackmodulerules = filteredRules return sourceWebpack}
Goal
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.
Using/Configuration
Prerequisites
- @angular-devkit/build-angular.
Configuration
1 . Add mutable-webpack-angular-builder (and prerequisite) to package.json
:
.. "devDependencies":
2 . Set builder
to mutable-webpack-angular-builder in angular.json
:
.. "architect":
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":
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:
{ // 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)
{ const filteredRules = sourceWebpackmodulerules filteredRules filteredRules sourceWebpackmodulerules = 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 { // do something with the Original Webpack Configuration return sourceWebpack // return the Modified Webpack Configuration}
Advanced Configuration
A . Additional options may be define and use since no validation is imposed on the Builder's options:
angular.json
:
.. "architect":
B . Mutator function additionally receive an object with the fields been used to call the Angular Ng Webpack's creator:
WebpackOptions
Then, the Mutator function can be:
{ // 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}
Extending/Developing
Documentation
CHANGELOG.md
: add information of notable changes for each version here, chronologically ordered [1].
[1] Keep a Changelog
License
Remember
- 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.
Additional words
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.