浅试一下Webpack 自定义 plugin

Webpack构建时，生成版本号json文件

1、在项目src下新建plugin文件夹，新建version-webpack-plugin.js如下：

const fs = require('fs')
class VersionPlugin {
  apply(compiler) {
  // emit 是异步 hook，使用 tapAsync 触及它，还可以使用 tapPromise/tap(同步)
    compiler.hooks.emit.tap('Version Plugin', (compilation) => {
      const outputPath = compiler.path || compilation.options.output.path
      const versionFile = outputPath + '/version.json'
      const timestamp = Date.now() // 时间戳作为版本号
      const content = `{"version": "${timestamp}"}`
      // 判断outputPath路径是否存在，若路径存在则返回 true，否则返回 false
      if (!fs.existsSync(outputPath)) {
      // 不存在则同步地创建目录。 返回 undefined 或创建的第一个目录路径（如果 recursive 为 true）
        fs.mkdirSync(outputPath, { recursive: true })
      }
      // 生成json文件
      fs.writeFileSync(versionFile, content, { encoding: 'utf8', flag: 'w' })
    })
  }
}
module.exports = { VersionPlugin }

2、在vue.config.js中引用该plugin，如下：

const { VersionPlugin } = require('./src/plugin/version-webpack-plugin.js') // 头部引入
...
configureWebpack: (config) => { 
     config.plugins.push(new VersionPlugin()) // 可加个条件，production 环境才使用该插件
}
...

3、在每次执行webpack构建命令，都会在dist目录下生成一个version.json文件，里面有一个字段叫 version，值是构建时的时间戳，每次构建都会生成一个新的时间戳