Trying to learn how to write a Webpack plug-in, it got off to a rocky start.

I found a demo from the Internet, which is a custom modification of index. HTML by calling html-webpack-plugin twice. However, an error was reported at runtime. Key information:

[webpack-cli] Error: Plugin could not be registered at 'html-webpack-plugin-before-html-processing'. Hook was not found.
BREAKING CHANGE: There need to exist a hook at 'this.hooks'. To create a compatibility layer for this hook, hook into 'this._pluginCompat'.Copy the code

The reason is that webpack4 rewrites the Tapable object and the hook cannot be found.

I don’t want to change the webpack source code. Searching further, someone mentioned an alternative plugin: webpack-contrib/html-webpack-plugin.

Someone on the Internet said the installation would fail, so did I.

Webpack-contrib /html-webpack-plugin/webpack-plugin/webpack-plugin/webpack-plugin/webpack-plugin/webpack-plugin

npm i html-webpack-plugin-from-webpack-contrib -D
Copy the code

The reference to the HTML-webpack-plugin is changed to:

const HtmlWebpackPlugin = require('html-webpack-plugin-from-webpack-contrib')
Copy the code

Full webpack. Config

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin-from-webpack-contrib')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const MyFirstPlugin = require('.. /plugin/my-first-plugin')

module.exports = {
    // mode: 'production',
    mode: 'development'.entry: './src/plugin/index.js'.output: {
        path: path.resolve(__dirname, '.. /dist/plugin'),
        filename: 'index.js'
    },
    plugins: [
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            template: './src/plugin/index.html'.filename: './index.html'.inject: 'body'
        }),
        new MyFirstPlugin(),
    ]
}
Copy the code

Complete plug-in code

class MyFirstPlugin {
    apply(compiler) {
        compiler.hooks.compilation.tap('MyFirstPlugin'.compilation= > {
            compilation.plugin('html-webpack-plugin-before-html-processing'.htmlPluginData= > {
                htmlPluginData.html += '<div id="hidden-holder"></div>'}}})})module.exports = MyFirstPlugin
Copy the code

The compilation result is as expected

<! DOCTYPEhtml>
<html>
<head></head>
<body>
<div id="app"></div>
<script type="text/javascript" src="index.js"></script></body>
</html><div id="hidden-holder"></div>
Copy the code

The above