webpack plugin源码解析(四) HashedModuleIdsPlugin

这篇具有很好参考价值的文章主要介绍了webpack plugin源码解析(四) HashedModuleIdsPlugin。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

作用

  • 将模块打包生成后的 id 变成 hash 值,用于生成稳定的模块 id
new webpack.ids.HashedModuleIdsPlugin(),

webpack plugin源码解析(四) HashedModuleIdsPlugin文章来源地址https://www.toymoban.com/news/detail-416889.html

涉及 webpack API

  • 获取chunkGraph

const chunkGraph = compilation.chunkGraph;
  • 获取当前编译过程中被使用过的 module id:compilation.usedModuleIds

compilation.usedModuleIds;  //其中一些模块可能会被排除在最终的构建结果之外,因为它们没有被使用过
  • 获取当前编译过程中所有的模块对象:compilation.modules

    • 包括那些被使用过的模块和那些没有被使用过的模块。
for (const module of compilation.modules) {
	// ...
}
  • 判断 module 是否需要生成 id:module.needId

    • 表示该模块是否需要一个模块 id, 在 webpack 的编译过程中,有些模块可能不需要一个独立的模块 id,例如一些内置模块或者一些被动态加载的模块
for (const module of compilation.modules) {
	if (!module.needId) continue;
	const moduleId = chunkGraph.getModuleId(module);
}
  • 获取指定module 的 module id:chunkGraph.getModuleId

for (const module of compilation.modules) {
	if (!module.needId) continue;
	const moduleId = chunkGraph.getModuleId(module);
}
  • 获取 module 属于多少个chunk:chunkGraph.getNumberOfModuleChunks

// chunkGraph.getNumberOfModuleChunks 表示 module 属于多少个chunk ,为 0 表示模块对象不属于任何一个 chunk
if (chunkGraph.getNumberOfModuleChunks(module) !== 0){
 // ...
}
  • 获取 module 标识符:module.identifier

    • 根据 module 的 type、request、layer创建
for (const module of compilation.modules) {
	module.identifier()
}

// module.identifier
identifier() {
	if (this.layer === null) {
		if (this.type === "javascript/auto") {
			return this.request; // "/xxx/Desktop/webpack/wb/node_modules/babel-loader/lib/index.js??ruleSet[1].rules[1].use[0]!/xxx/Desktop/webpack/wb/src/o1.js"
		} else {
			return `${this.type}|${this.request}`;
		}
	} else {
		return `${this.type}|${this.request}|${this.layer}`;
	}
}
  • 设置 module id:chunkGraph.setModuleId

for (const module of compilation.modules) {
	const moduleId= 'xxx'
	chunkGraph.setModuleId(module, moduleId);
}

实现

constructor

class HashedModuleIdsPlugin {
	/**
	 * @param {HashedModuleIdsPluginOptions=} options options object
	 */
	constructor(options = {}) {
		validate(options);

		/** @type {HashedModuleIdsPluginOptions} */
		this.options = {
			context: null,
			hashFunction: "md4",
			hashDigest: "base64",
			hashDigestLength: 4,
			...options
		};
	}
}

apply

apply(compiler) {
	const options = this.options;
	compiler.hooks.compilation.tap("HashedModuleIdsPlugin", compilation => {
		// hooks.moduleIds 为每个模块分配 id 时触发
		compilation.hooks.moduleIds.tap("HashedModuleIdsPlugin", () => {
			const chunkGraph = compilation.chunkGraph;
			const context = this.options.context // "/xxx/Desktop/webpack/wb"
				? this.options.context
				: compiler.context;
			// 获取所有效的 modules 和已经编译使用过的 module id
			const [usedIds, modules] = getUsedModuleIdsAndModules(compilation);
			// 对 modules 排序
			const modulesInNaturalOrder = modules.sort(
				compareModulesByPreOrderIndexOrIdentifier(compilation.moduleGraph)
			);
			for (const module of modulesInNaturalOrder) {
				// 获取 module 标识,用来创建 hash
				const ident = getFullModuleName(module, context, compiler.root); // "./node_modules/babel-loader/lib/index.js??ruleSet[1].rules[1].use[0]!./src/o1.js"
				
				const hash = createHash(options.hashFunction);
				hash.update(ident || "");
				const hashId = /** @type {string} */ (
					hash.digest(options.hashDigest)
				);
				
				let len = options.hashDigestLength;
				// 默认取 hash 前四位,如果有重复往后取
				while (usedIds.has(hashId.slice(0, len))) len++;
				const moduleId = hashId.slice(0, len);
				// 更改 module id
				chunkGraph.setModuleId(module, moduleId);
				// 添加新 module id
				usedIds.add(moduleId);
			}
		});
	});
}

getUsedModuleIdsAndModules

  • 获取所有效的 modules 和已经编译使用过的 module id
  • 只有需要生成 module id 的 module 且之前没有创建过且 module 在某个 chunk 中才有效
