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

本文目录

• 开源了一个 webpack 插件，希望对大家有所帮助
• webpack插件optimize-css-assets-webpack-plugin
• vue_关于extract-text-webpack-plugin插件
• UglifyJS Webpack Plugin

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

最近，陆陆续续搞 了一个 UniUsingComponentsWebpackPlugin 插件(下面介绍)，这是自己第三个开源项目，希望大家一起来维护，一起 star 呀，其它两个：

用 uniapp开发小程序的小伙伴应该知道，我们在 uniapp 中要使用第三方 UI 库( vant-weapp ， iView-weapp )的时候 ，想要在全局中使用，需要在 src/pages.json 中的 usingComponents 添加对应的组件声明，如：

但在开发过程中，我们不太清楚需要哪些组件，所以我们可能会全部声明一遍（PS:这在做公共库的时候更常见)，所以我们得一个个的写，做为程序员，我们绝不允许使用这种笨方法。 这是第一个痛点 。

***隐藏网址***

这是第二个痛点 。

第二痛点，我们将整个UI库拷贝至 wxcomponents ，但最终发布的时候，我们不太可能全都用到了里面的全局组件，所以就将不必要的组件也发布上去，增加代码的体积。

有的小伙伴就会想到，那你将第三方的库拷贝至 wxcomponents 时候，可以只拷使用到的就行啦。是这理没错，但组件里面可能还会使用到其它组件，我们还得一个个去看，然后一个个引入，这又回到了 第一个痛点了 。

有了这三个痛点，必须得有个插件来做这些傻事，处理这三个痛点。于是就有 UniUsingComponentsWebpackPlugin 插件，这个webpack 插件主要解决下面几个问题：

webpack 的插件体系是一种基于 Tapable 实现的强耦合架构，它在特定时机触发钩子时会附带上足够的上下文信息，插件定义的钩子回调中，能也只能与这些上下文背后的数据结构、接口交互产生 side effect，进而影响到编译状态和后续流程。

从形态上看，插件通常是一个带有 apply 函数的类：

Webpack 会在启动后按照注册的顺序逐次调用插件对象的 apply 函数，同时传入编译器对象 compiler ，插件开发者可以以此为起点触达到 webpack 内部定义的任意钩子，例如：

注意观察核心语句 compiler.hooks.thisCompilation.tap ，其中 thisCompilation 为 tapable 仓库提供的钩子对象； tap 为订阅函数，用于注册回调。

Webpack 的插件体系基于 tapable 提供的各类钩子展开，所以有必要先熟悉一下 tapable 提供的钩子类型及各自的特点。

到这里，就不做继续介绍了，关于插件的更多 详情可以去官网了解。

这里推荐 Tecvan 大佬写的 《Webpack 插件架构深度讲解》

UniUsingComponentsWebpackPlugin 插件主要用到了三个 compiler 钩子。

第一个钩子是 environment :

这个钩子主要用来自动引入其下的原生组件，这样就无需手动配置。 解决第一个痛点 。

第二个钩子 thisCompilation ，这个钩子可以获得 compilation ，能对最终打包的产物进行操作：

所以这个勾子用来将 node_modules 下的第三库拷贝到我们生产 dist 目录里面的 wxcomponents ， 解决第二个痛点 。

ps：这里也可直接用现有的 copy-webpack-plugin 插件来实现。

第三个钩子 done ，表示 compilation 执行完成：

执行完成后，表示我们已经生成 dist 目录了，可以读取文件内容，分析，获取哪些组件被使用了，然后删除没有使用到组件对应的文件。这样就可以解决我们 第三个痛点了 。

PS：这里我判断只有在生产环境下才会 剔除，开发环境没有，也没太必要。

安装

然后将插件添加到 WebPack Config 中。例如：

NameType Description patterns{Array}为插件指定相关

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 文件是这么写的：

picker-column 和 loading 都没有带 van 前缀，因为这个问题，在做 自动剔除 功能中，我是根据 前缀来判断使用哪些组件的，由于这里的 loading ， picker-column 没有加前缀，所以就被会删除，导致最终的 picker 用不了。为了解决这个问题，增加了不少工作量。

希望 Vant 官方后面的版本能优化一下。

本文通用自定义 Webpack 插件来实现日常一些技术优化需求。主要为大家介绍了 Webpack 插件的基本组成和简单架构，通过三个痛点，引出了 uni-using-components-webpack-plugin 插件，并介绍了使用方式，实现思路。

最后，关于 Webpack 插件开发，还有更多知识可以学习，建议多看看官方文档《Writing a Plugin》进行学习。

webpack插件optimize-css-assets-webpack-plugin

该插件主要用来压缩css文件 使用: 1.安装 2.webpack.config.js配置 参数: assetNameRegExp ：一个正则表达式，指示应优化最小化的资源的名称。提供的正则表达式针对配置中 ExtractTextPlugin 实例导出的文件的文件名运行，而不是源CSS文件的文件名。默认为/.css$/g cssProcessor ：用于优化最小化CSS的CSS处理器，默认为cssnano。这应该是一个跟随cssnano.process接口的函数（接收CSS和选项参数并返回一个Promise）。 cssProcessorOptions ：传递给cssProcessor的选项，默认为 {} cssProcessorPluginOptions ：传递给cssProcessor的插件选项，默认为 {} canPrint ：一个布尔值，指示插件是否可以将消息打印到控制台，默认为 true

vue_关于extract-text-webpack-plugin插件

extract-text-webpack-plugin插件的主要作用是：     使用npm进行安装，安装命令为：       npm install extract-text-webpack-plugin --save-dev //导入插件  var  ExtractTextPlugin  =  require(’extract-text-webpack-plugin’);   //在module的use中指定使用extractTextPlugin做提取处理 module.exports = {   module: {     rules: } 其中： use选项:         指的是需要什么样的loader去编译文件,这里由于源文件是.css所以选择css-loader fallback选项:    指的是指编译失败后用什么loader来提取css文件 publicfile选项:   指的是用来覆盖项目路径,生成该css文件的文件路径

UglifyJS Webpack Plugin

UglifyJS Webpack Plugin 插件用来缩小（压缩优化）js文件，至少需要 Node v6.9.0和Webpack v4.0.0版本 。 webpack 4 之前的版本是通过 webpack.optimize.CommonsChunkPlugin 来压缩js， webpack 4 版本之后被移除了，使用 config.optimization.splitChunks 来代替。 基本配置 options配置项 sourceMap：cheap-source-map选项不适用于此插件 更多用法参考如下官方文档：***隐藏网址***