开源了一个webpack插件，希望对大家有所帮助

　　最近，陆陆续续搞 了一个 UniUsingComponentsWebpackPlugin 插件(下面介绍)，这是自己第三个开源项目，希望大家一起来维护，一起 star 呀，其它两个：  vue-okr-tree基于 Vue 2的组织架构树组件地址：https://github.com/qq449245884/vue-okr-tree  ztjy-cli团队的一个简易模板初始化脚手架地址：https://github.com/qq449245884/ztjy-cli  UniUsingComponentsWebpackPlugin地址：https://github.com/qq449245884/UniUsingComponentsWebpackPlugin配合UniApp，用于集成小程序原生组件  配置第三方库后可以自动引入其下的原生组件，而无需手动配置  生产构建时可以自动剔除没有使用到的原生组件  背景第一个痛点
　　用 uniapp开发小程序的小伙伴应该知道，我们在 uniapp 中要使用第三方 UI 库( vant-weapp ，iView-weapp )的时候 ，想要在全局中使用，需要在 src/pages.json  中的 usingComponents  添加对应的组件声明，如： // src/pages.json ＂usingComponents＂: {     ＂van-button＂: ＂/wxcomponents/@vant/weapp/button/index＂,   }
　　但在开发过程中，我们不太清楚需要哪些组件，所以我们可能会全部声明一遍（PS:这在做公共库的时候更常见)，所以我们得一个个的写，做为程序员，我们绝不允许使用这种笨方法。 这是第一个痛点 。  第二个痛点
　　使用第三方组件，除了在  src/pages.json  还需要在对应的生产目录下建立 wxcomponents ，并将第三方的库拷贝至该文件下，这个是 uniapp 自定义的，详细就见：https://uniapp.dcloud.io/frame?id=%e7%9b%ae%e5%bd%95%e7%bb%93%e6%9e%84。
　　这是第二个痛点 。  第三个痛点
　　第二痛点，我们将整个UI库拷贝至  wxcomponents ，但最终发布的时候，我们不太可能全都用到了里面的全局组件，所以就将不必要的组件也发布上去，增加代码的体积。
　　有的小伙伴就会想到，那你将第三方的库拷贝至  wxcomponents 时候，可以只拷使用到的就行啦。是这理没错，但组件里面可能还会使用到其它组件，我们还得一个个去看，然后一个个引入，这又回到了第一个痛点了。
　　有了这三个痛点，必须得有个插件来做这些傻事，处理这三个痛点。于是就有  UniUsingComponentsWebpackPlugin  插件，这个webpack 插件主要解决下面几个问题：  配置第三方库后可以自动引入其下的原生组件，而无需手动配置  生产构建时可以自动剔除没有使用到的原生组件  webpack 插件
　　webpack 的插件体系是一种基于 Tapable 实现的强耦合架构，它在特定时机触发钩子时会附带上足够的上下文信息，插件定义的钩子回调中，能也只能与这些上下文背后的数据结构、接口交互产生 side effect，进而影响到编译状态和后续流程。
　　从形态上看，插件通常是一个带有  apply 函数的类： class SomePlugin {     apply(compiler) {     } }
　　Webpack 会在启动后按照注册的顺序逐次调用插件对象的  apply  函数，同时传入编译器对象 compiler  ，插件开发者可以以此为起点触达到 webpack 内部定义的任意钩子，例如： class SomePlugin {     apply(compiler) {         compiler.hooks.thisCompilation.tap(＂SomePlugin＂, (compilation) => {         })     } }
　　注意观察核心语句  compiler.hooks.thisCompilation.tap ，其中 thisCompilation  为 tapable 仓库提供的钩子对象；tap  为订阅函数，用于注册回调。
　　Webpack 的插件体系基于 tapable  提供的各类钩子展开，所以有必要先熟悉一下 tapable 提供的钩子类型及各自的特点。
　　到这里，就不做继续介绍了，关于插件的更多 详情可以去官网了解。
　　这里推荐  Tecvan  大佬写的 《Webpack 插件架构深度讲解》  实现思路
　　UniUsingComponentsWebpackPlugin 插件主要用到了三个  compiler  钩子。
　　第一个钩子是  environment : compiler.hooks.environment.tap(       ＂UniUsingComponentsWebpackPlugin＂,       async () => {         // todo someing       }     );
　　这个钩子主要用来自动引入其下的原生组件，这样就无需手动配置。 解决第一个痛点 。
　　第二个钩子  thisCompilation ，这个钩子可以获得 compilation ，能对最终打包的产物进行操作： compiler.hooks.thisCompilation.tap(       ＂UniUsingComponentsWebpackPlugin＂,       (compilation) => {         // 添加资源 hooks         compilation.hooks.additionalAssets.tapAsync(           ＂UniUsingComponentsWebpackPlugin＂,           async (cb) => {             await this.copyUsingComponents(compiler, compilation);             cb();           }         );       }     );
　　所以这个勾子用来将  node_modules  下的第三库拷贝到我们生产 dist 目录里面的 wxcomponents  ，解决第二个痛点。
　　ps：这里也可直接用现有的  copy-webpack-plugin  插件来实现。
　　第三个钩子  done ，表示 compilation  执行完成：     if (process.env.NODE_ENV === ＂production＂) {       compiler.hooks.done.tapAsync(         ＂UniUsingComponentsWebpackPlugin＂,         (stats, callback) => {           this.deleteNoUseComponents();           callback();         }       );     }
　　执行完成后，表示我们已经生成  dist  目录了，可以读取文件内容，分析，获取哪些组件被使用了，然后删除没有使用到组件对应的文件。这样就可以解决我们第三个痛点了。
　　PS：这里我判断只有在生产环境下才会 剔除，开发环境没有，也没太必要。  使用
　　安装  npm install uni-using-components-webpack-plugin --save-dev
　　然后将插件添加到 WebPack Config 中。例如：  const UniUsingComponentsWebpackPlugin = require(＂uni-using-components-webpack-plugin＂);  module.exports = {   plugins: [  new UniUsingComponentsWebpackPlugin({      patterns: [      {       prefix: ＂van＂,       module: ＂@vant/weapp＂,      },      {       prefix: ＂i＂,       module: ＂iview-weapp＂,      },      ],     })   ], };
　　注意：uni-using-components-webpack-plugin 只适用在 UniApp 开发的小程序。   参数
　　NameType  Description  patterns{Array}为插件指定相关 Patterns
　　moduleprefix 模块名组件前缀
　　module  是指  package.json  里面的 name ，如使用是 Vant 对应的 module  为@vant/weapp ，如果使用是 iview，刚对应的 module  为 iview-weapp ，具体可看它们各自的 package.json 。
　　prefix  是指组件的前缀，如 Vant 使用是  van  开头的前缀，iview 使用是 i  开头的前缀，具体可看它们各自的官方文档。
　　PS:  这里得吐曹一下 vant，叫别人使用 van 的前缀，然后自己组件里面声明子组件时，却没有使用 van 前缀，如  picker  组件，它里面的 JSON 文件是这么写的：  {   ＂component＂: true,   ＂usingComponents＂: {     ＂picker-column＂: ＂../picker-column/index＂,     ＂loading＂: ＂../loading/index＂   } }
　　picker-column  和 loading  都没有带 van  前缀，因为这个问题，在做 自动剔除 功能中，我是根据 前缀来判断使用哪些组件的，由于这里的 loading  ，picker-column  没有加前缀，所以就被会删除，导致最终的 picker  用不了。为了解决这个问题，增加了不少工作量。
　　希望 Vant 官方后面的版本能优化一下。  总结
　　本文通用自定义 Webpack 插件来实现日常一些技术优化需求。主要为大家介绍了 Webpack 插件的基本组成和简单架构，通过三个痛点，引出了  uni-using-components-webpack-plugin  插件，并介绍了使用方式，实现思路。
　　最后，关于 Webpack 插件开发，还有更多知识可以学习，建议多看看官方文档《Writing a Plugin》进行学习。