下面是一个简单的 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 执行构建时,它都会调用 TimestampPlugin
的 apply
方法,并在构建完成后在输出目录中创建一个包含时间戳的文本文件。
确保你的项目结构允许找到 TimestampPlugin.js
文件,并且你的输出路径 (dist
目录) 已经存在或 Webpack 有权限创建它。如果一切正常,当你运行 Webpack 时,应该会在 dist
目录下看到一个 timestamp.txt
文件。