揭秘webpack插件运行原理，深入理解webpack打包流程

2024-01-02 13:25:14

【webpack系列】4. webpack的plugin插件是如何运行的

我们都知道loader和plugin是webpack两个比较重要的配置项，也是深入了解webpack打包原理的关键。上篇文章介绍过loader的运行时机和原理（https://juejin.cn/post/7062292997548625950），今天我们再来聊聊plugin是如何工作的。

webpack是一个模块化打包器，它将各种模块打包成一个或多个可执行文件。loader用于将一种类型的文件转换成另一种类型的文件，而plugin用于对webpack构建流程进行扩展和修改。

webpack的plugin机制非常灵活，它允许用户在打包过程中执行各种任务，比如压缩代码、生成source map、提取公共代码等。plugin可以分为两类：内置plugin和第三方plugin。

内置plugin是webpack自带的plugin，它们提供了基本的功能，比如HtmlWebpackPlugin、UglifyJsPlugin等。第三方plugin是由社区开发的plugin，它们提供了更多高级的功能，比如CopyWebpackPlugin、ExtractTextWebpackPlugin等。

要使用plugin，需要在webpack配置文件中配置plugins项。plugins项是一个数组，里面可以列出要使用的plugin及其配置选项。

module.exports = {
  plugins: [
    new HtmlWebpackPlugin({
      title: 'My App'
    }),
    new UglifyJsPlugin({
      compress: {
        warnings: false
      }
    })
  ]
};

当webpack运行时，它会根据plugins项中的配置，实例化相应的plugin对象，然后调用它们的apply方法。apply方法会在webpack构建流程的各个阶段被调用，plugin可以在这些阶段执行各种任务。

比如，HtmlWebpackPlugin会在compilation阶段被调用，它会生成一个HTML文件，并将其注入到webpack生成的bundle中。UglifyJsPlugin会在asset optimization阶段被调用，它会压缩webpack生成的bundle。

plugin的运行机制相对复杂，但它非常灵活，可以满足各种不同的需求。通过使用plugin，可以扩展webpack的功能，让它可以完成更多的事情。

webpack的plugin插件是如何运行的？

webpack的plugin插件是通过钩子函数机制来实现的。webpack在构建过程中会触发一系列的钩子函数，插件可以通过监听这些钩子函数来执行自己的逻辑。

webpack的钩子函数有两种类型：同步钩子和异步钩子。同步钩子会在所有插件执行完后才继续执行，而异步钩子会在所有插件执行完后再并行执行。

webpack的plugin插件可以使用两种方式来监听钩子函数：

使用webpack提供的API：webpack.hooks.钩子函数名称.tap(插件名称, 回调函数)
使用webpack-chain插件：chain.plugin(插件名称).tap(回调函数)

下面是一个使用webpack.hooks.钩子函数名称.tap(插件名称, 回调函数)来监听compilation钩子函数的例子：

const webpack = require('webpack');

const MyPlugin = {
  apply: (compiler) => {
    compiler.hooks.compilation.tap('MyPlugin', (compilation) => {
      // 在compilation阶段执行插件的逻辑
    });
  }
};

module.exports = MyPlugin;

下面是一个使用webpack-chain插件来监听compilation钩子函数的例子：

const webpack = require('webpack');

const MyPlugin = {
  apply: (compiler) => {
    compiler.plugin('compilation').tap((compilation) => {
      // 在compilation阶段执行插件的逻辑
    });
  }
};

module.exports = MyPlugin;