const getUsedModuleIdsAndModules = (compilation, filter) => {

	const chunkGraph = compilation.chunkGraph;

	const modules = [];

	const usedIds = new Set();
	// 用于存储在当前编译过程中被使用过的 module id。
	if (compilation.usedModuleIds) {
		for (const id of compilation.usedModuleIds) {
			usedIds.add(id + "");
		}
	}
	// compilation.modules: 存储在当前编译过程中所有的模块对象,包括那些被使用过的模块和那些没有被使用过的模块。
	for (const module of compilation.modules) {
		// module.needId 表示该模块是否需要一个模块 id, 在 webpack 的编译过程中,有些模块可能不需要一个独立的模块 id,例如一些内置模块或者一些被动态加载的模块
		if (!module.needId) continue;
		// 获取 module id 
		const moduleId = chunkGraph.getModuleId(module);
		
		if (moduleId !== null) {
			// 如果已有则跳过
			usedIds.add(moduleId + "");
		} else {
			// chunkGraph.getNumberOfModuleChunks 表示 module 属于多少个chunk ,为 0 表示模块对象不属于任何一个 chunk
			if (
				(!filter || filter(module)) &&
				chunkGraph.getNumberOfModuleChunks(module) !== 0
			) {
				// 将该 module 放入 modules 用于后续计算 module id hash 值
				modules.push(module);
			}
		}
	}

	return [usedIds, modules];
};

到了这里,关于webpack plugin源码解析(四) HashedModuleIdsPlugin的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • webpack打包之 copy-webpack-plugin

    copy-webpack-plugin 打包复制文件插件。 1、什么时候要使用? 在离线应用中,前端所有文件都需在在本地,有些文件(比如iconFont以及一些静态img)需要转为离线文件,这些文件可以直接引用更方便些,这就需要在打包时直接复制到打包文件下。 2、安装依赖 3、配置webpack 4、打包

    2024年02月17日
    浏览(42)
  • 手写一个webpack插件(plugin)

    熟悉 vue 和 react 的小伙伴们都知道,在执行过程中会有各种生命周期钩子,其实webpack也不例外,在使用webpack的时候,我们有时候需要在 webpack 构建流程中引入自定义的行为,这个时候就可以在 hooks 钩子中添加自己的方法。 创建插件 webpack 加载 webpack.config.js 中所有配置,此

    2024年02月08日
    浏览(47)
  • 04-webpack中使用plugin

    loader是用于特定的模块的类型转换,plugin用于执行更加广泛的任务,比如打包优化、资源管理、环境变量注入等。 CleanWebpackPlugin 用于清除之前打包的文件。npm install clean-webpack-plugin DefinePlugin DefinePlugin允许在编译时创建配置的全局常量,是一个webpack内置的插件(不需要单独安

    2024年02月09日
    浏览(44)
  • 手写Webpack-Plugin

    通过插件我们可以扩展webpack,使webpack可以执行更广泛的任务,拥有更强的构建能力。 webpack 就像一条生产线,要经过一系列处理流程后才能将源文件转换成输出结果。 这条生产线上的每个处理流程的职责都是单一的,多个流程之间有存在依赖关系,只有完成当前处理后才能

    2024年01月21日
    浏览(34)
  • Webpack的Loader和Plugin

    1.1 Loader作用 把js和json外的其它文件转为Webpack可以识别的模块 1.2 Loader简介 1.2.1 Loader类型 1.总类型 pre: 前置loader normal: 普通loader inline: 内联loader post: 后置loader 2.默认类型 默认为normal类型 3.修改类型 配置时可以通过enforce修改 pre,normal,post 类型。 1.2.2 Loader顺序 1.总顺序

    2024年04月18日
    浏览(43)
  • webpack中plugin的工作原理

    一、plugin的作用 Webpack中的插件是用来扩展Webpack功能的函数,加入自定义的构建行为,使 webpack 可以执行更广泛的任务,拥有更强的构建能力,它们在Webpack构建过程中被执行 。Webpack所有的插件都需要在webpack.config.js的plugins节点中配置。 插件的作用很多,以下是插件常见的

    2024年02月10日
    浏览(36)
  • eslint-webpack-plugin

    说明:现在eslint已经弃用了eslint-loader,如果要安装来使用的话,会报错,烦死人 大概的报错信息如下: ERROR in ./src/index.js Module build failed (from ./node_modules/eslint-loader/dist/cjs.js): TypeError: Cannot read property ‘getFormatter’ of undefined 那么我们现在一般使用eslint提供的eslint-webpack-plugin插

    2024年02月15日
    浏览(49)
  • vue中webpack配置compression-webpack-plugin打包压缩和优化,terser-webpack-plugin在构建过程中对 JavaScript 代码进行压缩和优化

    参考地址:https://v4.webpack.js.org/plugins/compression-webpack-plugin/ 一、compression-webpack-plugin的使用,安装插件 二、在 webpack 配置中,require 或 import 引入 三、配置 参考地址:https://v4.webpack.js.org/plugins/terser-webpack-plugin/ 一、安装terser-webpack-plugin 二、在 Webpack 配置中引入 三、配置

    2024年04月14日
    浏览(55)
  • webpack loader和plugins的区别

    在Webpack中,Loader和Plugin是两个不同的概念,用于不同的目的。 Loader是用于处理非JavaScript模块的文件的转换工具。它们将文件作为输入,并将其转换为Webpack可以处理的模块。例如,当您在Webpack配置中使用Babel Loader时,它会将ES6+的JavaScript代码转换为ES5代码,以便在旧版浏览器

    2024年02月09日
    浏览(42)
  • webpack 中的loader 和plugin的区别

    Loader: 作用: Loader 用于在模块加载时对文件进行转换。它是一个转换器,将文件从一种形式转换为另一种形式,例如,将 ES6 语法的 JavaScript 文件转换为能够在浏览器中运行的普通 JavaScript。 使用场景: Loader通常被配置在 module.rules 中,指定了哪些文件应该被哪些Loader处理。

    2024年01月22日
    浏览(37)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包