一个webpack的plugin 的简单例子

devtools/2024/12/22 14:44:25/

下面是一个简单的 Webpack 插件示例,该插件会在输出目录中创建一个文本文件,并向其中写入当前的时间戳。这个插件演示了如何注册一个监听器,在编译完成之后执行自定义的操作。

首先,你需要创建一个 JavaScript 文件来定义你的插件。这里我们假设文件名为 TimestampPlugin.js

// TimestampPlugin.js
class TimestampPlugin {apply(compiler) {compiler.hooks.emit.tapAsync('TimestampPlugin', (compilation, callback) => {const fs = require('fs');const outputFilename = 'timestamp.txt';const outputPath = compilation.getPath(outputFilename);// 获取当前时间戳const timestamp = new Date().toLocaleString();// 将时间戳写入文件fs.writeFile(outputPath, timestamp, err => {if (err) {console.error(`[TimestampPlugin] Failed to write timestamp file: ${outputPath}`);return callback(err);}console.log(`[TimestampPlugin] Wrote timestamp to ${outputPath}`);callback();});});}
}module.exports = TimestampPlugin;

在这个插件中,我们定义了一个 apply 方法,它接收一个 compiler 对象作为参数。compiler 对象允许我们访问 Webpack 的很多内部钩子(hooks),我们可以注册回调函数到这些钩子上。

在这个例子中,我们使用了 emit 钩子,这是一个异步钩子,它会在 Webpack 准备写出文件之前被调用。我们使用 tapAsync 方法注册一个异步回调函数。当 Webpack 触发 emit 钩子时,我们的回调函数会被执行,它会获取当前的 compilation 对象,然后使用 Node.js 的 fs 模块来写入一个包含当前时间戳的文本文件。

接下来,我们需要在 Webpack 配置文件中使用这个插件:

// webpack.config.js
const path = require('path');
const TimestampPlugin = require('./TimestampPlugin');module.exports = {entry: './src/index.js',output: {filename: 'bundle.js',path: path.resolve(__dirname, 'dist')},plugins: [new TimestampPlugin() // 使用插件]
};

在上面的配置文件中,我们导入了 TimestampPlugin 并实例化它,然后将其添加到 plugins 数组中。这样,每当 Webpack 执行构建时,它都会调用 TimestampPluginapply 方法,并在构建完成后在输出目录中创建一个包含时间戳的文本文件。

确保你的项目结构允许找到 TimestampPlugin.js 文件,并且你的输出路径 (dist 目录) 已经存在或 Webpack 有权限创建它。如果一切正常,当你运行 Webpack 时,应该会在 dist 目录下看到一个 timestamp.txt 文件。


http://www.ppmy.cn/devtools/107726.html

相关文章

后台框架-统一数据格式

现在BS架构的应用一般都采用前后端分离的架构,前端技术框架可采用VUE等,后端框架目前成熟且使用广泛的就是基于SpringBoot开发的后端微服务框架。 数据格式 这里主要介绍一下如何实现返回统一的数据格式,比如返回的样例数据如下图所示&…

【Starter 】Spring Boot 3.x 自定义封装Starter 实战

【Starter 】Spring Boot 3.x 自定义封装Starter 实战 Starter 背景简介及作用 什么是 Starter Starter 是 Spring Boot 中的一项创新发明,它的主要作用是降低项目开发中的复杂性,从而简化开发操作。通过使用 Starter,开发人员可以轻松地引…

计算机网络13——IM聊天系统——网络功能实现——UDP

目录 1、类的成员变量 2、魔鬼数字 3、创建接收数据的线程 4、线程函数 5、防止旧接收到的数据被新数据覆盖掉 6、拷贝用的函数:memcpy_s 7、回收线程资源 8、计数器-1 (1)结束线程工作 (2)关闭句柄 测试代码 1、类的成员变量 同一个类中的多个函数中都要使用…

Leetcode JAVA刷刷站(106)从中序与后序遍历序列构造二叉树

一、题目概述 二、思路方向 在Java中,根据给定的中序遍历(inorder)和后序遍历(postorder)数组来构造二叉树是一个相对常见的问题。基本思路是,后序遍历的最后一个元素总是当前子树的根节点。然后&#xff…

[UVM]6.component driver monitor sequencer agent scoreboard env test

1.知识点回顾 (1)component需要有parent,因为参加构成组件,所以需要(继承); (2)object与component之间间隔report_object。 2.组件家族 (1)构建…

广义回归神经网络(GRNN)

一、简介 广义回归神经网络 (General Regression Neural Network , GRNN) 的概念是由德 国科学家多纳德提出的,是径向基网络的其中一种 。因为其是以数理统计为基 础的,因此 GRNN 可以依据样本数据逼近其中包含的非线性映射关系。即使样本 数…

如何使用Linux命令行创建文件

可以使用命令行中的 touch 或 echo 命令来创建一个名为 main.rs 的文件。以下是两种方法: 方法 1:使用 touch 命令 touch 命令用于创建一个空文件。运行以下命令来创建 main.rs 文件: touch main.rs这将在当前目录下创建一个名为 main.rs …

Day11_0.1基础学习MATLAB学习小技巧总结(11)——程序流程控制2

利用空闲时间把碎片化的MATLAB知识重新系统的学习一遍,为了在这个过程中加深印象,也为了能够有所足迹,我会把自己的学习总结发在专栏中,以便学习交流。 素材来源“数学建模清风” 特此说明:本博客的内容只在于总结在…