html-webpack-plugin插件,webpack笔记——在html-webpack-plugin插件中提供给其它插件是使用的hooks...

最近在这段时间刚好在温故下webpack源码，webpack5都出来了，4还不再学习下？

这次顺便学习下webpack的常用插件html-webpack-plugin。

发现这个插件里面还额外加入了自己的hooks，方便其它插件来实现自己的功能，不得不说作者真是个好人。

部分代码如下

// node_modules/html-webpack-plugin/index.js

app(compiler) {

// setup hooks for webpack 4

if (compiler.hooks) {

compiler.hooks.compilation.tap('HtmlWebpackPluginHooks', compilation => {

const SyncWaterfallHook = require('tapable').SyncWaterfallHook;

const AsyncSeriesWaterfallHook = require('tapable').AsyncSeriesWaterfallHook;

compilation.hooks.htmlWebpackPluginAlterChunks = new SyncWaterfallHook(['chunks', 'objectWithPluginRef']);

compilation.hooks.htmlWebpackPluginBeforeHtmlGeneration = new AsyncSeriesWaterfallHook(['pluginArgs']);

compilation.hooks.htmlWebpackPluginBeforeHtmlProcessing = new AsyncSeriesWaterfallHook(['pluginArgs']);

compilation.hooks.htmlWebpackPluginAlterAssetTags = new AsyncSeriesWaterfallHook(['pluginArgs']);

compilation.hooks.htmlWebpackPluginAfterHtmlProcessing = new AsyncSeriesWaterfallHook(['pluginArgs']);

compilation.hooks.htmlWebpackPluginAfterEmit = new AsyncSeriesWaterfallHook(['pluginArgs']);

});

}

...

// Backwards compatible version of: compiler.plugin.emit.tapAsync()

(compiler.hooks ? compiler.hooks.emit.tapAsync.bind(compiler.hooks.emit, 'HtmlWebpackPlugin') : compiler.plugin.bind(compiler, 'emit'))((compilation, callback) => {

const applyPluginsAsyncWaterfall = self.applyPluginsAsyncWaterfall(compilation);

// Get chunks info as json

// Note: we're excluding stuff that we don't need to improve toJson serialization speed.

const chunkOnlyConfig = {

assets: false,

cached: false,

children: false,

chunks: true,

chunkModules: false,

chunkOrigins: false,

errorDetails: false,

hash: false,

modules: false,

reasons: false,

source: false,

timings: false,

version: false

};

const allChunks = compilation.getStats().toJson(chunkOnlyConfig).chunks;

// Filter chunks (options.chunks and options.excludeCHunks)

let chunks = self.filterChunks(allChunks, self.options.chunks, self.options.excludeChunks);

// Sort chunks

chunks = self.sortChunks(chunks, self.options.chunksSortMode, compilation);

// Let plugins alter the chunks and the chunk sorting

if (compilation.hooks) {

chunks = compilation.hooks.htmlWebpackPluginAlterChunks.call(chunks, { plugin: self });

} else {

// Before Webpack 4

chunks = compilation.applyPluginsWaterfall('html-webpack-plugin-alter-chunks', chunks, { plugin: self });

}

// Get assets

const assets = self.htmlWebpackPluginAssets(compilation, chunks);

// If this is a hot update compilation, move on!

// This solves a problem where anindex.html file is generated for hot-update js files

// It only happens in Webpack 2, where hot updates are emitted separately before the full bundle

if (self.isHotUpdateCompilation(assets)) {

return callback();

}

// If the template and the assets did not change we don't have to emit the html

const assetJson = JSON.stringify(self.getAssetFiles(assets));

if (isCompilationCached && self.options.cache && assetJson === self.assetJson) {

return callback();

} else {

self.assetJson = assetJson;

}

Promise.resolve()

// Favicon

.then(() => {

if (self.options.favicon) {

return self.addFileToAsset