webpack4 自定义插件plugins

我不是女神ヾ 2021-07-24 22:45 579阅读 0赞

插件即是一个class类,wb会调用其中的apply方法
    涉及到的内容:compiler、tapable和compilation
    
    配置:
    	class X{
    		constructor(options={}){
    			(1)通过schema.json文件定义参数格式并导入
    			(2)使用schema-util库的validate方法验证参数
    			(3)this.options=options;   插件传入的参数
    		}
    		apply(compiler){
    			compiler.options获取文件的所有属性
    				compiler.options.context:获取当前文件所在根目录的绝对路径
    				compiler.options.output.path; 获取资源输出路径
    				
    			方式一:	
    				compiler.hooks.钩子.绑定方式('事件名称',(回调参数)=>{
    					compilation在thisCompilation钩子中初始化
    					compilation的钩子监听模块
    						compilation.hooks.钩子.绑定方式
    					compilation的方法对打包资源进行操作
    					异常处理:
    						throw new Error('异常信息');
    						compilation.warnings.push('异常信息')
    						compilation.errors.push('异常信息')
    				})
    				
    			方式二:
    				compiler.plugin('钩子名称',(参数,若有回调)=>{
    					...
    				})
    		}
    	}
    	module.exports=X;
    	
    	在webpack.config.js中导入并配置在plugins中
    
    相关方法:
    	compilation.assets[文件名].source();  获取到打包资源中对应文件的内容源码
    	
    添加文件时,需要满足webpack形式的文件格式:
    	方式一:
    		手动添加需要重写size和source方法
    		compilation.assets['文件名.后缀名']={
    			size(){return 文件大小},
    			source(return 文件内容)
    		}
    	方式二:
    		const { RawSource } = webpack.sources;  webpack4可能需要下载,const {RawSource}=require('webpack-sources')
    		new RawSource(文件内容);  文件内容可以是buffer二进制流

webpack文件格式:  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70]![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70 1]

代码示例:  
添加指定目录下的文件到指定文件:  
webpack.config.js:

const path=require('path')
    const Copy=require('./plugins/copy')
    
    module.exports = { 
      mode: 'development',
      plugins: [
        new Copy({ 
          from: 'src',
          to:'assets',
          ignore:['**/index.html']
        })
      ]
    }

plugins:

添加文件:

自定义压缩插件:  
将打包的所有内容压缩成指定名称的.zip文件并输出  
使用到了JSZip库

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20210122163627380.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70 1]: /images/20210724/566525b6d89748bb93853f74004adbd4.png