webpack-loader和plugins

一、loader

webpack做的事情，仅仅是分析出各种模块的依赖关系，然后形成资源列表，最终打包生成到指定的文件中。
更多的功能需要借助webpack loaders和webpack plugins完成。

webpack loader： loader本质上是一个函数，它的作用是将某个源码字符串转换成另一个源码字符串返回。

loader函数的将在模块解析的过程中被调用，以得到最终的源码。

全流程：

chunk中解析模块的流程：

1.处理loaders流程

//index.js
变量 a = 1;

// loaders/test-loader
module.exports = function(sourceCode){
    return sourceCode.replace(/变量/g,'var');
}

// webpack.config.js
module.exports = {
    mode: "development",
    module: {
        rules: [
            {
                test: /index\.js$/,
                use: [
                    {
                        loader: './loaders/test-loader'
                    }
                ]
            }
        ]
    }
}

最后main.js中变成无误代码

2.loader配置

完整配置

module.exports = {
    module: { //针对模块的配置，目前版本只有两个配置，rules、noParse
        rules: [ //模块匹配规则，可以存在多个规则
            { //每个规则是一个对象
                test: /\.js$/, //匹配的模块正则
                use: [ //匹配到后应用的规则模块
                    {  //其中一个规则
                        loader: "模块路径", //loader模块的路径，该字符串会被放置到require中
                        options: { //向对应loader传递的额外参数
							
                        }
                    }
                ]
            }
        ]
    }
}

简化配置

module.exports = {
    module: { //针对模块的配置，目前版本只有两个配置，rules、noParse
        rules: [ //模块匹配规则，可以存在多个规则
            { //每个规则是一个对象
                test: /\.js$/, //匹配的模块正则
                use: ["模块路径1", "模块路径2"]//loader模块的路径，该字符串会被放置到require中
            }
        ]
    }
}

3.loader匹配规则

从上往下匹配

//loader1.js
module.exports = function(sourceCode){
    console.log("loader1");
    return sourceCode;
}

//loader2.js
module.exports = function(sourceCode){
    console.log("loader2");
    return sourceCode;
}

//loader3.js
module.exports = function(sourceCode){
    console.log("loader3");
    return sourceCode;
}

//loader4.js
module.exports = function(sourceCode){
    console.log("loader4");
    return sourceCode;
}

// webpack.config.js
module.exports = {
    mode: "development",
    module: {
        rules: [
            {
                test: /index\.js$/, //正则表达式，匹配模块的路径
                use: ["./loaders/loader1", "./loaders/loader2"] //匹配到了之后，使用哪些加载器
            }, //规则1
            {
                test: /\.js$/, //正则表达式，匹配模块的路径
                use: ["./loaders/loader3", "./loaders/loader4"] //匹配到了之后，使用哪些加载器
            } //规则2
        ], //模块的匹配规则
    }
}

最后将loader4结果返回给loader3，再返回给loader2，最后loader1

这里如果index.js依赖a.js
a.js又匹配到loader3和loader4

注意注意！！！！
由于要对打包文件进行loader规则处理，所以要在打包过程中读取loader文件，即在node环境中，所以这里使用commonJs

二、plugin

loader的功能定位是转换代码，而一些其他的操作难以使用loader完成，比如：

• 当webpack生成文件时，顺便多生成一个说明描述文件
• 当webpack编译启动时，控制台输出一句话表示webpack启动了
• 当xxxx时，xxxx

这种类似的功能需要把功能嵌入到webpack的编译流程中，而这种事情的实现是依托于plugin的

plugin的本质是一个带有apply方法的对象

var plugin = {
    apply: function(compiler){
        
    }
}

通常，习惯上，我们会将该对象写成构造函数的模式

class MyPlugin{
    apply(compiler){
    }
}
var plugin = new MyPlugin();

要将插件应用到webpack，需要把插件对象配置到webpack的plugins数组中，如下：

module.exports = {
    plugins:[
        new MyPlugin()
    ]
}

// webpack.config.js
var MyPlugin = require("./plugins/MyPlugin");
module.exports = {
    mode: "development",
    watch: true,
    plugins: [
        new MyPlugin()
    ]
}

apply函数会在webpack编译的初始化阶段，创建好Compiler对象后运行。

compiler对象是在初始化阶段构建的，整个webpack打包期间只有一个compiler对象，后续完成打包工作的是compiler对象内部创建的compilation

apply方法会在创建好compiler对象后调用，并向方法传入一个compiler对象

compiler对象提供了大量的钩子函数（hooks，可以理解为事件），plugin的开发者可以注册这些钩子函数，参与webpack编译和生成。

你可以在apply方法中使用下面的代码注册钩子函数:

class MyPlugin{
    apply(compiler){
        compiler.hooks.事件名称.事件类型(name, function(compilation){
            //事件处理函数
        })
    }
}

// ./plugins/MyPlugin
module.exports = class MyPlugin {
    apply(compiler) {
        //在这里注册事件，类似于window.onload  $(function(){})
        compiler.hooks.done.tap("MyPlugin-done", function(compilation){
            //事件处理函数
            console.log("编译完成");
        })
    }
}

如果使用watch实时监测需打包的文件内容是否改变，每次改变后打包时都会触发该注册事件

1.事件名称

即要监听的事件名，即钩子名，所有的钩子：https://www.webpackjs.com/api/compiler-hooks

2.事件类型

这一部分使用的是 Tapable API，这个小型的库是一个专门用于钩子函数监听的库。

它提供了一些事件类型：

• tap：注册一个同步的钩子函数，函数运行完毕则表示事件处理结束
• tapAsync：注册一个基于回调的异步的钩子函数，函数通过调用一个回调表示事件处理结束
• tapPromise：注册一个基于Promise的异步的钩子函数，函数通过返回的Promise进入已决状态表示事件处理结束

3.处理函数

处理函数有一个事件参数compilation