WebPack 版本小插件 Vendor Version Plugin

前端项目打包发布后，时间一久，项目上出了问题，就很难知道当时的打包状态，甚至什么时候发的版本都忘了。

介绍一个本人开发的插件，每次打包时，记录打包时依赖库的版本号信息，和打包时间，可以给事后定位问题多带来一点点信息。

例如：

/**  build at 2022-05-17 14:57:45 ,  version info : {"react":"16.8.0","lodash":"4.17.21"} */
// ... 你的代码

插件 Github 地址 : https://github.com/ada87/vendor-version

安装

npm install --save-dev verdor-version

使用

在 webpack.config.js 里面加入：

const VerdorVersionPlugin = require('verdor-version');

module.exports = {
    ...
    plugins: [new VerdorVersionPlugin()],
}

参数

构造方法支持传入一个对象作为参数，用于设定注释信息的一些特性：

名称	说明	默认
footer	boolean 信息位置：true : 代码下面, 默认生成在编译后的代码上面	false
banner	string 自定义字串，拼在信息前面 说明： 没有安全判断，不要传 */ 之类的字段阻断注释！	null
dependencies	string[] 指需要生成版本信息的依赖名称，传入一个数组	从当前项目 package.json 的 dependencies 中获取
variable	string 在 production 模式中, 使用一个变量展示信息.	“_v_v”

示例：

const VerdorVersionPlugin = require('verdor-version');

module.exports = {
    ...
    plugins: [new VerdorVersionPlugin({
        banner:'My Name',
        // footer: true,
        dependencies:['lodash','react']

    })],
}

说明

由于在 production 模式中，注释会被清理掉，所以在 production 代码是以 var 变量方式插入的