webpack的原理以及plugin、loader

王贰浪
219 阅读3分钟

webpack的原理

Webpack是一个JavaScript模块打包工具，它的核心原理包括以下几个方面：

  • 分析模块依赖。Webpack首先分析项目的模块依赖关系，构建一个依赖关系图谱。

  • 生成入口文件。Webpack从配置文件中读取entry选项，确定项目的入口文件。

  • 编译模块。Webpack对项目的每个模块进行编译，这包括使用不同的对模块进行转换，例如将ES6代码转换为ES5，将SCSS转换为CSS等。

  • 生成chunk。Webpack将所有模块打包成一个或多个chunk，每个chunk包含多个模块及其依赖关系。

  • 输出结果。Webpack将生成的chunk输出到文件系统中，通常是在项目的构建目录下。

  • 使用插件扩展功能。Webpack允许用户通过插件扩展其功能，例如压缩代码、生成HTML模板、实现热更新等。

  • 实现按需加载。Webpack支持Code Splitting，可以将代码分割成多个chunk，根据特定条件（如路由变化）加载不同的代码块，从而实现按需加载。

这些步骤共同构成了Webpack的打包原理，它有效地将项目的代码打包成一个或多个bundle，便于在浏览器中加载和执行。

loader与plugin的区别

loader的作用是将代码进行转换，比如less转成css，一个loader就是一个函数，接收的参数是上一个loader的返回值，loader进行一系列处理后 返回新的代码

plugin的作用是在webpack的编译流程中完成某些操作，比如当webpack编译启动时，控制台输出一句话表示webpack启动了，plugin是一个带有apply方法的对象，apply方法的参数是compiler，在apply中注册compiler对象的钩子函数，钩子函数在官网中有相应的描述。

loader

基本配置

module.exports = {
  mode: "development",  
  module: {
    rules: [
      {
        test: /.css$/,
        // 先执行 css-loader 再执行 style-loader
        use: ["style-loader","css-loader"],
      }
    ],
  },
};

loaders处理流程

判断当前文件名是否满足module.rules.test的规则

满足规则，则根据loaders数组从最后一个loader依次执行到最前的一个loader；不满足规则，loaders数组为空，没有可执行的loader

最后返回loaders处理结果

loader的写法

css-loader：
module.exports = function (sourceCode) {
    var code = `var style = document.createElement("style");
    style.innerHTML = `${sourceCode}`;
    document.head.appendChild(style);
    module.exports = `${sourceCode}``;
    return code;
}

plugin

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

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

当我们需要把功能嵌入到webpack的编译流程中的时候，要借助于plugin

基本配置

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

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

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

也可以使用class的写法

class MyPlugin{
    apply(compiler){

    }
}

var plugin = new MyPlugin();

apply

apply方法会在初始化阶段，创建好Compiler对象后运行。

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

apply方法在一次打包过程中只执行一次，该方法接收一个compiler对象

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

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

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

事件名称

即要监听的事件名，即钩子名，所有的钩子：www.webpackjs.com/api/compile…

事件类型

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

它提供了一些事件类型：

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

处理函数

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

avatar
文章
阅读
粉丝