plugin簡(jiǎn)介

plugin的本質(zhì)是一個(gè)類，類里面有一個(gè)apply方法，apply的參數(shù)為compiler，在其上面會(huì)有一些hooks，不同的hooks對(duì)應(yīng)不同的tapable實(shí)例。

同步和異步的生命周期的plugin

webpack打包完畢觸發(fā)的hooks

class DonePlugin{apply(compiler){compiler.hooks.done.tap('DonePlugin',()=>{console.log('編譯完成')})}}class AsyncPlugin {apply(compiler){compiler.hooks.emit.tapAsync('AsyncPlugin',(compilation,cb)=>{setTimeout(()=>{cb()},1000))compiler.hooks.emit.tapPromise('AsyncPlugin',(compilation)=>{return new Promise((resolve,reject)=>{setTimeout(()=>{resolve()},1000)}))}}// 使用plugins:[new DonePlugin(),new AsyncPlugin()] 復(fù)制代碼

文件列表插件

class FileListPlugin {constructor(filename){this.filename = filename; }apply(compiler){compiler.hooks.emit.tap('FileListPlugin',(compilation)=>{// 獲取所有打包的文件let assets = compilation.assetslet content = `## 文件名 資源大小`;// [[bundle.js,{}],[index.html,{}]]Object.entries(assets).forEach([filename,statObj]=>{content+= `- ${filename} ${statObj.size()}`})assets[this.filename] = {source(){return content},size(){return content.length}}})}}// 使用plugins:[new FileListPlugin({filename:'list.md'})] 復(fù)制代碼

內(nèi)聯(lián)資源插件

將link或者script引入的方式變成內(nèi)聯(lián)的樣式。

let HtmlWebpackPlugin = require('html-webpack-plugin')class InlineSourcePlugin {constructor({match}){this.match = match;}processTag(tag,compilation){// 取出css路徑和js路徑let url = tag.attributes.href || tag.attributes.src if(this.match.test(url)){// 修改cssif(tag.tagName === 'link'){tag = {tagName:'style',innerHTML:compilation.assets[url].source()}}// 修改jsif(tag.tagName === 'script'){tag = {tagName:'script',innerHTML:compilation.assets[url].source()}}delete compilation.assets[url]; // 從打包后的資源中刪除掉}return tag;}processTags(data,compilation){let headTags = data.headTags;let bodyTags = data.bodyTags;headTags = headTags.map(tag=>{return this.processTag(tag,compilation)});bodyTags = bodyTags.map(tag=>{return this.processTag(tag,compilation)});return {...data,headTags,bodyTags}}apply (compiler) {compiler.hooks.compilation.tap('MyPlugin', (compilation) => {console.log('The compiler is starting a new compilation...')HtmlWebpackPlugin.getHooks(compilation).alterAssetTagGroups.tapAsync('MyPlugin', (data, cb) => {data = this.processTags(data,compilation);cb(null, data)})})}}module.exports = InlineSourcePlugin;// 使用plugins:[new InlineSourcePlugin({match:/\.(js|css)$/})] 復(fù)制代碼

上傳插件

let qiniu = require('qiniu');let path = require('path');class UploadPlugin {constructor(options = {}) {let { bucket = '', domain = "", accessKey = '', secretKey = '' } = options;let mac = new qiniu.auth.digest.Mac(accessKey, secretKey);let putPolicy = new qiniu.rs.PutPolicy({ scope: bucket });this.uploadToken = putPolicy.uploadToken(mac);let config = new qiniu.conf.Config();this.formUploader = new qiniu.form_up.FormUploader(config);this.putExtra = new qiniu.form_up.PutExtra();}apply(compiler){compiler.hooks.afterEmit.tapPromise('UploadPlugin',(compilation)=>{let assets = compilation.assets;let promises = [];Object.keys(assets).forEach(filename=>{promises.push(this.upload(filename));});return Promise.all(promises)})}upload(filename) {return new Promise((resolve,reject)=>{let realPath = path.resolve(__dirname,'../dist',filename)this.formUploader.putFile(this.uploadToken, filename, realPath, this.putExtra,(err,body)=>{err?reject(err):resolve(body);})});}} module.exports = UploadPlugin; 復(fù)制代碼

總結(jié)

以上是生活随笔為你收集整理的webpack系列-plugin的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。