webpack插件

[Wscats]

webpack进阶之插件篇
webpack 常用插件

[Wscats]

插件开发

/**
 * Copyright © 1998 - 2020 Tencent. All Rights Reserved.
 *
 * @author enoyao
 * 这个一个 debugger 插件，负责热更新，ast 处理等
 */
const chokidar = require('chokidar');
// @ts-ignore
const fs = require('fs');
class DebuggerPlugin {
    options: any;
    watcher: any;
    constructor(options: any) {
        // 使用 options 设置插件实例……
        this.options = options;
    }
    apply(compiler: any) {
        // 监听 src 文件夹下所有的 .debug 配置文件的变化
        this.watcher = chokidar.watch('src/**/.debug', {
            usePolling: true,
            ignored: this.options.ignored
        });
        this.watcher.on('change', (path: string, stats: any) => {
            if (stats) console.log(`File ${path} changed size to ${stats.size}`);
            fs.writeFileSync('/Users/enoyao/Documents/code/function-trace/src/demo/index.ts', fs.readFileSync('/Users/enoyao/Documents/code/function-trace/src/demo/index.ts'));
        })
        compiler.plugin('done', function () {
            console.log('Hello World!');
        });

        // 设置回调来访问 compilation 对象：
        compiler.plugin("compilation", function (compilation: any) {
            // 现在，设置回调来访问 compilation 中的步骤：
            compilation.plugin("optimize", function () {
                console.log("Assets are being optimized.");
            });
        });

        compiler.plugin("emit", function (compilation: any, callback: Function) {
            // 做一些异步处理……
            setTimeout(function () {
                console.log("Done with async work...");
                callback();
            }, 1000);

            // 在生成文件中，创建一个头部字符串：
            var filelist = 'In this build:\n\n';

            // 遍历所有编译过的资源文件，
            // 对于每个文件名称，都添加一行内容。
            for (var filename in compilation.assets) {
                filelist += ('- ' + filename + '\n');
            }

            // 将这个列表作为一个新的文件资源，插入到 webpack 构建中：
            compilation.assets['filelist.md'] = {
                source: function () {
                    return filelist;
                },
                size: function () {
                    return filelist.length;
                }
            };

            callback();
        });
    };
}

module.exports = DebuggerPlugin;

推荐一个 const chokidar = require('chokidar'); 库，这个可以监听文件的修改，然后利用它配合 fs 模块重写文件，可以在这个时机触发 loader。

参考

• webpack官网编写一个插件 DEMO
• auto-export-plugin