webpack--loader和plugin实现

一、loader

loader按照执行优先级分类：

1. pre 前置loader
2. normal 普通loader
3. inline 内联loader
4. post 后置loader

相同优先级从后往前执行。

前面使用的都是normal loader ，配置pre和post loader需要在webpack.config.js中进行：

relus:[
    {
        enforce:"pre"
        test:/\.js$/,
        loader:"loader1",
    },
     {
        test:/\.js$/, //normal
        loader:"loader1",
    },
     {
        enforce:"post"
        test:/\.js$/,
        loader:"loader1",
    },
]

内联loader需要在import时使用，例如用style-loader和css-loader处理 .css文件：

import Styles from "style-loader!css-loader?modules!./styles.css";

此时！表示loader的分隔符。

在所有loader前使用！、-！、！！分别表示跳过normal loader、pre+normal loader、 pre+normal+post loader。

1.什么是loader

实际上就是一个函数，接收一个字符串作为输入，里面做处理（例如将es6等高级语法进行转换），将生成的字符串返回。

2.四种定义方式

同步loader：

 异步loader：

 raw loader：

接收的content是buffer数据流，一般用来处理图片、字体图标等流数据。可以和同步异步loader组合使用：

 pitch loader：

在loader里加一个.pitch，pitch的执行顺序是从前到后，loader的执行顺序是从后到前，先pitch后loader。如果某个pitch中有return语句，则返回执行上一个loader，此后的pitch和loader都不执行了。

 

 3.实现几个loader吧~

1）去掉js文件中的consoel.log(xxx)

module.exports = function (content){
    return content.replace(/console\.log\(.*\);?/,"")
}

 2）给内容加上作者信息

const schema  = require("./schema.js")
module.exports = function (content){
    const options = this.getOptions(schema);//options必须满足于schema的要求
    const banner = `
    /*
    * Author: ${options.author}
    */

    `
    return banner + content;
}

 还需要写schema.json验证规则文件：

{
    "type":"object",//options类型
    "properties":{//options中的属性
        "author":{
            "type":"string",//属性类型
        }
    },
    "additionalProperties":false;//是否接受额外属性
}

使用：

{
    test:/\.js$/,
    loader:"./loader/banner-loader",
    options:{
        author:"李四",
    }
}

二、plugin

 compiler只有一个，compliation有多个，对应不同plugin。两者有各自的钩子函数，可以利用这些钩子函数在某个时间点进行一些操作。

 

compiler 钩子 | webpack 中文文档