webpack(高级)--创建自己的loader 同步loader 异步loader loader参数校验

webpack

创建自己的loader

loader是用于对模块的源代码进行转换（处理） 我们使用过很多loader 比如css-loader style-loader babel-loader

我么如果想要自己创建一个loader

首先创建webpack环境
pnpm add webpack webpack-cli -D

之后创建loader模块
loader本质上是一个导出为函数的javascript模块
loader runner库会调用这个函数 然会将上一个loader产生的结果或者资源文件传入进去

编写一个m-loader-01.js模块 这个函数会接收三个参数
content:资源文件的内容
map:sourcemap相关的数据
meta:一些元数据

module.exports = function (content, map, meta) {console.log("01" + content);return content;
};

建立webpack.config.js文件
并使用自己的loader

const path = require("path");module.exports = {mode: "development",entry: "./src/main.js",output: {path: path.resolve(__dirname, "./build"),filename: "bundle.js",},module: {rules: [{test: /\.js$/,use: ["./m-loader/m-loader-01.js","./m-loader/m-loader-02.js","./m-loader/m-loader-03.js",],},],},
};

具体文件目录

打包后的效果

同步的loader

什么是同步的loader
默认创建的loader就是同步的loader
这个loader必须通过return 或者this.callback来返回结果 交给下一个loader来处理
通常在有错误的情况下 我们会使用this.callback

返回值传递给下一个loader

module.exports = function (content) {console.log("03" + content);return content + 'aaaa';
};

module.exports = function (content) {console.log("02" + content);return content + "bbbb";
};

module.exports = function (content, map, meta) {console.log("01" + content);return content;
};

但是当如果有异步操作时 是不会等待的 会返回undefined

module.exports = function (content) {setTimeout(() => {console.log("03" + content);return content + "aaaa";}, 10000);
};

解决方法 使用异步loader （后面会提到）
使用callback传递 优点是可以处理错误信息
第一个参数：错误信息
第二个参数：传递给下一个loader的内容

module.exports = function (content) {//this绑定对象const callback = this.callback;callback(null, "哈哈哈");
};

异步loader

什么是异步loader
有时候我们使用loader时会进行一些异步操作
我们希望在异步操作完成后 在返回这个loader处理的结果
这时候我们就要使用异步的loader
loader-runner已经在执行loader时给我们提供了方法 让loader变成一个异步的loader

module.exports = function (content) {//this绑定对象const callback = this.async();setTimeout(() => {console.log("03" + content);callback(null, content + "aaaa");}, 2000);
};

给loader传递参数

我们可以使用getOptions

module.exports = function (content) {//1.获取使用loader时 传递进来的参数const options = this.getOptions();console.log(options);console.log("04", content);return content;
};

const path = require("path");module.exports = {mode: "development",entry: "./src/main.js",output: {path: path.resolve(__dirname, "./build"),filename: "bundle.js",},module: {rules: [{test: /\.js$/,use: [// "./m-loader/m-loader-01.js",// "./m-loader/m-loader-02.js",// "./m-loader/m-loader-03.js",{loader: "./m-loader/m-loader-04.js",options: {name: "kobe",age: 24,},},],},],},
};

校验参数

我们可以通过一个webpack官方提供的校验库schema-utils 安装对应的库
pnpm add schema-utils

const { validate } = require("schema-utils");
const loader04Schema = require("../schema/loader-04-schema.json");module.exports = function (content) {//1.获取使用loader时 传递进来的参数const options = this.getOptions();console.log(options);//2.校验参数是否符合规则validate(loader04Schema, options);console.log("04", content);return content;
};

创建schema文件与规则文件

{"type": "object","properties": {"name": {"type": "string","description": "请输入名称,并且是string类型"},"age": {"type": "number","description": "请输入年龄,并且是number类型"}}
}

文件目录