面试题：Webpack专家难度：Webpack自定义插件开发与复杂配置

Question

假设项目中有特殊需求，需要开发一个Webpack插件，该插件功能是在打包结束后自动将产出的静态资源文件上传到指定的云存储服务。请详细说明开发此插件的思路以及Webpack相关的核心API使用，同时描述如何在Webpack配置中集成该插件。

Answer 1

开发思路

1. 了解Webpack插件机制：Webpack插件是基于事件流机制工作的，插件通过钩子函数介入Webpack的构建流程。
2. 确定插件触发时机：由于要在打包结束后上传文件，选择done钩子，该钩子在整个打包流程结束后触发。
3. 实现文件上传功能：利用云存储服务提供的SDK，将打包产出的静态资源文件上传到指定位置。

Webpack核心API使用

1. Compiler和Compilation对象：
   • Compiler：代表了整个Webpack的编译环境，包含了Webpack的所有配置信息。插件通过compiler对象访问Webpack的环境和钩子。
   • Compilation：代表一次资源的构建，包含了这次构建中所有的模块、Chunk等信息。在done钩子中，我们可以从compilation对象获取到产出的静态资源文件路径等信息。
2. 钩子函数：
   • 使用compiler.hooks.done.tap来注册一个插件，tap的第一个参数是插件名称，第二个参数是一个回调函数，在打包结束时会执行这个回调函数。

插件代码示例

class UploadPlugin {
    constructor(options) {
        this.options = options;
    }
    apply(compiler) {
        compiler.hooks.done.tap('UploadPlugin', (stats) => {
            // 这里可以根据stats获取打包后的文件信息
            const outputPath = compiler.options.output.path;
            // 使用云存储SDK进行文件上传，假设云存储SDK为cos-sdk
            const COS = require('cos-sdk-js');
            const cos = new COS({
                SecretId: this.options.SecretId,
                SecretKey: this.options.SecretKey
            });
            // 遍历打包后的文件并上传
            const files = getFiles(outputPath); // 假设该函数用于获取打包后的文件列表
            files.forEach((file) => {
                cos.putObject({
                    Bucket: this.options.Bucket,
                    Region: this.options.Region,
                    Key: file,
                    FilePath: outputPath + '/' + file
                }, function (err, data) {
                    if (err) {
                        console.log(err);
                    } else {
                        console.log('文件上传成功', data);
                    }
                });
            });
        });
    }
}

function getFiles(dir) {
    const fs = require('fs');
    const path = require('path');
    let files = [];
    const readDir = (dir) => {
        const items = fs.readdirSync(dir);
        items.forEach((item) => {
            const itemPath = path.join(dir, item);
            const stat = fs.statSync(itemPath);
            if (stat.isDirectory()) {
                readDir(itemPath);
            } else {
                files.push(item);
            }
        });
    };
    readDir(dir);
    return files;
}

module.exports = UploadPlugin;

在Webpack配置中集成该插件

在Webpack配置文件（通常是webpack.config.js）中，进行如下配置：

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

module.exports = {
    // 其他Webpack配置项...
    plugins: [
        new UploadPlugin({
            SecretId: 'yourSecretId',
            SecretKey: 'yourSecretKey',
            Bucket: 'yourBucket',
            Region: 'yourRegion'
        })
    ]
};

这样，在Webpack打包结束后，就会自动将产出的静态资源文件上传到指定的云存储服务。注意替换yourSecretId、yourSecretKey、yourBucket和yourRegion为实际的云存储服务配置信息。