复习webpack4之如何编写Plugin

之前学习过webpack3的知识，但是webpack4升级后还是有很多变动的，所以这次重新整理一下webpack4的知识点，方便以后复习。

这次学习webpack4不仅仅要会配置，记住核心API，最好还要理解一下webpack更深层次的知识，比如打包原理等等，所以可能会省略一些比较基础的内容，但是希望我可以通过此次学习掌握webpack，更好地应对以后的工作。

1.如何编写简单的plugin

首先初始化项目

npm init -y
复制代码

新建一个src目录，里面有一个index.js

安装webpack

cnpm install -D webpack webpack-cli
复制代码

编写webpack配置。

在package.json中配置命令行

现在我们想在打包结束后，在dist目录中生成一个版权文件，要怎么做呢？

首先，在src同级目录下新建一个plugins的目录，然后在新建一个copyright-webpack-plugin.js，在这个文件里写js。

loader导出的是一个函数，而plugin是一个类。

插件被执行的时候，会首先执行apply这个方法，它接受一个参数compiler，是webpack实例。

然后在配置中使用我们的插件。

这也是插件使用过程中，需要new的原因。

有时候插件可以传参，我们就可以通过constructor的参数接收。

再回头来写插件。

compiler有许多钩子，compiler.hooks.emit代表生成资源到output目录之前的钩子。因为这是一个异步操作，所以后面跟着一个tapAsync

compilation里面有一个assets，包括本次打包生成的资源，现在已经有一个main.js，我们再添加一个copyright.txt，source代表文件中的内容，size代表文件大小，然后最后要调用cb()这个函数。

查看打包生成的文件。

如果写同步，就需要这么写。

同步的钩子后面只接tap就可以了，并且不用手动调用cb。

开发过程中，我们怎么快速知道compiler里面都包括什么内容？可以开启调试模式。

其实这个命令和npm run build没有区别，但是我们用node就可以传递参数。

加完参数后，运行npm run debug，打开浏览器，打开控制台，会发现多了一个webpack操作按钮。

点击后会出现webpack打包过程的调试界面。

现在我们去手动打一个断点。

然后重新执行npm run debug，执行相同的步骤。

默认会处在第一个断点，然后执行下一个断点就会来到我们手动打的断点中。

这样就可以快速看到compilation包括什么内容了。

具体的还是需要去官网，对照着看才可以深入使用。

转载于:https://juejin.im/post/5cf7c6c0f265da1bd1464728