Security News
The Unpaid Backbone of Open Source: Solo Maintainers Face Increasing Security Demands
Solo open source maintainers face burnout and security challenges, with 60% unpaid and 60% considering quitting.
@angular-builders/custom-webpack
Advanced tools
Custom webpack builders for Angular build facade. Allow to modify Angular build configuration without ejecting it
@angular-builders/custom-webpack is an npm package that allows you to customize the Webpack configuration in Angular projects. It provides a way to extend or override the default Angular build process with custom Webpack configurations.
Custom Webpack Configuration
This feature allows you to specify a custom Webpack configuration file (extra-webpack.config.js) that extends or overrides the default Angular build configuration. The custom configuration can be applied to both build and serve commands.
{"angular.json":{"projects":{"your-project-name":{"architect":{"build":{"builder":"@angular-builders/custom-webpack:browser","options":{"customWebpackConfig":{"path":"./extra-webpack.config.js"}}},"serve":{"builder":"@angular-builders/custom-webpack:dev-server","options":{"customWebpackConfig":{"path":"./extra-webpack.config.js"}}}}}}},"extra-webpack.config.js":{"module":{"rules":[{"test":"\\.js$","exclude":"/node_modules/","use":{"loader":"babel-loader","options":{"presets":["@babel/preset-env"]}}}]}}}
Merge Strategies
This feature allows you to define merge strategies for the custom Webpack configuration. In this example, the 'module.rules' array from the custom configuration is prepended to the default configuration.
{"extra-webpack.config.js":{"module":{"rules":[{"test":"\\.js$","exclude":"/node_modules/","use":{"loader":"babel-loader","options":{"presets":["@babel/preset-env"]}}}]}},"angular.json":{"projects":{"your-project-name":{"architect":{"build":{"builder":"@angular-builders/custom-webpack:browser","options":{"customWebpackConfig":{"path":"./extra-webpack.config.js","mergeStrategies":{"module.rules":"prepend"}}}}}}}}}
Custom Webpack Configuration for Different Environments
This feature allows you to specify different custom Webpack configurations for different environments (e.g., production and development). Each environment can have its own configuration file.
{"angular.json":{"projects":{"your-project-name":{"architect":{"build":{"builder":"@angular-builders/custom-webpack:browser","configurations":{"production":{"customWebpackConfig":{"path":"./webpack.prod.config.js"}},"development":{"customWebpackConfig":{"path":"./webpack.dev.config.js"}}}}}}}},"webpack.prod.config.js":{"mode":"production","optimization":{"minimize":true}},"webpack.dev.config.js":{"mode":"development","devtool":"source-map"}}
ngx-build-plus is another package that allows you to extend the Angular CLI's build process with custom Webpack configurations. It provides similar functionality to @angular-builders/custom-webpack, including the ability to merge custom configurations and support for different environments.
angular-cli-customizer is a package that enables customization of the Angular CLI build process. It allows you to modify the Webpack configuration and provides hooks for various stages of the build process. It is similar to @angular-builders/custom-webpack but offers a different approach to customization.
Custom webpack builders for Angular build facade.
Allow customizing build configuration without ejecting webpack configuration (ng eject
)
npm i -D @angular-builders/custom-webpack
angular.json
:
"projects": {
...
"[project]": {
...
"architect": {
...
"[architect-target]": {
"builder": "@angular-builders/custom-webpack:[browser|server|karma]"
"options": {
...
}
Where:
[architect-target]
is not one of the predefined targets (like build, serve, test etc.) then run it like this:ng run [project]:[architect-target]
ng [architect-target]
"projects": {
...
"example-app": {
...
"architect": {
...
"build": {
"builder": "@angular-builders/custom-webpack:browser"
"options": {
...
}
ng build
Extended @angular-devkit/build-angular:browser
builder that allows to specify additional webpack configuration (on top of the existing under the hood).
The builder will run the same build as @angular-devkit/build-angular:browser
does with extra parameters that are specified in the provided webpack configuration.
Builder options:
@angular-devkit/build-angular:browser
optionscustomWebpackConfig
: see belowangular.json
Example:
"architect": {
...
"build": {
"builder": "@angular-builders/custom-webpack:browser"
"options": {
"customWebpackConfig": {
path: "./extra-webpack.config.js",
mergeStrategies: { "externals": "prepend" },
}
"outputPath": "dist/my-cool-client",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.app.json"
}
In this example externals
entry from extra-webpack.config.js
will be prepended to externals
entry from Angular CLI underlying webpack config.
Extended @angular-devkit/build-angular:server
builder that allows to specify additional webpack configuration (on top of the existing under the hood).
The builder will run the same build as @angular-devkit/build-angular:server
does with extra parameters that are specified in the provided webpack configuration.
Builder options:
@angular-devkit/build-angular:server
optionscustomWebpackConfig
: see belowangular.json
Example:
"architect": {
...
"build": {
"builder": "@angular-builders/custom-webpack:server"
"options": {
"customWebpackConfig": {
path: "./extra-webpack.config.js",
mergeStrategies: { "loaders": "replace" },
replaceDuplicatePlugins: true
}
"outputPath": "dist/my-cool-server",
"main": "src/main.server.ts",
"tsConfig": "src/tsconfig.server.json"
}
Extended @angular-devkit/build-angular:karma
builder that allows to specify additional webpack configuration (on top of the existing under the hood).
The builder will run the same build as @angular-devkit/build-angular:karma
does with extra parameters that are specified in the provided webpack configuration.
Builder options:
@angular-devkit/build-angular:karma
optionscustomWebpackConfig
: see belowangular.json
Example:
"architect": {
...
"test": {
"builder": "@angular-builders/custom-webpack:karma"
"options": {
"customWebpackConfig": {
path: "./extra-webpack.config.js",
}
"main": "src/test.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.spec.json",
"karmaConfig": "src/karma.conf.js",
...
}
This object defines your custom webpack configuration. It is defined by the following properties:
path
: path to the extra webpack configuration, defaults to webpack.config.js
.
Notice that this configuration shall contain only modifications and additions, you don't have to specify the whole webpack configuration.
Thus, if you'd like to add some options to style-loader
(which already there because of default Angular configuration), you only have to specify this part of the loader:
{
test: /\.css$/,
use: [
{loader: 'style-loader', options: {...}}
]
}
The builder will take care of merging the delta with the existing configuration provided by Angular.
mergeStrategies
: webpack config merge strategies, can be append | prepend | replace
per webpack config entry. Defaults to append
.
append
: appends the given entry configuration (in custom webpack config) to the existing Angular CLI webpack configuration.prepend
: prepends the given entry configuration (in custom webpack config) to the existing field configuration (in Angular CLI webpack config). The custom loaders config will be added to the beginning of the existing loaders array.replace
: replaces the given entry configuration entirely. The custom webpack config will replace the Angular CLI webpack config (for this particular entry).
See webpack-merge for more info.replaceDuplicatePlugins
: Defaults to false
. If true
, the plugins in custom webpack config will replace the corresponding plugins in default Angular CLI webpack configuration.
FAQs
Custom webpack builders for Angular build facade. Allow to modify Angular build configuration without ejecting it
We found that @angular-builders/custom-webpack demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Solo open source maintainers face burnout and security challenges, with 60% unpaid and 60% considering quitting.
Security News
License exceptions modify the terms of open source licenses, impacting how software can be used, modified, and distributed. Developers should be aware of the legal implications of these exceptions.
Security News
A developer is accusing Tencent of violating the GPL by modifying a Python utility and changing its license to BSD, highlighting the importance of copyleft compliance.