{"id":16977296,"url":"https://github.com/galaxy-s10/billd-html-webpack-plugin","last_synced_at":"2025-08-03T11:07:40.142Z","repository":{"id":63878677,"uuid":"571221390","full_name":"galaxy-s10/billd-html-webpack-plugin","owner":"galaxy-s10","description":"给你的项目注入构建信息，兼容 nuxt2/3、vuecli4/5、webpack4/5、vite4、next12","archived":false,"fork":false,"pushed_at":"2025-05-29T03:19:05.000Z","size":230,"stargazers_count":11,"open_issues_count":0,"forks_count":3,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-07-01T08:08:52.307Z","etag":null,"topics":["nuxt-plugin","vite-plugin","webpack-plugin"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/galaxy-s10.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2022-11-27T14:58:03.000Z","updated_at":"2025-05-29T03:19:08.000Z","dependencies_parsed_at":"2024-03-12T14:01:45.406Z","dependency_job_id":"c9c224e4-05e9-479d-802f-da77ac72918c","html_url":"https://github.com/galaxy-s10/billd-html-webpack-plugin","commit_stats":{"total_commits":69,"total_committers":1,"mean_commits":69.0,"dds":0.0,"last_synced_commit":"eff4034eb50f307771c8b64c8fda325be797a1d1"},"previous_names":[],"tags_count":40,"template":false,"template_full_name":null,"purl":"pkg:github/galaxy-s10/billd-html-webpack-plugin","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/galaxy-s10%2Fbilld-html-webpack-plugin","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/galaxy-s10%2Fbilld-html-webpack-plugin/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/galaxy-s10%2Fbilld-html-webpack-plugin/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/galaxy-s10%2Fbilld-html-webpack-plugin/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/galaxy-s10","download_url":"https://codeload.github.com/galaxy-s10/billd-html-webpack-plugin/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/galaxy-s10%2Fbilld-html-webpack-plugin/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":268531912,"owners_count":24265250,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-03T02:00:12.545Z","response_time":2577,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["nuxt-plugin","vite-plugin","webpack-plugin"],"created_at":"2024-10-14T01:28:32.829Z","updated_at":"2025-08-03T11:07:40.071Z","avatar_url":"https://github.com/galaxy-s10.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003ca href=\"\"\u003e\n    \u003cimg\n      width=\"200\"\n      src=\"https://resource.hsslive.cn/image/1613141138717Billd.webp\"\n      alt=\"billd-html-webpack-plugin logo\"\n    /\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n\u003ch1 align=\"center\"\u003e\n  billd-html-webpack-plugin\n\u003c/h1\u003e\n\n\u003cp align=\"center\"\u003e\n给你的项目注入构建信息\n\u003c/p\u003e\n\n\u003cdiv align=\"center\"\u003e\n\u003ca href=\"https://www.npmjs.com/package/billd-html-webpack-plugin\"\u003e\u003cimg src=\"https://img.shields.io/npm/v/billd-html-webpack-plugin.svg\" alt=\"Version\"\u003e\u003c/a\u003e\n\u003ca href=\"https://www.npmjs.com/package/billd-html-webpack-plugin\"\u003e\u003cimg src=\"https://img.shields.io/npm/dw/billd-html-webpack-plugin.svg\" alt=\"Downloads\"\u003e\u003c/a\u003e\n\u003ca href=\"https://www.npmjs.com/package/billd-html-webpack-plugin\"\u003e\u003cimg src=\"https://img.shields.io/npm/l/billd-html-webpack-plugin.svg\" alt=\"License\"\u003e\u003c/a\u003e\n\u003c/div\u003e\n\n# 简介\n\n一个给你的项目注入构建信息的 webpack / vite 插件，兼容 nuxt2/3、vuecli4/5、webpack4/5、vite4、next12\n\n# 效果\n\n![https://resource.hsslive.cn/image/b1c7975436bfbe9a79ffe862a31c8440.webp](https://resource.hsslive.cn/image/b1c7975436bfbe9a79ffe862a31c8440.webp)\n\n\u003e 从控制台可以看到，打印了当前项目的 git 信息以及最后部署时间，非常人性化，再也不用担心部署的代码是不是最新的了~\n\n# 原理\n\n- nuxt2、vuecli4 是基于 webpack4 的，主要是根据 compiler.hooks.emit 这个钩子，在入口文件注入项目信息然后再输出\n- next12、vuecli5 是基于 webpack5 的，主要是根据 compiler.hooks.compilation 这个钩子以及 compilation.hooks.processAssets， 对入口文件进行注入项目信息然后再输出\n- nuxt3 是基于 vite 的，主要是根据 configResolved 这个钩子（ vite 插件特有），通过 configResolved 钩子找入口，然后使用 transform 钩子（rollup 插件）将项目信息注入到入口文件\n- vite4，主要是根据 transformIndexHtml 这个钩子（vite 插件特有），对 index.html 注入项目信息\n\n\u003e 本质上就是给你的项目入口/所有 html 插入一串 js 代码。\n\n# 安装\n\n```sh\nnpm i billd-html-webpack-plugin --save-dev\n```\n\n# 使用前注意\n\n**请确保你的 package.json 里面有以下字段：**\n\n```json\n{\n  \"name\": \"xxxxxxxxxx\",\n  \"version\": \"xxxxxxxxxx\",\n  \"repository\": {\n    \"type\": \"xxxxxxxxxx\",\n    \"url\": \"xxxxxxxxxx\"\n  }\n}\n```\n\n# 使用\n\n## nuxt2\n\nnuxt.config.js\n\n```js\nimport BilldHtmlWebpackPlugin from 'billd-html-webpack-plugin';\n\nexport default {\n  // ...\n  build: {\n    plugins: [\n      // ...\n      new BilldHtmlWebpackPlugin({ env: 'nuxt2' }),\n    ],\n  },\n};\n```\n\n## nuxt3\n\nnuxt.config.ts\n\n```ts\nimport BilldHtmlWebpackPlugin from 'billd-html-webpack-plugin';\n\n// https://nuxt.com/docs/api/configuration/nuxt-config\nexport default defineNuxtConfig({\n  // ...\n  vite: {\n    // ...\n    plugins: [\n      // ...\n      new BilldHtmlWebpackPlugin({ env: 'nuxt3' }).config,\n    ],\n  },\n});\n```\n\n## nuxt3.6+\n\nnuxt.config.ts\n\n```ts\nimport BilldHtmlWebpackPlugin from 'billd-html-webpack-plugin';\n\n// https://nuxt.com/docs/api/configuration/nuxt-config\nexport default defineNuxtConfig({\n  // ...\n  vite: {\n    // ...\n    plugins: [\n      // ...\n      new BilldHtmlWebpackPlugin({ env: 'nuxt3-6' }).config,\n    ],\n  },\n});\n```\n\n## vuecli4\n\nvue.config.js\n\n```js\nconst BilldHtmlWebpackPlugin = require('billd-html-webpack-plugin').default;\n\nmodule.exports = {\n  // ...\n  chainWebpack: (config) =\u003e {\n    // ...\n    config\n      .plugin('billd-html-webpack-plugin')\n      .use(BilldHtmlWebpackPlugin, [{ env: 'vuecli4' }]);\n  },\n};\n```\n\n## vuecli5\n\nvue.config.js\n\n```js\nconst { defineConfig } = require('@vue/cli-service');\nconst BilldHtmlWebpackPlugin = require('billd-html-webpack-plugin').default;\n\nmodule.exports = defineConfig({\n  // ...\n  chainWebpack: (config) =\u003e {\n    // ...\n    config\n      .plugin('billd-html-webpack-plugin')\n      .use(BilldHtmlWebpackPlugin, [{ env: 'vuecli5' }]);\n  },\n});\n```\n\n## webpack4\n\nwebpack.config.js\n\n```js\nconst HtmlWebpackPlugin = require('html-webpack-plugin');\nconst BilldHtmlWebpackPlugin = require('billd-html-webpack-plugin').default;\n\nmodule.exports = {\n  // ...\n  plugins: [\n    // ...\n    new HtmlWebpackPlugin(),\n    // 请确保billd-html-webpack-plugin插件在html-webpack-plugin插件后面\n    new BilldHtmlWebpackPlugin({ env: 'webpack4' }),\n  ],\n};\n```\n\n## webpack5\n\nwebpack.config.js\n\n```js\nconst HtmlWebpackPlugin = require('html-webpack-plugin');\nconst BilldHtmlWebpackPlugin = require('billd-html-webpack-plugin').default;\n\nmodule.exports = {\n  // ...\n  plugins: [\n    // ...\n    new HtmlWebpackPlugin(),\n    // 请确保billd-html-webpack-plugin插件在html-webpack-plugin插件后面\n    new BilldHtmlWebpackPlugin({ env: 'webpack5' }),\n  ],\n};\n```\n\n## next12\n\nnext.config.js\n\n```js\nconst BilldHtmlWebpackPlugin = require('billd-html-webpack-plugin').default;\n\nconst nextConfig = {\n  // ...\n  webpack: (config) =\u003e {\n    config.plugins = [\n      ...config.plugins,\n      // ...\n      new BilldHtmlWebpackPlugin({ env: 'next12' }),\n    ];\n    return config;\n  },\n};\n\nmodule.exports = nextConfig;\n```\n\n## vite4\n\nvite.config.ts\n\n```ts\nimport BilldHtmlWebpackPlugin from 'billd-html-webpack-plugin';\nimport { defineConfig } from 'vite';\n\n// https://vitejs.dev/config/\nexport default defineConfig({\n  // ...\n  plugins: [\n    // ...\n    new BilldHtmlWebpackPlugin({ env: 'vite4' }).config,\n  ],\n});\n```\n\n\u003e 注意：如果 package.json 里面配置了 `\"type\": \"module\"` ，则需要添加.default：`new BilldHtmlWebpackPlugin.default({ env: 'vite4' }).config`\n\n# 配置\n\n## 打印选项\n\n```js\nimport BilldHtmlWebpackPlugin from 'billd-html-webpack-plugin';\n\nnew BilldHtmlWebpackPlugin({\n  env: 'nuxt2',\n  log: {\n    pkgName: true, // pkg名称\n    pkgVersion: true, // pkg版本\n    pkgRepository: false, // 不显示pkg仓库\n    commitSubject: false, // 不显示git提交主题\n    commitBranch: true, // git提交分支\n    committerDate: true, // git提交日期\n    commitHash: true, // git提交哈希\n    committerName: true, // git提交者名字\n    committerEmail: true, // git提交者邮箱\n    lastBuildDate: true, // 最后构建日期\n  },\n});\n```\n\n## 获取打印数据\n\n\u003e 注意：只支持在 node 环境执行\n\n```js\nimport { logData } from 'billd-html-webpack-plugin';\n\nconsole.log(\n  logData({\n    pkgRepository: false, // 不显示pkg仓库\n  })\n);\n// {\n//   pkgName: 'xxxxx',\n//   pkgVersion: '0.0.1',\n//   pkgRepository: '',\n//   commitSubject: 'xxxxxx',\n//   commitBranch: 'feat-webrtc',\n//   committerDate: '2023-01-06 20:58:03 +0800',\n//   commitHash: 'dsggggsdgdsgsdgs',\n//   committerName: 'shuisheng',\n//   committerEmail: '2274751790@qq.com',\n//   lastBuildDate: '2023/1/10 11:11:56',\n// };\n```\n\n# 调试\n\n- 查看列表\n\n```bash\npnpm list --global\n```\n\n- 卸载\n\n```bash\npnpm uninstall --global billd-html-webpack-plugin\n```\n\n- 在本地的 billd-html-webpack-plugin 项目目录下执行：\n\n```bash\npnpm link --global --dir=./\n```\n\n- 启动项目：\n\n```bash\nnpm run dev\n```\n\n- 在用到 billd-html-webpack-plugin 的项目目录下执行：\n\n```bash\npnpm link --global billd-html-webpack-plugin\n```\n\n# 发布\n\n```bash\nnpm adduser --registry=https://registry.npmjs.org/\n```\n\n# 引用\n\n- [https://git-scm.com/docs/git-show](https://git-scm.com/docs/git-show)\n- [https://github.com/jantimon/html-webpack-plugin](https://github.com/jantimon/html-webpack-plugin)\n- [https://webpack.docschina.org/api/compiler-hooks/](https://webpack.docschina.org/api/compiler-hooks/)\n- [https://webpack.docschina.org/api/compilation-hooks/](https://webpack.docschina.org/api/compilation-hooks/)\n- [https://webpack.docschina.org/api/compilation-hooks/#processassets](https://webpack.docschina.org/api/compilation-hooks/#processassets)\n\n# 源码\n\n[https://github.com/galaxy-s10/babel-plugin-import-billd](https://github.com/galaxy-s10/babel-plugin-import-billd)，欢迎 star~\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgalaxy-s10%2Fbilld-html-webpack-plugin","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgalaxy-s10%2Fbilld-html-webpack-plugin","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgalaxy-s10%2Fbilld-html-webpack-plugin/lists"}