什么是loader
webpack官方对loader的描述：
loader 用于对模块的源代码进行转换。loader 可以使你在 import 或"加载"模块时预处理文件。
loader 可以将文件从不同的语言（如 TypeScript）转换为 JavaScript，或将内联图像转换为 data URL。
loader 甚至允许你直接在 JavaScript 模块中 import CSS文件
实际项目中经常用到的几个loader
- url-loader : 可以将诸如图片的静态文件打包，对于小于某个值的图片，可以直接转为base64形式。
- less-loader : 将less转为css
- postcss-loader : 为css加上前缀如 -webkit -ms -moz ...
自己实现一个loader
一个简单的loader:
/* index.js */
console.log("loader");
/* /loader/test-loader.js */
// webpack官方推荐的工具包
const loaderUntils = require("loader-utils");
/*
* 定义一个loader处理函数 比如这个loader是用来处理.js文件的,
* source就是js文件里的代码
* 处理完成后 ，必须将内容返回
*/
module.exports = function(source) {
// options 就是 webpack.config.js 里配置loader时定义的options
const options = loaderUntils.getOptions(this);
console.log(source, options)
console.log(options);
// 将代码里的hello 替换为hello world
return source.replace("loader", "hello world")
};
webpack.config.js :
const path = require("path");
module.exports = {
mode: "development",
entry: {
main: "./src/index.js"
},
output: {
path: path.resolve(__dirname, "dist"),
filename: "[name].[hash].js"
},
module: {
rules:[{
test: /\.js$/,
use: [
{
loader: path.resolve(__dirname, "./loader/test-loader.js"),
options: {
name: "t1"
}
}
],
}]
}
}
打包结果：
image.png
需要注意的是，不要使用箭头函数来定义loader, 否则this指向会有问题
这只是最简单的情况，实际上一些loader还会有异步处理或者返回多个值的情况，需要使用callback来完成。
示例：
/* 返回多个值的情况 */
module.exports = function(source) {
const result = source.replace("loader", "hello world")
this.callback(null, result);
};
/* 需要异步处理的情况 */
module.exports = function(source) {
//定义⼀一个异步处理理 返回的就是this.callback
const callback = this.async();
setTimeout(() => {
const result = source.replace("loader", "hello world")
callback(null, result)
}, 3000)
}
编辑一个loader的步骤并不繁琐，难度取决于需要这个loader完成什么样的任务，另外设计上应该遵循 单一职责 的原则，复杂的操作可以由多个loader配合完成。
