webpack中plugin的工作原理

jieyucx

已于 2023-06-23 20:48:28 修改

阅读量1.7k

点赞数

分类专栏： webpack 文章标签： webpack javascript 前端

于 2023-06-23 20:38:58 首次发布

本文链接：https://blog.csdn.net/jieyucx/article/details/131353914

版权

webpack 专栏收录该内容

31 篇文章 4 订阅

订阅专栏

一、plugin的作用

Webpack中的插件是用来扩展Webpack功能的函数，加入自定义的构建行为，使 webpack 可以执行更广泛的任务，拥有更强的构建能力，它们在Webpack构建过程中被执行。Webpack所有的插件都需要在webpack.config.js的plugins节点中配置。

插件的作用很多，以下是插件常见的几种作用：

优化打包结果：例如压缩代码、去除无用代码等，提高输出文件的性能和效率。
注入环境变量：通过插件可以在代码中注入环境变量，例如环境配置、接口地址等。
自动生成页面：例如自动将HTML、CSS等文件转换为JavaScript模块，并且插入前端代码中。
生成版本号：例如将代码文件生成唯一的版本号或哈希值，用于静态资源版本控制。
引入第三方库：例如将jQuery等第三方库通过插件自动引入到项目中。
拆分代码：将公共模块提取出来打包成单独的文件，避免重复打包。
多页应用打包：通过插件可以实现多个HTML和JavaScript文件打包成多页应用。

总的来说，插件可以为Webpack提供更多的功能，实现更多的需求。

二、plugin的工作原理

每个Plugin都是一个JavaScript类，其中必须提供一个apply()方法，以向Webpack编译器注册自己。
在Webpack编译过程中，每个Plugin都会被调用，并且能够监听到相应的事件。例如，在编译过程中，Webpack会产生一系列的事件，如compile、emit、done等，而多数的Plugin都会在这些事件被触发时执行相应的处理。
每个Plugin都可以通过Webpack提供的API，来操控和修改Webpack构建流程中的各种原材料，例如输入的文件、输出的代码和其他资源等。

通常，一个Webpack Plugin的工作包括以下几个步骤：

获取Webpack编译器中的数据。
在合适的时机，监听Webpack的事件，如compile、emit、done等。
在响应Webpack事件时，对编译期间的资源进行处理，例如对JavaScript、CSS等进行压缩、合并、优化等。
在处理过程结束后，向Webpack编译器返回相应的处理结果，以便Webpack最终生成相应的文件。

三、Plugin 构建对象Compiler和Compilation

在webpack中，plugin是一种用于自定义构建过程的工具，可以通过给定的钩子函数来实现自定义的构建。plugin构建对象是plugin实现的主要方式，它包含两个重要的对象：Compiler和Compilation。

Compiler：Compiler是webpack的核心对象，负责将整个应用程序编译成一个静态资源，Compiler在Webpack初始化时被创建，它包含了Webpack环境的配置参数、option参数、Webpack既有的钩子函数和一些其它方法，同时在Webpack启动时实例化，贯穿了整个Webpack打包的生命周期。Compiler主要负责处理文件的监听、编译、打包等任务。

举例说明：

webpack-dev-server插件使用了内置的Compiler对象，它可以在内存中启动一个HTTP服务器，并且自动监听文件变化并重新编译，方便开发者进行开发和调试。
clean-webpack-plugin插件在编译之前清除目标目录中的文件，就是通过在Compiler对象中监听webpack工作流程的钩子函数来实现的。

Compilation：Compilation是Compiler的一个属性，其中包含了当前的模块资源、编译生成的资源、变化的文件等。当Webpack以开发模式(webpack --watch or webpack-dev-server)运行时，每当检测到一个文件发生了改变，重新打包时，就会生成一个新的Compilation对象，Compilation对象代表的是一次新的编译过程，它可以理解为是“循环体”中的一个“循环次数”，每次循环中处理的内容都是在这个对象中进行的。

举例说明：

html-webpack-plugin插件通过在Compilation对象中的html-webpack-plugin-before-html-processing钩子函数中添加生成的html文件内容来实现自动输出html文件。
uglify-webpack-plugin插件在Webpack打包时，通过在Compilation对象中的optimize-chunk-assets钩子函数中来进行JS代码的压缩和混淆处理。

四、自定义一个plugin

创建一个新的JavaScript文件，起名为CustomPlugin.js，例如：

// CustomPlugin.js
class CustomPlugin {
    apply(compiler) {
        compiler.hooks.done.tap('CustomPlugin', () => {
            console.log('CustomPlugin executed!');
        });
    }
}

module.exports = CustomPlugin;

以上代码创建了一个名为CustomPlugin的类，它的apply方法接收compiler对象参数，该方法通过compiler对象注册了一个done钩子，当编译完成时该钩子会触发。

在webpack配置文件中引入自定义的plugin，例如：

// webpack.config.js
const CustomPlugin = require('./CustomPlugin');

module.exports = {
    // ...
    plugins: [
        new CustomPlugin()
    ]
};

以上代码在plugins数组中实例化了CustomPlugin类，并传递给该类的实例作为参数。

运行webpack，CustomPlugin将会被调用，例如：

$ webpack
Hash: 1a0d8a10f39a2c8e1fae
Version: webpack 4.43.0
Time: 205ms
Built at: 06/10/2023 9:13:42 PM
     Asset       Size  Chunks             Chunk Names
index.html  347 bytes          [emitted]
   main.js   4.8 KiB    main  [emitted]  main
Entrypoint main = main.js
CustomPlugin executed!
[./src/index.js] 47 bytes {main} [built]
[./src/styles.css] 1.64 KiB {main} [built]
    + 1 hidden module