面试题：Webpack自定义插件如何与多模块构建系统协同工作

插件初始化：

在Webpack插件的apply方法中开始插件逻辑。
定义一些变量用于存储不同模块的配置和处理逻辑。

class CustomWebpackPlugin {
    constructor(options) {
        // 插件选项初始化
        this.options = options;
    }
    apply(compiler) {
        // 后续逻辑写在这里
    }
}
module.exports = CustomWebpackPlugin;

识别不同模块：

通过模块路径：Webpack在构建过程中，模块都有其对应的绝对路径。可以通过分析路径来识别不同模块。例如，如果不同模块在不同目录下，如src/modules/module1和src/modules/module2，可以使用正则表达式匹配路径。

apply(compiler) {
    compiler.hooks.normalModuleFactory.tap('CustomWebpackPlugin', (nmf) => {
        nmf.hooks.afterResolve.tap('CustomWebpackPlugin', (result) => {
            if (result.resource.includes('src/modules/module1')) {
                // 处理module1相关逻辑
            } else if (result.resource.includes('src/modules/module2')) {
                // 处理module2相关逻辑
            }
            return result;
        });
    });
}

通过模块标识：某些情况下，模块可能带有自定义标识。可以在引入模块时添加自定义的meta信息，Webpack在处理模块时可以获取到这些信息。例如，在import语句中使用__webpack_public_path__类似的技巧，自定义一个标识。

import('./module1', { __custom_identifier__: 'type1' });

然后在插件中通过parser钩子获取该标识。

apply(compiler) {
    compiler.hooks.normalModuleFactory.tap('CustomWebpackPlugin', (nmf) => {
        nmf.hooks.parser.tap('CustomWebpackPlugin', (parser) => {
            parser.hooks.import.tap('CustomWebpackPlugin', (source, range) => {
                const customIdentifier = parser.scope.inlineMeta.get('__custom_identifier__');
                if (customIdentifier === 'type1') {
                    // 处理标识为type1的模块逻辑
                }
                return source;
            });
        });
    });
}

模块依赖分析：

利用ModuleDependency相关钩子：Webpack有多种依赖类型，如CommonJsDependency、ES6ImportDependency等。可以通过compilation的dependency相关钩子分析模块依赖。

apply(compiler) {
    compiler.hooks.compilation.tap('CustomWebpackPlugin', (compilation) => {
        compilation.hooks.buildModule.tap('CustomWebpackPlugin', (module) => {
            module.dependencies.forEach((dependency) => {
                if (dependency instanceof compilation.dependencyTemplates.CommonJsDependency) {
                    // 处理CommonJS依赖逻辑
                } else if (dependency instanceof compilation.dependencyTemplates.ES6ImportDependency) {
                    // 处理ES6导入依赖逻辑
                }
            });
        });
    });
}

构建依赖图谱：可以维护一个对象来记录模块及其依赖关系，便于后续分析。

const moduleDependencyGraph = {};
apply(compiler) {
    compiler.hooks.compilation.tap('CustomWebpackPlugin', (compilation) => {
        compilation.hooks.buildModule.tap('CustomWebpackPlugin', (module) => {
            moduleDependencyGraph[module.resource] = [];
            module.dependencies.forEach((dependency) => {
                moduleDependencyGraph[module.resource].push(dependency.module.resource);
            });
        });
    });
}

资源合并策略：

针对不同模块分别处理：在识别模块后，根据模块特点制定合并策略。例如，对于UI相关模块，可能希望合并CSS和图片资源；对于逻辑模块，可能只需要合并JavaScript代码。

apply(compiler) {
    compiler.hooks.emit.tapAsync('CustomWebpackPlugin', (compilation, callback) => {
        const assets = compilation.assets;
        Object.keys(assets).forEach((assetName) => {
            if (assetName.includes('ui - module')) {
                // 处理UI模块资源合并逻辑，如合并CSS和图片
                // 可以使用一些第三方库如css - extract - webpack - plugin辅助处理
            } else if (assetName.includes('logic - module')) {
                // 处理逻辑模块资源合并逻辑，主要是合并JavaScript
                // 可以使用terser - webpack - plugin进行压缩合并
            }
        });
        callback();
    });
}

根据依赖关系合并：结合之前分析的依赖关系，按照依赖顺序合并资源。例如，如果模块A依赖模块B和模块C，可以先合并B和C，再与A合并。

apply(compiler) {
    compiler.hooks.emit.tapAsync('CustomWebpackPlugin', (compilation, callback) => {
        const assets = compilation.assets;
        Object.keys(moduleDependencyGraph).forEach((modulePath) => {
            const dependencies = moduleDependencyGraph[modulePath];
            // 这里可以根据依赖顺序合并资源
        });
        callback();
    });
}

星途面试题库

面试题：Webpack自定义插件如何与多模块构建系统协同工作

知识考点

面试题答案