面试题：Webpack loader的链式调用与资源处理

Question

假设有一个需求，需要先将CSS文件中的所有颜色值提取出来并存储到一个JSON文件中，然后再对CSS文件进行压缩。请设计并实现两个Webpack loader，一个用于颜色值提取，另一个用于CSS压缩，并且说明如何在Webpack配置中正确配置这两个loader的链式调用，确保整个流程正确无误。

Answer 1

颜色值提取 loader

1. 创建 extractColorsLoader.js 文件

module.exports = function (source) {
    const colorRegex = /#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6})|rgb\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*\)|rgba\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*([01]|0\.[0-9]+)\s*\)|hsl\(\s*(\d{1,3})\s*,\s*(\d{1,3}%)\s*,\s*(\d{1,3}%)\s*\)|hsla\(\s*(\d{1,3})\s*,\s*(\d{1,3}%)\s*,\s*(\d{1,3}%)\s*,\s*([01]|0\.[0-9]+)\s*\)/g;
    const colors = [];
    let match;
    while ((match = colorRegex.exec(source))) {
        colors.push(match[0]);
    }
    const jsonContent = JSON.stringify({ colors });
    // 将颜色信息写入文件
    const fs = require('fs');
    fs.writeFileSync('colors.json', jsonContent);
    return source;
};

CSS 压缩 loader

1. 创建 cssMinifyLoader.js 文件

const cssnano = require('cssnano');
module.exports = function (source) {
    return cssnano.process(source).css;
};

Webpack 配置

在 webpack.config.js 中配置如下：

module.exports = {
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    'cssMinifyLoader',
                    'extractColorsLoader'
                ]
            }
        ]
    }
};

在上述配置中，use 数组里的 loader 是从后往前执行的，先执行 extractColorsLoader 提取颜色值并写入 JSON 文件，再执行 cssMinifyLoader 对 CSS 进行压缩。注意要确保 cssnano 已安装，可以通过 npm install cssnano --save-dev 安装。