有些过一些webpack自定义的插件吗

以下是一些编写 webpack 自定义插件的示例及说明：

简单的版权声明插件

这个插件用于在每个生成的 JavaScript 文件顶部添加版权声明注释。

javascript

class CopyrightPlugin {
    constructor(options) {
        // 插件接收一个配置对象，这里我们期望配置对象中有一个copyrightText属性，用于指定版权声明文本
        this.copyrightText = options.copyrightText;
    }

    apply(compiler) {
        // compiler.plugin方法用于注册插件到webpack的构建流程中
        // 这里我们在webpack的emit阶段触发插件逻辑
        compiler.plugin('emit', (compilation, callback) => {
            // 遍历所有即将输出的文件
            for (let filename in compilation.assets) {
                // 只处理JavaScript文件
                if (filename.endsWith('.js')) {
                    // 获取文件内容
                    let source = compilation.assets[filename].source();
                    // 在文件内容顶部添加版权声明注释
                    source = `/* ${this.copyrightText} */\n` + source;
                    // 更新文件内容
                    compilation.assets[filename] = {
                        source: () => source,
                        size: () => source.length
                    };
                }
            }
            // 执行回调函数，告诉webpack插件逻辑执行完毕
            callback();
        });
    }
}

module.exports = CopyrightPlugin;

使用时，在webpack.config.js中进行如下配置：

javascript

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

module.exports = {
    // ...其他配置
    plugins: [
        new CopyrightPlugin({
            copyrightText: 'Copyright © 2025 Your Company. All rights reserved.'
        })
    ]
};

自定义的文件注入插件

该插件可以在 HTML 文件中注入特定的内容，比如在</body>标签前注入一段自定义的脚本。

javascript

class InjectScriptPlugin {
    constructor(options) {
        // 期望配置对象中有一个scriptText属性，用于指定要注入的脚本内容
        this.scriptText = options.scriptText;
    }

    apply(compiler) {
        compiler.plugin('compilation', (compilation) => {
            // 利用html-webpack-plugin的钩子函数，在html-webpack-plugin即将生成HTML文件时注入脚本
            compilation.plugin('html-webpack-plugin-before-html-processing', (htmlPluginData, callback) => {
                // 在HTML内容的</body>标签前注入脚本
                htmlPluginData.html = htmlPluginData.html.replace('</body>', `<script>${this.scriptText}</script></body>`);
                callback(null, htmlPluginData);
            });
        });
    }
}

module.exports = InjectScriptPlugin;

在webpack.config.js中的使用方式如下：

javascript

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

module.exports = {
    // ...其他配置
    plugins: [
        // 假设已经配置了html-webpack-plugin
        new InjectScriptPlugin({
            scriptText: 'console.log("This is a custom injected script.");'
        })
    ]
};

这些自定义插件只是简单的示例，实际应用中可以根据具体需求编写更复杂、更强大的插件来满足项目的特定构建需求。