webpack自定义loader

webpack默认只能识别js文件，当遇到其他格式的文件后，webpack并不知道如何去处理，这时候该怎么办，loader就是一种打包的方案。我们可以定义一种规则，告诉webpack当他遇到某种格式的文件后，去求助于相应的loader。
有些时候我们需要一些新的编写方式，就需要自定义一些loader。如何自定义简易loader？

首先搭建一个简单webpack环境。

1、建一个文件夹

npm  init

2、安装webpack

npm install -D webpack

3、如图配置目录

0.jpg

• test.wy是新定义的编写格式
  1.jpg
  意思是console.log(1);alert(2);
• wy-loader是我们自定义的loader
  2.jpg
  每一个loader内都有一个index.js 文件，主要目的获取要打包的文件资源，然后做相应的解析，libs是他的依赖包
• app.js 是我们的入口文件
  因为没有其他操作，只需要引入我们需要loader打包文件test.wy即可；
• webpack.config.js 配置文件内容

module.exports = {
    mode:"development",//webpack4 两个参数 development/production 不写默认production
    entry:{
        app:"./app.js"// 入口
    },
    output:{
        filename:"[name].bundle.js"// 出口
    },
    module:{
        rules:[
            {
                test:/\.wy$/,
                use:{
                    loader:"./wy-loader",//因为npm包没有我们的loader，所以要对应项目路径去引入
                    options:{//通常所传递的配置信息
                        a:1
                    }
                }
            }
        ]
    }
}

4、wy-loader下的index.js

const loaderUtils = require("loader-utils");//是我要那配置信息的依赖
const transform = require("./libs/transform.js");//解析wy后缀文件的依赖
module.exports = function(source){//参数是我们的需解析文件的内容
    let loaderOptions = loaderUtils.getOptions(this) || {};//拿到配置信息的方法
        console.log(loaderOptions)//{a:1},即webpack.config.js对应loader，option配置信息
    let _res = transform(source);//调用依赖包方法
    return _res;//必须要有返回
}

5、wy-loader下的transform.js

//逐字扫描
module.exports = function(word){
    var cur = 0;
    var length = word.length;
    var commonlist = ["c","a"];
    var commonArr = [];
    var resultArr = [];

    function _get(st){
        if(commonlist.indexOf(st) !== -1){
            commonArr.push({
                type:"command",
                value:st
            })
        } else if (st == ":"){
            
        }
        else if (st == ";"){
            resultArr.push(commonArr);
            commonArr = [];
        } else if (typeof st == "number" || typeof st == "string"){
            commonArr.push({
                type:"value",
                value:st
            })
        }
    }
    
    while(cur<length){
        _get(word[cur]);
        cur++;
    }
    
    
    function getCode(ast){
        var str = "";
        for(var i=0; i<ast.length; i++){
            switch (ast[i][0].value){
                case "c": {
                    str += "console.log(value)";
                    break;
                };
                case "a": {
                    str += "alert(value)";
                    break;
                }
            }
            str = str.replace("value",ast[i][1].value);
            str += ";";
        }
        return str;
    }
    //最终str变成js语言    `console.log(1);alert(2);`
    return getCode(resultArr);
};

下图为webpack打包后的文件代码

3.jpg

以上方法，会有bug，不足。具体实际再做相应优化。
我们代码要保证的特性：
健壮性（在任何情况下都跑的通）
可读性（通俗易懂，便于别人阅读理解）
扩展性（本文wy只有两个参数，如果更多该如何处理，有没有一个通配法等）
了解需求，将代码做到更好！！！！