loader相关学习

loader的使用

• loader本质上是一个导出内容为函数的JS模块；

• loader默认就可以接收上游传递过来的资源文件或则结果；

• compiler会拿到最后一个loader的产出结果，这个结果应该是string或则buffer；

• 从入口出发，找到所有依赖的模块，知道所有依赖的模块也都被loader处理之后返回结果；

• 自定义loader引用路径属性：resolveLoader，loaders为存放loader的文件目录

  resolveLoader: {
       modules: [
           path.resolve(__dirname, 'loaders')
       ]
   }
  

loader的分类

• loader的执行顺序，默认是从下到上，从右到左；
• loader可以通过enforce属性修改顺序：
  • 普通loader：没有任何配置 ；
  • 前置loader：enforce属性为pre
  • 后置loader：enforce属性为post
  • 行内loader：使用!进行分割
  • 顺序为：pre–>normal–>inline–>post

  {
       test: /\.js$/,
       use: ['pre-loader'],
       enforce: 'pre'
   }
  

  行内loader，file为js文件

  const test = require('inline-loader!./file')
  

配置符号

inline-loader为自定义loader目录下的某一个inline-loader.js文件

//!跳过`normal-loader`
const test = require('!inline-loader!./file')
//此时file.js文件就不会使用normal-loader，只会使用其他3种loader

//-!跳过normal,pre的loader
const test = require('-!inline-loader!./file')

//!!跳过normal,pre,post的loader
const test = require('!!inline-loader!./file')

获取配置参数

安装npm i loader-utils

{
        test: /\.js$/,
        use: {
        	loader:'test-loader',
        	options: {
				name:'test',
				age:40
			}
        }
    }

test-loader.js文件：

const { getOptions } = require('loader-utils')
function loader(content) {
//loader里的this就是当前loader运行时的上下文，含有很多属性
	const options = getOptions(this) || {}
	console.log('options',options)  //options { name: 'test', age: 40}
	console.log('test-loader被执行了')
	retrun content+ '//h啊哈哈'
}

module.exports = loader

参数校验

npm i -S schema-utils
test-loader.js文件：

const { getOptions } = require('loader-utils')
const { validate } = require('schema-utils')
//导入校验规则
const schemaTest require('./validatetest.json')

function loader(content) {
	//获取参数
	const options = getOptions(this) || {}
	//参数校验
	validate(schemaTest,options)
	return content
	
}

module.exports = loader

validatetest.json

{
	"type":"object",
	"properties": {
		"name":{
			"type": "string",
			"description":"输入name"
		},
		"age":{
			"type": "number",
			"description":"输入age"
		},
	}
}

异步loader

loader默认情况下loader的执行都是同步的，但是可以修改为异步

test-loader.js文件：

const { getOptions } = require('loader-utils')
function loader(content) {
	//设置异步
	const callback = this.async()

	//获取参数
	const options = getOptions(this) || {}
	
	//耗时行为
	setTimeout(_=> {
		console.log('这是一个耗时的行为')
		callback(null, content)
	},5000)
	
}

module.exports = loader

loader-utils

const { getOptions, interpolateName } = require('loader-utils')
const options = getOptions(this) || {}
const filename = interpolateName(this, options.filename,{ content })
//interpolateName hash名字

file-loader简单实现

图片来源：https://www.bilibili.com/video/BV1QM4y1N7TR?from=search&seid=9620455696337159872