webpack plugin源码解析(四) HashedModuleIdsPlugin

作用

• 将模块打包生成后的 id 变成 hash 值，用于生成稳定的模块 id

new webpack.ids.HashedModuleIdsPlugin(),

涉及 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 idconst [usedIds, modules] = getUsedModuleIdsAndModules(compilation);// 对 modules 排序const modulesInNaturalOrder = modules.sort(compareModulesByPreOrderIndexOrIdentifier(compilation.moduleGraph));for (const module of modulesInNaturalOrder) {// 获取 module 标识，用来创建 hashconst 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 idchunkGraph.setModuleId(module, moduleId);// 添加新 module idusedIds.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 表示模块对象不属于任何一个 chunkif ((!filter || filter(module)) &&chunkGraph.getNumberOfModuleChunks(module) !== 0) {// 将该 module 放入 modules 用于后续计算 module id hash 值modules.push(module);}}}return [usedIds, modules];
};