webpack loader 使用

webpack.config.js

const path = require("path");

module.exports ={
    module:{
        rules:[
            {
                test: /\.js/,
                 loader: 'loder1'
                // use 执行顺序 从右向左  从下到上
                // 从上到下解析 会先执行 pitch的内容
                // 然后从下到上执行 要执行的内容
                // use: [
                //     'loader1',
                //     'loader2',
                //     {
                //        loader:'loader3',
                //         options:{
                //             name: 'yoke',
                //             age:18
                //         }
                //     }
                // ]
                loader: 'babelLoader',
                options:{
                    presets:[
                        '@babel/preset-env'
                    ]
                }
            }
        ]
    },
    // 配置loader解析规则
    resolveLoader:{
        modules:[
            'node_modules', // 默认去目录找
            path.resolve(__dirname,'loaders')
        ]
    }
}

loder1 同步

// loader is a funcction 

// 同步
/* module.exports = function (content,map,meta) {
    console.log(content);
    
    return content
} */
// 同步
module.exports = function (content,map,meta) {
    console.log(11);
    
    this.callback(null,content,map,meta)
    
   // return content
}

module.exports.pitch = function () {
    console.log('pitch 1');
}

loader2 异步

// 异步loader
module.exports = function (content,map,meta) {
    console.log(2);
    const callback  = this.async();

    setTimeout(()=>{
        callback (null,content)
    },1000)
}

module.exports.pitch = function () {
    console.log('pitch 2');
}

获取options 验证规则

const { getOptions } = require('loader-utils');
const { validate } = require('schema-utils');
const schema = require('./schema.json')
// loder is a funcction 
module.exports = function (content,map,meta) {
    // 获取options
    const options = getOptions(this)
    console.log(33,options);
    // 校验 options 是否合法

    validate(
        schema,options, {
        name:'loader3'
    })
    return content
}
module.exports.pitch = function () { 
    console.log('pitch 3');
}

schema.json 编辑options 规则

{
    "type":"object",
    "properties":{
        "name":{
            "type":"string",
            "description":"名称"
        }
    },
    "additionalProperties":true
    // 是否可追加属性
}

实现bable的 loader

const {getOptions} = require('loader-utils')
const {validate} = require("schema-utils")

const babel = require('@babel/core')
const util = require('util')

const bableSchema = require('./babelSchema.json')


// bable.transform 用来编译代码的方法
// 是一个普通异步方法
// util.promisify 将普通异步方法转换成 基于promise的异步方法
const transform = util.promisify(babel.transform)

module.exports = function(content,map,meta) {
    // 获取 loader options
    const options = getOptions(this) || {};

    validate(bableSchema,options,{
        name:'Babel Loader'
    })

    // 异步
    const callback = this.async()

    // babel编译代码
    transform(content,options)
    .then( ({code,map}) => callback(null,code,map,meta) )
    .catch( e => callback(e))
}

// schema.json
{
    "type":"object",
    "properties":{
        "persets":{
            "type":"array"
        }
    },
    "additionalProperties":true
}