简单webpack插件-插入注释

325 阅读1分钟

设计一个webpack插件,可以在构建后的js文件开头插入一段注释。注释的内容可以配置。

  • plugins/awesome-webpack-plugin.js中编写插件
const { RawSource } = require('webpack-sources')
const fs = require('fs')
const path = require('path')
const util = require('util')

class MyAwesomeWebpackPlugin {
  constructor(options) {
    // 传入的配置
    this.options = options
    // 插件名
    this.PLUGIN_NAME = 'MyAwesomeWebpackPlugin'
  }
  apply(compiler) {
    const output = compiler.options.output
    // webpack中的output配置对象
    console.log(output)
    // 编译输出地址
    const outputPath = output.path
    compiler.hooks.done.tap(
      this.PLUGIN_NAME,
      async (stats) => {
        const assets = stats.compilation.assets
        // 这里也能拿到output配置对象
        console.log(stats.compilation.options.output.path)
        // [
        //   'img/logo.82b9c7a5.png',
        //   'css/app.09e84613.css',
        //   'js/app.441c47f8.js',
        //   'js/chunk-vendors.7ea2ef8f.js',
        //   'js/app.441c47f8.js.map',
        //   'js/chunk-vendors.7ea2ef8f.js.map',
        //   'index.html',
        //   'favicon.ico'
        // ]
        // assets对象的键是最终生成的文件地址,值是一个对象
        console.log(Object.keys(assets))
        const urls = Object.keys(assets)
        for (let url of urls) {
          const temp = url.split('.')
          const isJSFile = temp[temp.length - 1] === 'js'
          if (isJSFile) {
            const fileUrl = path.join(outputPath, url)
            const comment = this.options.comment || `/* some comment */`
            // 读取内容后将注释添加到开头再写入文件
            // 有没有更好的方法?
            /* fs.access(fileUrl, fs.constants.F_OK, (err) => {
              if (err) {
                console.error(err)
                return
              }
              fs.readFile(fileUrl, (err, data) => {
                if (err) {
                  console.error(err)
                  return
                }
                const newData = `${comment}\r\n${data}`
                fs.writeFile(fileUrl, newData, (err) => {
                  if (err) {
                    console.error(err)
                    return
                  }
                  console.log('The file has been saved!')
                })
              })
            }) */
            // 换种写法
            const access = util.promisify(fs.access)
            const readFile = util.promisify(fs.readFile)
            const writeFile = util.promisify(fs.writeFile)
            try {
              await access(fileUrl, fs.constants.F_OK)
              const data = await readFile(fileUrl)
              console.log(data) // 读取的buffer格式数据
              const newData = `${comment}\r\n${data}`
              writeFile(fileUrl, newData)
            } catch (error) {
              console.error('err', error)
            }
          }
        }
        console.log(new RawSource(JSON.stringify({ test: 1 })))
      }
    )

  }
}

module.exports = MyAwesomeWebpackPlugin
  • vuc-cli生成的项目中,在vue.config.js文件中使用webpack插件
const MyAwesomeWebpackPlugin = require('./plugins/awesome-webpack-plugin')
module.exports = {
  configureWebpack: {
    plugins: [
      new MyAwesomeWebpackPlugin({
        comment: `/* other comment */`
      })
    ]
  }
}