webpack loader自定义编写

Posted 橙云生

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了webpack loader自定义编写相关的知识,希望对你有一定的参考价值。

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-utilswebpack内置的模块, 不需要安装, 可以直接使用。
  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‘
 					}
 				}
 			]
 		}
 	]
 }

以上是关于webpack loader自定义编写的主要内容,如果未能解决你的问题,请参考以下文章

自定义loader基础知识

webpack配置之自定义loader

webpack 底层原理

Webpack4 自定义 Loader

前端工程化7:自定义实现Webpack中的Loader和Plugin

Webpack自定义loader的执行顺序实战分析