Webpack插件散记 - 1 - 起源地下载网

想学习一下写webpack插件，起步就遇到障碍。

从网上找了一个demo，是通过二次调用html-webpack-plugin来对index.html进行自定义修改。但运行时遇到报错。关键信息：

[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'.
...

搜索了一下，资料不多，大致找到原因是webpack4对Tapable对象重写造成hook找不到引发的。

没有深究，毕竟不想去改webpack的源代码。继续搜索时，发现有人提到一个替代插件：webpack-contrib/html-webpack-plugin。

网上也有人说了安装会失败，我也是。

在npm上搜了一下webpack-contrib/html-webpack-plugin，发现原来包名其实应当是html-webpack-plugin-from-webpack-contrib：

npm i html-webpack-plugin-from-webpack-contrib -D

对html-webpack-plugin的引用更改为：

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

完整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(),
    ]
}

完整插件代码

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

编译结果符合预期

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

以上

常见问题FAQ

免费下载或者VIP会员专享资源能否直接商用？: 本站所有资源版权均属于原作者所有，这里所提供资源均只能用于参考学习用，请勿直接商用。若由于商用引起版权纠纷，一切责任均由使用者承担。更多说明请参考 VIP介绍。

提示下载完但解压或打开不了？: 最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量，若小于网盘提示的容量则是这个原因。这是浏览器下载的bug，建议用百度网盘软件或迅雷下载。若排除这种情况，可在对应资源底部留言，或联络我们.。

找不到素材资源介绍文章里的示例图片？: 对于PPT，KEY，Mockups，APP，网页模版等类型的素材，文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买，且本站不负责(也没有办法)找到出处。同样地一些字体文件也是这种情况，但部分素材会在素材包内有一份字体下载链接清单。