This is the 20th day of my participation in the August Text Challenge.More challenges in August

Plug-in plugin

Plug-ins are another core feature of WebPack besides the Loader. Through the observation of Webpack source code, we found that Webpack itself is also built on various plug-ins.

The purpose of a plug-in is to do something that loader cannot do as described in the previous article. Through the introduction of the previous article, we know that loader is mainly used to parse and preprocess all kinds of files. But if this alone is not enough for our daily development, this is what the plug-in complements.

How to use plug-ins

If we need to use Webpack plug-in in daily development, we need to configure it in webpack.config.js, for example:

const HtmlWebpackPlugin = require('html-webpack-plugin'); 
const path = require('path');

module.exports = {
  entry: './path/to/my/entry/file.js'.output: {
    filename: 'my-first-webpack.bundle.js'.path: path.resolve(__dirname, 'dist'),},module: {
    rules: [{test: /.(js|jsx)$/,
        use: 'babel-loader',}]},plugins: [
    new HtmlWebpackPlugin({ template: './src/index.html'})]};Copy the code

In the example above, we first load the plugin installed via NPM via require. Then we pass in plugins in module.exports to create an instance of the plugin and load it. The example here is a plug-in that parses HTML. The plug-in needs to pass in a parameter that is the relative path of the HTML to be processed, and then the plug-in parses and builds the HTML internally. The plugin will generate an HTML5 file for you, importing all of your WebPack-generated bundles using the Script tag in the body. The HtmlWebpackPlugin simplifies the creation of HTML files to serve your Webpack. This is especially useful for Webpack packages that have hash values in their file names and that change with each compilation.

How is a plug-in developed

Plugins are objects that can be instantiated using their own stereotype method Apply. Apply is executed by the Webpack Compiler only once when the plug-in is installed. The Apply method passes a reference to the WebPCK Compiler to access the compiler callback. A simple plug-in code structure looks like this:

class Plugin {
  constructor(options) {}
  apply(compiler) {
    / /...}}module.exports = Plugin
Copy the code

Here is an example of the code of HtmlWebpackPlugin:

apply(compiler){
    compiler.hooks.make.tapAsync(
         / /...)}Copy the code

The compiller.hooks. Make () function here, which is an asynchronous concurrent AsyncParallelBailHook function that executes before compilation is complete, There are many hook functions in Compiler that operate at different stages of the compile process of Webpack, thus extending the functions of our Webpack.

The execution of the plug-in

The Compiler module is the core engine of WebPack. It creates a Compilation instance through all the options passed through the CLI or Node API. It extends from the Tapable class so that we can register and invoke plug-ins. Most user-facing plug-ins are first registered with Compiler.

Listening to the

Compiler supports watching mechanisms that monitor the file system and recompile when the file is modified. When in Watch mode, the Compiler fires additional events such as watchRun, watchClose, and invalid. It is commonly used in development environments and is often called underneath tools such as Webpack-dev-server so that developers don’t have to manually recompile each time. You can also use the CLI to enter the listening mode.

Implementation process
  1. inWebpackThe process to start reading the plug-in configuration is executed firstnew xxxPlugin(options)Initialize onexxxxPluginPlug-in to get an example.
  2. In the initializationcompilerObject after callxxxxPlugin.apply(compiler)Pass in the plug-in instancecompilerObject.
  3. The plug-in instance is being retrievedcompilerAfter the object can be passedCompiler.plugin (event name, callback function)Listen to theWebpackAn event broadcast. Then perform different operations according to different events. And can be accessed throughcompilerObject to operateWebpack.

Several plug-ins are highly recommended to learn the source code

  • html-webpack-plugin
  • stylelint-webpack-plugin
  • HotModuleReplacementPlugin
  • webpack-hot-middleware