webpack4 自定义loader

短命女 2021-07-24 19:18 410阅读 0赞

loader:(文档:https://webpack.docschina.org/api/loaders/)
    	(1)解析从前往后,但调用为从后到前(loader为module.exports暴露的方法,而非.pitch)
    	(2)解析从前往后,module.exports.pitch方法会从前到后调用
    	
    	 如果有返回值
    		会停止当前pitch的loader,并将返回值给按照pitch执行顺序的上一个loader,然后从上一个loader开始按照loader的执行顺序开始执行
    		
    			module.exports.pitch=function(remainingRequest,previousRequest,data){
    			 	remainingRequest:按照pitch执行顺序该loader之后的loader,并会写成行内loader形式
    			 		如:D:\webpack_code\webpack4\webpack4_class3\loaders\loader3.js!D:\webpack_code\webpack4\webpack4_class3\src\index.js
    			 	previousRequest:按照pitch执行顺序该loader以及该loader之前的loader,并会写成行内loader形式
    			 		如:当前在loader2
    			 		D:\webpack_code\webpack4\webpack4_class3\loaders\babel-loader2.js!D:\webpack_code\webpack4\webpack4_class3\loaders\loader1.js
    			    data:用于当前loader和pitch传递数据
    			    	如:pitch:data.name='jeff'
    			    	  loader:this.data获取
    			 		
    				如按照less为例,当前方法在style-loader
    					remainingRequest:路径/less-loader!css-loader!处理的less文件
    						即行内loader,如果直接使用会同时调用normal的loader等,使用示例看底部
    					return xx;
    			}
    			
    	(3)通过添加module.exports.raw = true;	获取的文件内容为二进制字符串
    		默认情况下，资源文件被转换为UTF-8字符串并传递给加载器。通过将raw标志设置为true，加载器将接收到原始缓冲区。允许每个加载器以字符串或缓冲区的形式交付其结果。编译器在加载器之间转换它们。
    	(4)当定义多个loader时,第一个执行loader的return返回结果将作为第二个loader的第一个参数,其后同理
    		当上一个loader生成了sourceMap(如babel-loader),下一个loader需要第二个参数接收返回出去,否则会丢失上一个loader的sourceMap
    	
    loader类型:
    	enforce:'pre'|'post'|'normal'
    loader执行顺序:
    	pre>normal>行内loader>post
    
    行内loader:
    	导入loader改写成'loader名称!资源路径'
    	默认还会触发其他类型loader
    		-!:不触发pre和normal类型loader	 '-!loader名称!资源路径'
    		!:不触发normal类型loader
    		!!:只要行内loader处理
    
    处理css的loader逻辑
    	less-loader:将less转化成css
    	css-loader:处理@import 'x.css'和url()等路径
    	style-loader:读入处理结果,返回脚本字符串(document.appendChild等),将css放进style标签内
    		使用postCss变成语法树处理
    		
    1、配置解析自定义loader
    	在webpack.config.js中:
    	  module: {
    	    rules: [
    	      {
    	        test: /\.js$/,
    	        use: [ 执行顺序从后往前,不需要添加后缀,未配置resolveLoader需要使用绝对路径如:path.resolve(__dirname,'loader/loader.js')
    	          'loader',
    	          'loader2',
    	          'loader3'
    	        ]
    	      }
    	    ]
    	  },
    	  resolveLoader: {  用于解析webpack的loader包
    	    modules: [ 或者通过alias配置loader别名也能简化loader配置方式
    	      'node_modules',
    	      path.resolve(__dirname,'loaders')   自定义loader所在的文件夹
    	    ]
    	  }
    	  
    2、同步loader:
    	方式一:
    		module.exports = function (content, map, meta/ast) {  接收三个参数:文件的内容、sourceMap的映射信息、文件元信息(或ast)
    		 return content;	返回的即为处理后的文件内容,将作为后续loader的的一个参数
    		}
    		
    		module.exports.pitch = function(){}  匹配loader就会执行该函数
    	方式二:
    		module.exports = function (content, map, meta) {
    		  	this.callback(null,content, map, meta) 	接收四个参数:错误信息、处理后的内容、sourceMap的映射信息、文件元信息
    		  
    		}
    		
    		module.exports.pitch = function(){}
    		
    3、异步loader(会阻塞当前loader,直到调用了callback才会执行后面的loader),推荐
    
    	module.exports = function (content, map, meta) {
    	
    	  var callback = this.async();
    	  
    	  setTimeout(() => {
    	    callback(null,content)	第二个参数返回的即为处理后的文件内容
    	  },2000)
    	  
    	}
    	module.exports.pitch = function(){}
    
    4、获取传递给loader的options
    	const { getOptions } = require('loader-utils');  webpack5直接引入,webpack4需要下载
    	
    	const options = getOptions(this); options即为webpack.config.js中loader对应的options
    	
    	其他api:
    		(1)关于this(访问:https://webpack.docschina.org/api/loaders/)
    		
    			this.emitFile('文件路径','内容');	输出内容到指定文件,创建文件
    			this.resourcePath;	获取处理文件的绝对路径
    			this.addDependency(文件路径);		将文件添加进依赖,当配置watch:true,文件改变将会重新执行webpack
    			this.cacheable(false);	是否开启缓存,默认开启
    			
    			
    		(2)关于loader-utils(访问:https://github.com/webpack/loader-utils#readme)
    	   		const { getOptions,interpolateName,stringifyRequest } = require('loader-utils');
    	   		1、返回文件指定内容
    	   			const res = interpolateName(上下文环境, 通过占位符或正则匹配规则, 文件内容);
    		   			如:const interpolatedName = interpolateName(this, '[name].[ext]', {content:文件内容});
    			2、将相对路径转换成绝对路径
    				避免当项目根路径变化时,文件绝对路径也会变化。
    					stringifyRequest(上下文环境,绝对路径);
    					
    5、检验传递的options 	webpack5直接引入,webpack4需下载，官网:https://github.com/webpack/schema-utils
    
    	(1)定义schema检验.json文件
    		{
    		  "type":"object",  传递的options是一个对象
    		  "properties":{
    		    "键名":{
    		      "type":"string", 			类型
    		      "description":"描述"
    		    }
    		  },
    		  "additionalProperties":true  	是否允许追加属性,即在options内添加未在检验.json文件中定义的属性
    		}
    		
    		示例:
    		{
    		  "type": "object",
    		  "properties": {
    		    "name": {
    		      "type": "string"
    		    },
    		    "test": {
    		      "anyOf": [   满足其一
    		        { "type": "array" },
    		        { "type": "string" },
    		        { "instanceof": "RegExp" }  
    		      ]
    		    },
    		    "transform": {
    		      "instanceof": "Function"
    		    },
    		    "sourceMap": {
    		      "type": "boolean"
    		    }
    		  },
    		  "additionalProperties": false
    		}
    		
    	(2)在loader中使用			
    		const { validate } = require('schema-utils');
    		const schema = require('引入schem校验文件,无需.json后缀');
    		
    		validate(schema,options,{name:'自定义错误描述loader',baseDataPath: 'options',})
    			baseDataPath: 'options'指出是options错误,默认会报configuration object错误
    
    6、若需要调试loader
    	(1)下载
    		cnpm install -S loader-runner
    			该库可以使loader在没有webpack的环境下运行,但是可能没有webpack环境下loader中this对应的方法
    	(2)使用
    		const { runLoaders } = require('loader-runner')
    		const path = require('path');
    		const fs = require('fs');
    		
    		runLoaders({
    		  resource: path.resolve(__dirname, '../a.txt'),  要读入的文件
    		  loaders: [path.resolve(__dirname, './raw-loader.js')],  loader路径
    		  context: { minimize: true },  压缩
    		  readResource:fs.readFile.bind(fs) 使用fs来读取内容
    		  
    		}, function (err, result) {
    		    err ? console.log(err) : console.log(result);
    		    
    		    result参数:
    		    	result.result: Buffer | String	返回结果
    			 	result.resourceBuffer: Buffer	 返回的Buffer结果
    				result.cacheable: Bool  结果是可缓存的还是需要重新执行
    					可通过this.cacheable(false)关掉
    				result.fileDependencies: String[]	结果所依赖的路径(现有文件)数组
    				result.missingDependencies: String[]	结果所依赖的路径数组(不存在的文件)
    				result.contextDependencies: String[]	 结果所依赖的路径(目录)数组
    		}
    	(3)运行
    		运行该js文件即可
    
    7、异常处理
    	同步:
    		this.callback(异常信息,结果,...)
    		throw new Error('异常信息')
    	异步:
    		callback(异常,结果,...)

loader执行图:  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70]

代码示例:

const path=require('path')
    
    module.exports = { 
      mode: 'development',
      module: { 
        rules: [
          { 
            test: /\.js$/,
            // loader:'loader'
            use: [ //执行顺序从后往前
              'loader',
              'loader2',
              { 
                loader: 'loader3',
                options: { 
                  name:'jeff'
                }
              }
            ]
          }
        ]
      },
      resolveLoader: {  //用于解析webpack的loader包
        modules: [
          'node_modules',
          path.resolve(__dirname,'loaders')
        ]
      }
    }

loader:

//loader1
    //文件的内容、sourceMap的映射信息、文件元信息
    module.exports = function (content, map, meta) { 
      console.log(content, 1);
      this.callback(null,content, map, meta)
      return content;
    }
    
    module.exports.pitch = function(){ 
      console.log('loader1')
    }
    
    //loader2
    //文件的内容、sourceMap的映射信息、文件元信息
    module.exports = function (content, map, meta) { 
      console.log(content, 2);
      var callback = this.async();
    
      setTimeout(() => { 
        callback(null,content)
      },1000)
      // return content;
    }
    module.exports.pitch = function(){ 
      console.log('loader2')
    }
    
    //loader3
    const {  getOptions } = require('loader-utils');
    const {  validate } = require('schema-utils');
    const schema = require('./schema');
    
    //文件的内容、sourceMap的映射信息、文件元信息
    module.exports = function (content, map, meta) { 
      console.log(content, 3);
    
      //获取
      const options = getOptions(this);
      console.log(options);
    
      //校验
      validate(schema,options,{ name:'loader3',baseDataPath: 'options'})
    
      //第一个参数传递错误、处理后的内容、sourceMap的映射信息(可选)、文件元信息(可选)
      this.callback(null,content,map,meta)
      return;
    }
    
    module.exports.pitch = function(){ 
      console.log('loader3')
    }

自定义babel-loader:

const path=require('path')
    
    module.exports = { 
      mode: 'development',
      module: { 
        rules: [
          { 
            test: /\.js$/,
            loader:'babelLoader',
            options: { 
              presets: [['@babel/preset-env', {  targets: "defaults" }]],
    
            }
          }
        ]
      },
      resolveLoader: {  //用于解析webpack的loader包
        modules: [
          'node_modules',
          path.resolve(__dirname,'loaders')
        ]
      }
    }

自定义babel-loader.js:

const { getOptions}=require('loader-utils')
    const {  validate } = require('schema-utils');
    const babel = require('@babel/core');
    const util = require('util');
    
    const schema = require('./schema');
    
    //babel.transform用来编译代码的方法
    //util.promisify将异步方法转换成Promise
    const transform = util.promisify(babel.transform);
    
    module.exports = function (content, map, meta) { 
      const options = getOptions(this) || { };
      
      validate(schema, options, {  name: 'babelLoader' });
    
      let callback = this.async();
    
      //使用babel编译
      transform(content, options).then(({  code, map }) => { 
        callback(null, code, map, meta);
      }).catch((e) => callback(e));
    
    
      
    }

schema.json:

{ 
      "type":"object",
      "properties":{ 
        "presets":{ 
          "type":"array",
          "description":"预设"
        }
      },
      "additionalProperties":true  
    
    }

自定义babel-loader.js2:

自定义raw-loader:

const {  getOptions,interpolateName } = require('loader-utils');
    
    module.exports = function (content) { 
      const json = JSON.stringify(content)
        .replace(/\u2028/g, '\\u2028') 	//替换es6的模板字符串,避免安全问题
        .replace(/\u2029/g, '\\u2029');
      const interpolatedName = interpolateName(this, '[name].[ext]', content);
    
      console.log(interpolatedName);
    
      this.emitFile()
      return `export default ${ json}`;
    }

runLoaders使用:

const {  runLoaders } = require('loader-runner')
    const path = require('path');
    const fs = require('fs');
    
    
    runLoaders({ 
      resource: path.resolve(__dirname, 'index.less'), //要读入的文件
      loaders: [path.resolve(__dirname, './sprite-loader.js')], //loader路径
      context: {  minimize: true },  //压缩
      readResource:fs.readFile.bind(fs) //使用fs来读取内容
      
    }, function (err, res) { 
        err ? console.log(err) : console.log(res);
    })

自定义雪碧图:  
即将.css文件中的图片路径为xx?\_\_sprite的带有\_\_sprite后缀的图片合成一张图并输出图片,并修改.css文件的图片路径为输出的图片路径  
需要使用到spritesmith库来进行雪碧图的合并  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70 1]  
最后添加fs.wrieFileSync(path.join(process.cwd(),‘dist/index.less’),source)将改写后的样式文件输出

实现file-loader：  
即将代码中import导入的图片,修改为hash串命名并输出,并修改导出路径为导出的路径,即import获取的结果为修改后的路径

url-loader:  
将limit限制大小内的图片转换成base64编码,不用再生成图片,直接将编码放入src中即可,减小请求次数

pitch:  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70 2]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70]: /images/20210724/9ca878e1203a48f494053ee3cbec9a37.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70 1]: /images/20210724/bdd66c3a9b9f4a2bb84807d6a9787347.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70 2]: /images/20210724/1499231d5b6441f1bc5a8d967483ca3f.png