Background
In the last post,
we saw how we can customize webpack build configuration without using "ng build" command with angular CLI 6. In this post, I will show you how we can build our webpack plugin and use it in our angular project.
we saw how we can customize webpack build configuration without using "ng build" command with angular CLI 6. In this post, I will show you how we can build our webpack plugin and use it in our angular project.
Setup
We already created a custom webpack configuration file in the last post. So let's start from there. Our relevant angular.json webpack config has the following part -
"architect": {
"build": {
"builder": "@angular-builders/custom-webpack:browser",
"options": {
"customWebpackConfig": {"path": "./custom-webpack.config.js"},
So our custom webpack config file is -
- ./custom-webpack.config.js
Let's go ahead and make changes to this file so that we can provide it our own plugin to work. Add the following code to it -
const MyWebPackPlugin = require("./webpack-plugin.js")
module.exports = {
plugins: [
new MyWebPackPlugin({
message: 'Hellow World!'
})
]
}
As you can see it tells webpack that it needs to use a custom webpack plugin supplied. Also if you remember from last post configurations in this file are merged with the default ones. So no need to provide all webpack configurations in this file. Just the ones to add/edit should suffice.
In the above code, we are saying we need a plugin wrote in a separate file called ./webpack-plugin.js. Once we import it we create an instance of the plugin class and pass a variable called message to it. We will see this plugin class in a moment. So whenever webpack runs it will use this plugin.
For the actual plugin code create a file called custom-webpack.config.js in the same folder as webpack-plugin.js and add the following code to it.
class MyWebPackPlugin {
constructor(optionInput) {
this.options = optionInput;
}
apply(compiler) {
compiler.hooks.done.tap("MyWebPackPlugin", () => {
console.log("Message is : " + this.options.message);
});
}
}
module.exports = MyWebPackPlugin;
This is essentially creating a Plugin class called MyWebPackPlugin. It has a constructor which takes in options. If you revisit code in custom-webpack.config.js written above you will notice we are passing options to the instance of MyWebPackPlugin which has a message variable.
The directory structure for your reference is as follows -
Understanding the Plugin
A webpack plugin is a JavaScript object that has an apply method. This apply method is called by the webpack compiler, giving access to the entire compilation lifecycle.
So you see there is an apply method in the class we wrote above which takes an argument called compiler. This gives us access to complete compilation lifecycle. In the above example, we are looking for "done" event and getting a callback for that. To see a list of all hooks available visit -
To see all plugin APIs refer -
Finally, in the callback, we are printing out the value of message we got from our angular app.
NOTE: We are using webpack 4. Plugin code would look slightly different for webpack 3.
Let's run ng build and see if our changes worked!
Let's run ng build and see if our changes worked!
And you can see our message getting printed in the console.
