webpack4.0——自定义loader

// 函数 声明式函数 不可以是箭头函数 // loader有许多属性都挂载在this上面
// 函数 必须有返回值
// 如何返回多值   //this.callback(null, result)
// 如何处理异步逻辑 // 使用this.async()返回的callback处理异步
// 如何处理多个自定义loader
module.exports = function (source) {//   console.log(this.query);//   console.log(source);const callback = this.async(); // 使用this.async()返回的callback处理异步setTimeout(() => {const result = source.replace("老韩", this.query.name);callback(null, result);}, 2000);//   this.callback(null, result);
};

自定义多个loader   这个是最下面那张图的简写方式

module: {rules: [{test: /\.js$/,use: ["replace-loader",{loader: "replace-loader-async",options: {name: "韩明洋",},},],},],},resolveLoader: {//帮webpack查找loadermodules: ["./node_modules", "./myLoaders"],},