webpack的loader

webpack的loader认知

概念：

loader在webpack里充当 “转化器” 的角色，我们都知道转换器转换器，就是把一种事物通过一些特殊的加工把它原本的形态按照既定的规则转换成另外一种形态。

从语法角度看，loader就是一个普通的Node.js模块，只是必须以函数格式导出来供使用。如果有必要可以使用一切Node.js功能模块。

从功能角度看，一个loader是在应用中作用于指定格式的资源文件并将其按照一定格式转换输出。例如：sass-loader将scss文件转换为标准css文件输出。

举个例子：

我们都知道JavaScript在从ES5升级到ES6时语法上做了比较大的革新，增加了许多新颖的语法，比如箭头函数、变量声明方式、结构赋值等等。而ES6的语法即是我们前端现在的主力军。但是语法的升级需要同步的等待代码运行环境的升级，在这个过程中，就会出现新的代码语法无法在旧的运行环境中执行的问题，也就是我们所说的浏览器不兼容等等的原因。那么如果我们想让旧的浏览器或旧的运行环境去运行我们的新语法，我们应该怎么办呢？这里就用到了我们webpack里面的loader了，应该用什么loader担负起这项重任呢，它就是babel-loader，任务就是把es6的语法转化为es5的语法，以便执行环境能够识别并通过它自己的表现形式去执行代码。

来看个例子：es6里的箭头函数，箭头函数的特点和优势这里就不列举了，感兴趣的可以自己去总结。

babel input：ES6箭头函数语法

	[1, 2, 3].map((n) => n + 1);

babel output：ES5函数语法

	[1, 2, 3].map(function(n) {
 		 return n + 1;
	});

我们可以看到，通过babel-loader的转换，es6的箭头函数被转换成了es5的我们常规的函数语法，此时，无论是低版本浏览器还是其他的执行环境，都可以运行这段代码了。当然了，我们不能单独的使用babel-loader，还需要其他的两个包来做配合：babel-core、babel-prset-env，babel-core的作用就是把js代码解析成ast（抽象语法树），抽象语法树的概念在这里(AST)。

babel-preset-env可以称得上是babel的转码神器了，因为现在在不同的浏览器和平台chrome, opera,edge, firefox, safari, ie, ios, android, node, electron不同的模块"amd"，“umd”，“systemjs”，“commonjs”，这些ES运行环境对ES6,ES7,ES8的语法支持不一，为了充分发挥新版es的特性，我们需要在特定的平台上执行特定的转码规则，就像是按需转码的意思。

既然loader这么好用，那么我们自己可不可以写自己的loader来用呢，答案也是肯定的，接下来我们就来看看我们应该怎么来编写并使用一个loader：

①、首先初始化一个项目

	npm init -y

②、分别创建webpack.config.js配置文件，入口文件index.js，自己的loader文件myLoader.js

③、在package.json中添加打包命令"start"

	"scripts": {
	    "start": "webpack",
	    "test": "echo \"Error: no test specified\" && exit 1"
    },

④、我们在index.js文件里就打印一个字符串，然后我们在myLoader.js里替换这个字符串里面的Love

	console.log('I Love You !')

⑤、在myLoader.js中写我们的代码，这里的例子只是做了个替换字符串内容的功能

	module.exports = function (source) {
	    return source.replace('Love', 'hate')
	}

⑥、在webpack.config.js里做一下简单配置

	const path = require('path')
	module.exports = {
	    mode: 'development',
	    entry: {
	        main: './index.js'
	    },
	    output: {
	        path: path.resolve(__dirname, 'dist'),
	        filename: '[name].js'
	    },
	
	    module: {
	        rules: [{
	            test: /.js/,
	            use: [{
	                loader: path.resolve(__dirname, './myloader.js'),
	                options: {/** 测试自己编辑的loader*/}
	            }]
	        }]
	    }
	}

至此我们就把所有的准备工作做完了，接下来我们来验证一下，我们编写的loader有没有起作用，index.js里面我们打印的字符串中Love有没有被替换成hate

我们先来打一下包：

	npm run start

我们的文件夹里会多出一个dist文件夹，里面是index.js文件打包后的main.js文件

运行命令看一下我们的main.js文件打印的内容是什么

	node main.js

	输出结果：
	PS C:\Users\pc\Desktop\test\dist> node main.js
	I Love You !
	PS C:\Users\pc\Desktop\test\dist> npm run start
	
	> test@1.0.0 start C:\Users\pc\Desktop\test
	> webpack
	
	Hash: b2c8dc7bc6915fdcb346
	Time: 88ms
	Built at: 2020/07/06 下午6:04:15
	  Asset      Size  Chunks             Chunk Names
	main.js  3.77 KiB    main  [emitted]  main
	Entrypoint main = main.js
	[./index.js] 27 bytes {main} [built]
	PS C:\Users\pc\Desktop\test\dist> node main.js
	I hate You !
	PS C:\Users\pc\Desktop\test\dist>

好了，一个自己的编写的loader就完成了。

本文地址：https://blog.csdn.net/qq_43592800/article/details/107164252