如何手写一个webpack插件（plugin）

最新推荐文章于 2024-01-13 16:07:07 发布

原创最新推荐文章于 2024-01-13 16:07:07 发布 · 797 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#webpack #javascript #前端

本文介绍如何从头开始创建一个简单的webpack插件。通过分析webpack的NodeEnvironmentPlugin，我们创建了一个名为TestPlugin的插件，该插件在webpack的emit钩子上执行，生成一个额外的文件并打印一句话。将TestPlugin引入webpack配置文件后，运行构建，即可看到插件的效果。这不仅展示了webpack插件的工作原理，也展现了自定义插件的乐趣。

如何手写一个webpack插件（plugin）呢？其实我的想法比较简单，看看webpack怎么调用他自己内部插件的流程不就好了嘛。我这里拿webpack4来举个例子。随便从webpack lib目录下找一个插件，就比如NodeEnvironmentPlugin这个插件
// TestPlugin.js
class TestPlugin {

}


2、接着定义一个apply方法，并拿到实参compiler（上面也看到了，webpack内部调用插件的时候都会传入compiler实例）```
// TestPlugin.js
class TestPlugin {apply(compiler) {}
}

3、这里我们做一个小的案例：在webpack输出后的文件夹里创建一个我们自己的文件，并打印一句话（很简单吧）那我们就要看看这个compiler里面有什么东西了<img src=“https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/77aea3da606a489a8402a2a89bf1f203~tplv-k3u1fbpfcp-zoom-in-crop-mark:4536:0:0:0.image?) 首先会看到wcompiler实例里面会有很多钩子函数，具体可以去官方文档去了解一” style=“margin: auto” />

// TestPlugin.js class TestPlugin {apply(compiler) {compiler.hooks.emit.tap('TestPluginEmit', () => {compiler.outputFileSystem.writeFile(compiler.outputPath+ '/TestPluginOut.js', '//我们的第一个webpack插件！', () => {})})} } ```

好，我们的第一个插件就写完了,大致意思是在webpack钩子emit call（这是tapable实例的方法）执行的时候，会去执行我们的tap调用里面传入的函数，也就是compiler.outputFileSystem.writeFile(compiler.outputPath+ '/TestPluginOut.js', '//我们的第一个webpack插件！', () => {})现在让我们去webpack配置文件中去引入我们的插件吧。```
// webpack.config.js
const TestPlugin = require(‘??/TestPlugin’) // 路径记得写对哦
module.exports = function() {return {mode: ‘development’,entry: [‘./src/app.js’],output: {path: path.join(__dirname, ‘out’),filename: ‘out.[name].js’},plugins: [new TestPlugin(),]}
}