webpack不再神秘 教你带你自己写一个loader

Loader的本质是什么 我们如何写一个loader

常用loader

babel-loader less-loader ts-loader
为什么我们在安装babel-loader的时候要安装babel/core，安装less-loader的时候要安装less，安装ts-loader的时候要安装typescript？
因为内部需要引入对应的编译器，拿babel-loader源码解析

loader本质

1、Webpack自身只能处理js，如果你要引入其他的东西，就需要loader;
2、所以loader归根结底来说，他就是一个拿来编译webpack不认识的东西的方法；

loader的工作流程

1、配置定义；
2、相应的类型的文件会自动读取给到Loader；
3、Loader进行处理；
4、处理后给到webpack再次打包；

自定义一个loader

目录结构

//index.js
const loaderUtils = require('loader-utils');
const transform = require('./lib/transform')
module.exports = function (resource) {
    console.log(resource);
    const loaderOptions = loaderUtils.getOptions(this) || {};
    let result = transform(resource);
    console.log(this);
    //异步形式
    someAsyncOperation(null,function(err,result){
        callback(null,result,map);
    })
    //同步形式
    this.callback(null,_res,map);
    return result;
}

//transform.js
module.exports = function(resource){
    let cur = 0;
    let length = resource.length;
    var _result = [];
    var _comArr = [];
    var commandList = [{
        name:'c',
        code:'console.log(value)'
    },{
        name:'a',
        code:'alert(value)'
    }];
    //express 学习到的编程骚操作
    var tester = {};
    for(var i=0;i<commandList.length;i++){
        tester[commandList[i].name] = function(name){
            return commandList[i].code;
        }
    }
    function _get(st){
        if(commandList.indexOf(st) !== -1){
            _comArr.push({
                type:'command',
                value:st
            });
        }else if(st === ':'){

        }else if(st === ';'){
            _result.push(_comArr);
            _comArr = [];
        }else if(typeof st === 'string' || typeof st === 'number'){
            _comArr.push({
                type:'value',
                value:st
            });
        }
    }
    while (cur<length){
        _get(resource[cur]);
        cur++;
    }
    function getcode(ast){
        var str = '';
        for(var i=0;i<ast.length;i++){
            str += tester[ast[i].value]();
            str = str.replace('value',ast[i][1].value);
            str += ';';
        }
        return str;
    }
    return getcode(_result);
}