webpack loader自定义编写

Posted 2020-12-22 橙云生

loader

• 文档定义

loader 用于对模块的源代码进行转换。loader 可以使你在 import 或"加载"模块时预处理文件。因此，loader 类似于其他构建工具中“任务(task)”，并提供了处理前端构建步骤的强大方法。loader 可以将文件从不同的语言（如 TypeScript）转换为 javascript，或将内联图像转换为 data URL。loader 甚至允许你直接在 JavaScript 模块中 import CSS文件！

• 编写
• 本质上一个loader就是一个node模块，也就是一个js文件。
• 这个文件导出一个函数, 导出的这个函数接收一个 source参数， 用来接受，webpack传过来的文件源码
• 这个函数返回一个新的source 供链式调用。
• 以字符串替换为例, loader代码如下

const  loaderUtils = require(‘loader-utils‘)
module.exports = function (source) {
	const  options = loaderUtils.getOptions(this)  || {}
	const {key = ‘like‘, value = ‘?‘} = options;
	const  re = new RegExp(key,‘ig‘)
	const res = source.replace(re,value)
	return res
}

1. loader-utils是webpack内置的模块， 不需要安装， 可以直接使用。
2. 通过 loader-utils下的 getOptions方法，获取 webpack配置loader时的参数。

• 自定义loader的使用

1. 可以发布npm包(参考npm发布包的相关使用)
2. 本地使用

• 本地使用
• 创建loader文件夹 专门存放自定义的loader文件
• 由于webpack默认的loader是从 node_modules文件夹下查找的。所以需要配置路径, 让webpack能找到你本地的loader：
• 有两个方式配置loader路径

module:{
		rules:[
			{
				test:/.js$/,
				use:[
					{
						loader:path.resolve(‘./loader/k-loader.js‘),
						options:{
							value:‘LIKE‘
						}
					}
				]
			}
		]
	}

通过webpack的 resolveLoader扩展 loader目录。

 resolveLoader:{
 	modules:[
 		‘node_modules‘,
 		path.resolve(__dirname, ‘./loader‘)
 	]
 },
 module:{
 	rules:[
 		{
 			test:/.js$/,
 			use:[
 				{
 					loader:‘k-loader‘, 
 					options:{
 						value:‘LIKE‘
 					}
 				}
 			]
 		}
 	]
 }