面试题：Webpack自定义加载器优化复杂组件库构建的应用场景

1. 对 SVG 文件进行压缩并生成 React 组件

实现方案

安装依赖：使用 svgo 进行 SVG 文件压缩，@svgr/webpack 将 SVG 文件转为 React 组件。

npm install svgo @svgr/webpack -D

创建自定义 loader：虽然 @svgr/webpack 已经能满足大部分需求，但如果想进一步自定义压缩逻辑，可以创建自定义 svgo 相关的 loader。例如：

// svgo-loader.js
const { optimize } = require('svgo');

module.exports = function (source) {
    const { data } = optimize(source, {
        // 这里可以配置 svgo 的各种选项，如移除注释等
        plugins: [
            { removeViewBox: false },
            { cleanupIDs: true }
        ]
    });
    return data;
};

Webpack 配置：在 webpack.config.js 中配置：

module.exports = {
    module: {
        rules: [
            {
                test: /\.svg$/,
                use: [
                    {
                        loader: '@svgr/webpack',
                        options: {
                            // 可以配置 @svgr 的选项，如尺寸等
                            icon: true
                        }
                    },
                    // 如果自定义了 svgo-loader，放在这里
                    // { loader:'svgo-loader' }
                ]
            }
        ]
    }
};

2. 对自定义模板文件进行预处理

实现方案

假设自定义模板文件后缀为.tmpl：
安装相关依赖：如果预处理涉及语法转换等，可能需要安装对应的工具。例如，如果是类似 EJS 模板语法，安装 ejs-loader。

npm install ejs-loader -D

创建自定义 loader（如果 ejs-loader 不能满足需求）：假设需要添加一些自定义变量替换逻辑：

// custom-tmpl-loader.js
const { parse } = require('path');

module.exports = function (source) {
    // 这里添加自定义的预处理逻辑，比如替换特定字符串
    const newSource = source.replace('{{APP_NAME}}', 'MyApp');
    return newSource;
};

Webpack 配置：

module.exports = {
    module: {
        rules: [
            {
                test: /\.tmpl$/,
                use: [
                    // 如果使用 ejs-loader
                    // { loader: 'ejs-loader' },
                    // 如果自定义了 custom-tmpl-loader，放在这里
                    { loader: 'custom-tmpl-loader' }
                ]
            }
        ]
    }
};

注意事项

在实际项目中，要根据具体需求调整 svgo 和 @svgr 的配置选项，以及自定义模板文件预处理的逻辑。
确保各个 loader 的版本兼容性，避免因版本问题导致构建失败。
对于大型组件库，还可以考虑使用 cache-loader 等工具来进一步提升构建效率，对 loader 的结果进行缓存。例如：

module.exports = {
    module: {
        rules: [
            {
                test: /\.svg$/,
                use: [
                    'cache-loader',
                    {
                        loader: '@svgr/webpack',
                        options: {
                            icon: true
                        }
                    },
                    // { loader:'svgo-loader' }
                ]
            },
            {
                test: /\.tmpl$/,
                use: [
                    'cache-loader',
                    // { loader: 'ejs-loader' },
                    // { loader: 'custom-tmpl-loader' }
                ]
            }
        ]
    }
};

星途面试题库

面试题：Webpack自定义加载器优化复杂组件库构建的应用场景

知识考点

面试题答案

1. 对 SVG 文件进行压缩并生成 React 组件

实现方案

2. 对自定义模板文件进行预处理

实现方案

注意事项