webpack loader

1、分类

2、执行顺序

配置类型

执行顺序是 loader1>loader2>loader3

3、使用方式

自己的第一个loader

同步loader

javascript 复制代码
/**
 * loader 就是一个函数
 * 当webpack 解释资源时, 会调用相应的loader去处理
 * loader 接收到文件内容作为参数,返回文件内容
 * @param {*} content 文件内容
 * @param {*} map SourceMap
 * @param {*} meta 别的loader 传递过来的数据
 */
module.exports = function(content, map, meta){
    console.log('main.js 传过来的数据', content);
    return content
}

/**
 * 当需要传递参数给其他 loader 的loader 写法
 */

// module.exports = function (content,map, meta) {
//     // 第一个参数: err 代表是否有错误
//     // 第二个参数:content 处理后的内容
//     // 第三个参数: source-map 继续传递source-map
//     // 第四个参数:meta 给下一个loader传递参数
//     this.callback(null,content,map,meta);
// }

会在vscode 终端看到

异步loader (同步loader不能调用异步方法)

javascript 复制代码
module.exports = function(content, map, meta){
    const callback = this.async()

    setTimeout(()=>{
        console.log('异步操作');
        callback(null, content, map, meta)

    }, 1000)
}

raw loader,处理图片、svg等时会用到

javascript 复制代码
// 同步异步操作均可以
module.exports = function(content, map, meta){
    console.log('raw-loader Buffer数据流', content);
    return content
}

module.exports.raw = true

目前 只有 main.js 文件

javascript 复制代码
console.log('hello word');

patch loader

执行顺序

javascript 复制代码
// pitch-loader1.js
module.exports = function(content, map, meta){
    console.log('pitch-loader1');
    return content
}

module.exports.pitch = function(content, map, meta){
    console.log('pitch1');
}


//  pitch-loader2.js
module.exports = function(content, map, meta){
    console.log('pitch-loader2');
    return content
}

module.exports.pitch = function(content, map, meta){
    console.log('pitch2');
}

// pitch-loader.js
module.exports = function(content, map, meta){
    console.log('pitch-loader3');
    return content
}

module.exports.pitch = function(content, map, meta){
    console.log('pitch3');
}

webpack.config.js 配置

打印结果

如果patch中有return 则不糊执行后续的操作,而是直接返回到上一个loader执行,如果没有就不用执行,下面是在loader中有返回值的意思,直接返回到loader执行操作

4、loader Api

this.getOptions获取options

schema.json

打包后文件中就会多出坐着相关信息

5、简单重写一下常用的部分loader

babel-loader

javascript 复制代码
const babel = require('@babel/core')
const schema = require("./schema.json")

module.exports = function(content, map, meta){
    // 获取webpack 使用这个loader 时的options配置项
    const callback = this.async()
    const options = this.getOptions(schema)

    babel.transform(content, options, function(err, result){
        if(err) callback(err)
        else callback(null, result.code)
    })
}

schema.json

javascript 复制代码
{
    "type":"object",
    "properties":{
        "presets":{
            "type": "array"
        }
    },
    "additionalProperties": false
}

webpack 中的使用

file-loader (使用到this.emitFile函数)

webpack 配置

stylle-loader

主要作用,通过js代码创建一个style标签 ,然后将样式代码加进去

这里 module.exports = function(){} 空函数即可

如果,想要更深一步学习loader, 可以去看看常用的loader的源码

相关推荐
理想不理想v2 天前
webpack最基础的配置
前端·webpack·node.js
臣妾没空2 天前
全栈里程碑二:前端基础建设
webpack
Domain-zhuo2 天前
如何利用webpack来优化前端性能?
前端·webpack·前端框架·node.js·ecmascript
初学者7.2 天前
Webpack学习笔记(2)
笔记·学习·webpack
理想不理想v2 天前
webpack如何自定义插件?示例
前端·webpack·node.js
森叶2 天前
【附源码】Electron Windows桌面壁纸开发中的 CommonJS 和 ES Module 引入问题以及 Webpack 如何处理这种兼容
webpack·electron
初学者7.2 天前
Webpack学习笔记(3)
笔记·学习·webpack
Byron Loong2 天前
Python+OpenCV系列:【打卡系统-工具模块设计】工具模块深度揭秘,考勤智能化的核心秘籍!
python·opencv·webpack
初学者7.3 天前
Webpack学习笔记(4)
学习·webpack
理想不理想v4 天前
免登陆是什么?
服务器·前端·javascript·vue.js·webpack