前言

webpack中plugin的原理上一篇文章已经聊到过了，今天我们说说项目开发中的一些应用场景。为了引出plugin，如果你熟悉vue的开发，我先问你一个问题，项目里的public与assets都是用来存放资源的，他们俩有什么区别？如果你不能清晰地讲出来，可以去翻翻我写的其他几篇webpack的文章。
先说答案，public目录是不参与webpack打包的，src目录下的assets是参与webpack打包的，资源会被作为模块依赖打包进最终的js中，而public目录的资源是被页面通过绝对路径直接引用的。
ok，如果说到这儿就结束了，或者你仅仅就理解到这儿就结束了，就完事了吗？我再问你，既然public不参与webpack打包，那我最终打包的dist目录里页面怎么引用资源？
对吧，这些东西都是一环扣一环，很多东西不是想当然怎样就怎样，你之所以能这样用，是有人帮你实现了。你说我浪费时间关注这些干什么？知道怎么用不就行了，公司招你是为了解决问题的，你解决问题能力的高低取决于什么？取决于你写了多少行重复的代码吗？不是吧，而是取决于对于一件事情思考的程度有多深，当你能够系统的去认知某一项东西，即使你去搜索也是要事半功倍的，你也知道该从何下手。

正文

vue-cli，这脚手架做过vue开发的同学都应该不陌生吧，那我问你我红框标注的这个开发依赖你关注过吗？

顺着依赖我们来到node_modules里面，继续看@vue/cli-service的package.json，我标红的copy-webpack-plugin应该都清楚吧？什么你说你不清楚...

不清楚应该去哪？当然是去npm看官方了:

好，你获得了什么信息，将已存在的单个文件或整个目录复制到构建目录。这不就是我们所需要的吗？
ok继续来到lib目录下的app.js，兄dei，注释写的很清楚吧，拷贝public的静态资源。

至此，你也应该清楚了，vue-cli脚手架帮我们做了这件事，哪件事？将public目录下的静态资源通过插件copy-webpack-plugin拷贝到了打包目录，所以我们才能使用，他不是凭空出现在那儿的。
希望你可以通过我举的这个例子可以知道，很多脚手架是依赖于webpack的，而要实现一些额外的需求，是需要通过插件的，如果你有兴趣了解其他插件和一些应用场景，可以参照这个方法去研究，当你研究的足够深刻的时候，想必你也可以手写一款属于自己的脚手架。
授人鱼不如授人渔，方法一定是最重要的，很多人迷茫一定是没有找到正确的方向，如果你也喜欢这种引领你一步步去探究的方式，请给我一个免费的一键三连。

尾声

所以说，学知识最好还是系统的学，在脑袋里面形成相对完整的体系。如果你今天遇到一个不清楚的地方搜一搜一知半解糊弄过去了，明天也是如此，那么你在技术的路上很难走远，我希望你不是作为一个螺丝钉工作，而是有思想可以创造的艺术家。