面试题：Webpack自定义插件应用：处理特定文件类型

Question

假设项目中有一些自定义后缀名为.xyz的文件，你需要编写一个Webpack插件，在构建过程中对这些文件进行特殊处理（例如将文件内容中的所有小写字母转为大写），请描述实现思路并给出关键代码片段。

Answer 1

实现思路

1. 创建Webpack插件类：定义一个JavaScript类，该类的构造函数接收插件的配置参数（如果有的话）。
2. 绑定Webpack钩子：在类的apply方法中，绑定到Webpack的compilation钩子，因为compilation阶段会处理模块和依赖。
3. 处理.xyz文件：在compilation钩子的回调函数中，遍历所有模块，找到后缀名为.xyz的文件。
4. 转换文件内容：读取这些文件的内容，将其中所有小写字母转为大写，然后替换原来的内容。

关键代码片段

class XyzPlugin {
    constructor(options) {
        // 可以在这里处理插件的配置选项
        this.options = options;
    }
    apply(compiler) {
        compiler.hooks.compilation.tap('XyzPlugin', (compilation) => {
            compilation.hooks.processAssets.tap({
                name: 'XyzPlugin',
                stage: compilation.PROCESS_ASSETS_STAGE_PRE_PROCESS
            }, (assets) => {
                for (const name in assets) {
                    if (name.endsWith('.xyz')) {
                        const source = assets[name].source();
                        const upperCaseContent = source.toString().toUpperCase();
                        assets[name] = {
                            source: () => upperCaseContent,
                            size: () => upperCaseContent.length
                        };
                    }
                }
            });
        });
    }
}

module.exports = XyzPlugin;

在Webpack配置文件（webpack.config.js）中使用该插件：

const XyzPlugin = require('./XyzPlugin');

module.exports = {
    // 其他Webpack配置...
    plugins: [
        new XyzPlugin()
    ]
};