设计一个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 */`
})
]
}
}