npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2026 – Pkg Stats / Ryan Hefner

webpack-plugin-auto-version

v1.2.3

Published

webpack plugin for version

Downloads

39

Readme

自动版本管理

以 webpack 插件方式执行

feature

  • 自动插入 js,css,html 首行版本标记(完成和 HtmlWebpackPlugin 兼容)
  • 自动版本目录管理
  • 自动清理旧版本目录
  • 支持标签配置,动态替换版本
  • 支持[version]名称,能够动态替换资源名称中版本标签,例如[version].[name].xx 会自动替换 v3.2.2.main.xx
  • 打包报错,命令行 toast 提示
  • 支持 -- patch, -- minor, -- major 命令方式打包
  • 兼容 roadhogv2.0 以上(如果使用动态导入则需要 isAsyncJs 为 true)
  • 兼容 webpack4.0

使用方法

const WebpackAutoVersionPlugin = require('webpack-auto-version-plugin')
module.exports = {
  //...
  plugins: [
    new WebpackAutoVersionPlugin({
      // 文件名替换标记 [version] -> v1.2.2
      filenameMark: options.filenameMark,
      // 版权名称
      copyright: options.copyright || '[webpack-plugin-auto-version]',
      // 保存的时候格式化package.json的indent
      space: options.space || 2,
      // 是否自动清理老版本
      cleanup: options.cleanup || false,
      // 是否检测资源内的标签
      inspectContent: options.inspectContent || !!options.template,
      // 自定义资源内版本替换模板 [VERSION]version[/VERSION]
      template: options.template || `[${this.copyright}]version[/${this.copyright}]`,
      // 自定义忽略后缀,默认是['.html']忽略html文件打入版本文件夹
      ignoreSuffix: [], // 忽略的后缀或者文件关键词
      isAsyncJs: false,
      htmlTempSuffix: ['.html', '.vm', '.ejs', '.handlbars']
    })
  ]
}

semver

版本: 1.0.0

bash 使用方法:

$ npm run build -- major # 2.0.0
$ npm run build -- minor # 1.1.0
$ npm run build -- patch # 1.0.1

标签使用方法

options:

{
  "template": "[VERSION]version[/VERSION]"
}

roadhog 用法

roadhog 初始化会在public目录下有一个 index.html,该文件默认资源信息都是 link 和 script 都是 index,在 build 的时候,直接复制过去了,so 做法:

新建 index.ejs(不能是 index.html,详细见:#709)

建立 webpack.config.js

const WebpackPluginAutoPlugin = require('webpack-plugin-auto-version')

module.exports = (config) => {
  if (process.env.NODE_ENV === 'production') {
    config.plugins.push(
      new WebpackPluginAutoPlugin({
        isAsyncJs: true
      })
    )
  }
  return config
}

然后版本就可以正确看到啦。

template 会被自动替换成和 package.json 对应的版本号

next

  • 支持 .editconfig 配置文件
  • 支持配置 package.json 配置文件,支持多项目
  • 支持开发环境
  • 支持 webpack 钩子函数
  • 支持版本判断
  • 支持 .versionrc|.versionrc.js|.versionrc.json配置

change log

v1.2.2

  • 修复ignoreSuffix兼容js和css文件判断

v1.2.1

  • 修复与webpack-copy-plugin兼容问题
  • 增加htmlTempSuffix选项

v1.2.0

  • 增加对 roadhog 支持
  • 修复部分问题