webpack源码解析二（html-webpack-plugin插件）_cannot add property htmlwebpackpluginalterchunks, -CSDN博客

本文链接：https://blog.csdn.net/vv_bug/article/details/103571985

本文深入解析html-webpack-plugin的源码，通过分析lib/Compilation.js、html-webpack-plugin/lib/compiler.js等文件，了解如何配置webpack.config.js以使用该插件。在webpack5.0.0-beta.9版本下，遇到不兼容问题，通过修改源码解决。文章详细阐述了html-loader的作用，以及插件在webpack编译过程中的make、emit钩子函数的执行流程，展示了如何动态生成并添加资源到index.html。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我们接着上一节从源码研究一下html-webpack-plugin插件，感兴趣的童鞋可以看一下我上一篇文章 webpack源码解析一
文章开始先上一下源码：html-webpack-plugin源码地址，不废话，我们开车咯～～

首先安装：

yarn add html-webpack-plugin

配置webpack.config.js：

	plugins: [
		new HtmlPlugin({
			title: 'webpack demo',
			template: './index.html'
		})
	],

因为我是直接在webpack的源码工程项目，所以我就直接执行打包脚本了
执行打包命令()：

./bin/webpack.js

我们可以看到报错了：

TypeError: Cannot add property htmlWebpackPluginAlterChunks, object is not extensible
    at compiler.hooks.compilation.tap.compilation (/Users/yinqingyang/ThirdProject/webpack/webpack/node_modules/html-webpack-plugin/index.js:59:56)

想必小伙伴都认识这个错误，当某个对象用了Object.freeze方法后，我们再对这个对象做扩展的时候就会报这个错误
本次demo我们用的webpack的源码版本号是：5.0.0-beta.9，html-webpack-plugin的版本号是：3.2.0
所以html-webpack-plugin还不是完全兼容webpack5.0.0-beta.9，为了测试，我们修改一下webpack的源码：

lib/Compilation.js

class Compilation {
	/**
	 * Creates an instance of Compilation.
	 * @param {Compiler} compiler the compiler which created the compilation
	 */
	constructor(compiler) {
		const getNormalModuleLoader = () => deprecatedNormalModuleLoaderHook(this);
		this.hooks = {
		}

我们直接去掉了对this.hooks的Object.freeze操作

我们继续执行打包脚本：

./bin/webpack.js

又报错了（哈哈，看来html-webpack-plugin想要兼容webpack5.0还需要改一波代码呀，我们做个好心人帮它改改把）：

TypeError: this.cache.get is not a function
    at asyncLib.forEach (/Users/yinqingyang/ThirdProject/webpack/webpack/lib/Compilation.js:2337:18)
    at arrayEach (/Users/yinqingyang/ThirdProject/webpack/webpack/node_modules/neo-async/async.js:2405:9)

html-webpack-plugin/lib/compiler.js:

在这里插入图片描述
可以看到，我们注释掉了一段代码～

我们再次运行打包脚本：

./bin/webpack.js

在这里插入图片描述

可以看到，我们打包过程已经ok了，也自动生成了index.html文件

下面我们正式走一遍html-webpack-plugin的源码，在分析源码之前我们先理一下我们的思路，通过上一节 webpack源码解析一我们知道，想要解析目标文件得有对应的loader加载器，比如webpack内置的js、json加载器（上一节有介绍，我就不重复介绍了），同样！想要加载我们的html文件的话也要有对应的htmlloader才行，然后加载完html文件后，我们肯定得对加载的文件做处理，比如我们写在index.html中的<%=htmlWebpackPlugin.options.title%>跟<%=htmlWebpackPlugin.options.author%>:

  <meta charset="UTF-8">
		<title><%=htmlWebpackPlugin.options.title%></title>
    <meta name="author" content="<%=htmlWebpackPlugin.options.author%>">

然后当我们配置在webpack.config.js的时候：