“This is the ninth day of my participation in the First Challenge 2022. For details: First Challenge 2022”

introduce

I believe that we often use plug-in and Loader when writing Webpack. They have many similarities, for example, they can handle different types of files, but there are also many differences. Compared with Loader, Webpack plug-in does not have an independent running environment like Loader. Because webPack plug-ins can only run in WebPack. But plug-ins are designed to do things that Loader cannot do, from package optimization and compression, to redefining environment variables, to beautifying the monitoring of the packaging process, and are powerful enough to handle a wide variety of tasks.

The task of this issue is to introduce you to the webpack plug-in, and develop a simple plug-in demo, what are we waiting for, we will set out ~

The development of

// my-plugin.js
class MyPlugin{     // Plug-in name
    constructor(options){
        this.options = options;    
    }
    apply(compiler){  / / the apply method
        console.log("This is My Plugin!");
    	compiler.hooks.done.tap("My Plugin".stats= > {   / / to monitor hooks
            console.log("My author is "+this.options.name) // Process logic}}})module.exports = MyPlugin;
Copy the code

The infrastructure is pretty simple, constuctor does something with Apply, and apply is required, and it passes a Compiler object, and the code above is listening for the hooks of the plug-in to write to the logic that prints out some strings, Let’s say we pass a name and see if it prints out on the console.

Next, we can try it in webpack.config.js once we’re done.

// webpack.config.js
const MyPlugin = require('./webpack-plugin/my-plugin.js');
const plugins=[
    / /... more plugin
    new MyPlugin({
        name:"Mask"})]module.exports = {
  // ...
  plugins
}
Copy the code

So once we’ve done that, we can go build and see what happens.

# NPM
npm run build
# YARN
yarn build
Copy the code

This is My Plugin! “, and then output My author is Mask while waiting for hooks to complete, so we have a small plug-in case done.

Pay attention to

We need to follow the CommonJS specification when developing plug-ins, so we can’t import other libraries using es6 import methods (i.e., import from), we need to use require.

The following code modification:

var chalk = require('chalk');

class MyPlugin{
    constructor(options){
        this.options = options;    
    }
    apply(compiler){
        console.log(chalk.green("This is My Plugin!"));
    	compiler.hooks.done.tap("MyPlugin".stats= > {
            console.log(chalk.italic("My author is ")+ chalk.yellow.bold.italic(this.options.name)+"\n")}}}module.exports = MyPlugin;
Copy the code

We introduced a Chalk library, which can change the style or color of the console output text. Here we used the Chalk 3.0.0 version, which can be introduced directly with require.

conclusion

After watching this demo, do you feel it is not so difficult to write a plug-in? Because with compiler, we can monitor Webpack anywhere and then do what we want, but the premise is to have a relative understanding of the cycle of Webpack. At present, we still have a small understanding of this part. Later, I will share with you some advanced operations and cases for developing Webpack.