复习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包括什么内容了。

具体的仍是须要去官网，对照着看才能够深刻使用。