面试题：Webpack自定义加载器的复用方式

通过npm发布为独立包复用
- 原理：将自定义的Webpack加载器代码按照npm包的规范进行整理，发布到npm仓库。其他项目通过npm install安装该包后，在Webpack配置中即可像使用其他官方加载器一样使用它。这样做可以实现代码的共享和复用，不同项目只要依赖该npm包就能使用自定义加载器，避免重复开发。
在项目内部通过配置复用
- 原理：在Webpack配置文件（如webpack.config.js）中，将自定义加载器配置在module.rules数组里。对于多个不同的文件匹配规则，如果都需要使用该自定义加载器，可以在各自的rules对象中引用相同的加载器配置。这样在同一个项目内不同模块处理场景下复用了该加载器。例如：

module.exports = {
    module: {
        rules: [
            {
                test: /\.js$/,
                use: [
                    {
                        loader: './path/to/custom-loader.js'
                    }
                ]
            },
            {
                test: /\.ts$/,
                use: [
                    {
                        loader: './path/to/custom-loader.js'
                    }
                ]
            }
        ]
    }
};

使用loader-utils和schema-utils辅助复用
- 原理：loader-utils提供了一些实用函数，如获取加载器选项等功能，使得自定义加载器编写更具通用性。schema-utils用于验证加载器选项的模式，确保加载器在不同使用场景下选项的正确性和一致性。通过使用这两个工具，编写出来的加载器更健壮且可复用，因为它可以更好地适应不同的配置选项，同时保证选项的合法性。例如，在自定义加载器中使用loader-utils获取选项：

const loaderUtils = require('loader-utils');

module.exports = function (source) {
    const options = loaderUtils.getOptions(this);
    // 使用options进行相应处理
    return source;
};

星途面试题库

面试题：Webpack自定义加载器的复用方式

知识考点

面试题答案