Angular : use Webpack in own project
18, August 2020Since Angular 7, project is configured through angular.json file. But you maybe want to use Webpack plugins in your project. There is the solution !
Angular is based on Webpack to build the app. However, since Angular 7, the Angular CLI use angular.json
file for build requests.
Webpack is not longer available for customized plugins import.
But the is a solution to override the native build requests of Angular: Angular Builders.
@just-jeb was developped a builder to use the Webpack features in the App.
So, execute the following command :
npm i -D @angular-builders/custom-webpack
Then, in the file angular.json :
"architect": {
...
"build": {
"builder": "@angular-builders/custom-webpack:browser"
"options": {
"customWebpackConfig": {
"path": "./webpack-extra.config.js"
}
...
}
...
"serve": {
"builder": "@angular-builders/custom-webpack:dev-server"
"options": {
"customWebpackConfig": {
"path": "./webpack-extra.config.js"
}
...
}
In the file webpack-extra.config.js :
console.log('custom webpack config OK');
module.exports = {
plugins: [
]
};
Now, you can check that all works correctly with ng build
and ng serve
.
NB: The configurations browser, server, karma and dev-server are managed by the builder Custom Webpack
Moreover
You have set-up Webpack in Angular but what is the result?
To check the integration, the plugin InjectPlugin can be used.
Execute the following command:
npm i npm install webpack-inject-plugin
Then, in the file webpack-extra.json :
const InjectPlugin = require('webpack-inject-plugin').default;
module.exports = {
plugins: [
new InjectPlugin(function () {
return "console.log('InjectPlugin OK !');"
})
]
};
Execute the command:
ng serve
And check in the console the following message InjectPlugin OK !
.
This plugin allow you to inject code to each chunk build.
Hope this article has been useful for you.
See you in the next article.
Liens utiles :
- Configuration de l'environnement Angular
- Angular Builders
- Custom Webpack de @just-jeb
- Webpack
- Webpack Inject plugin
Add a comment