如何手写一个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(),]}
}

 TestPlugin(),]}
} 

最后可以看到我们的out目录下会多生产一个TestPluginOut.js文件，没错正是我们自己写的插件生产的。是不是觉得很好玩呢。

最后

最近还整理一份JavaScript与ES的笔记，一共25个重要的知识点，对每个知识点都进行了讲解和分析。能帮你快速掌握JavaScript与ES的相关知识，提升工作效率。

有需要的小伙伴，可以点击下方卡片领取，无偿分享