billd-html-webpack-plugin weekly downloads statistics

billd-html-webpack-plugin

给你的项目注入构建信息

简介

一个给你的项目注入构建信息的 webpack / vite 插件，兼容 nuxt2/3/4、vuecli4/5、webpack4/5、vite4、next12

效果

从控制台可以看到，打印了当前项目的 git 信息以及最后部署时间，非常人性化，再也不用担心部署的代码是不是最新的了~

原理

• nuxt2、vuecli4 是基于 webpack4 的，主要是根据 compiler.hooks.emit 这个钩子，在入口文件注入项目信息然后再输出 • next12、vuecli5 是基于 webpack5 的，主要是根据 compiler.hooks.compilation 这个钩子以及 compilation.hooks.processAssets， 对入口文件进行注入项目信息然后再输出 • nuxt3 是基于 vite 的，主要是根据 configResolved 这个钩子（ vite 插件特有），通过 configResolved 钩子找入口，然后使用 transform 钩子（rollup 插件）将项目信息注入到入口文件 • vite4，主要是根据 transformIndexHtml 这个钩子（vite 插件特有），对 index.html 注入项目信息

本质上就是给你的项目入口/所有 html 插入一串 js 代码。

安装

使用前注意

请确保你的 package.json 里面有以下字段：

使用

nuxt2

nuxt.config.js

nuxt3

nuxt.config.ts

nuxt3.6+

nuxt.config.ts

vuecli4

vue.config.js

vuecli5

vue.config.js

webpack4

webpack.config.js

webpack5

webpack.config.js

next12

next.config.js

vite4

vite.config.ts

注意：如果 package.json 里面配置了 "type": "module" ，则需要添加.default：new BilldHtmlWebpackPlugin.default({ env: 'vite4' }).config

配置

打印选项

获取打印数据

注意：只支持在 node 环境执行

调试

• 查看列表 • 卸载 • 在本地的 billd-html-webpack-plugin 项目目录下执行： • 启动项目： • 在用到 billd-html-webpack-plugin 的项目目录下执行：

https://pnpm.io/zh/cli/unlink 如果要删除使用 pnpm link --global 建立的链接，则应使用 pnpm uninstall --global 。 pnpm unlink 仅删除当前> 目录中的链接。

发布

引用

• https://git-scm.com/docs/git-show • https://github.com/jantimon/html-webpack-plugin • https://webpack.docschina.org/api/compiler-hooks/ • https://webpack.docschina.org/api/compilation-hooks/ • https://webpack.docschina.org/api/compilation-hooks/#processassets

源码

https://github.com/galaxy-s10/babel-plugin-import-billd，欢迎 star~

Description from the npm listing.