何为plugin

在webpack体系里，loader 主要聚焦于转换各种类型的模块，而 plugin 则可以用于执行范围更广的任务，包括：打包优化，资源管理，注入环境变量等，同时我们需要知道的是Webpack自身也是构建于 插件系统 之上的，因此插件在webpack里是一个非常核心的部分，一定要掌握它

bqb

插件本质上是一个具有 apply 方法的 JavaScript 对象，apply方法会被 compiler 调用，并且在 整个 编译生命周期都可以访问 compiler 对象，一个plugin通常长这样

1
2
3
4
5
6
7
8
9
10
class MyFirstPlugin {
    apply(compiler) {
        /* 需要注意的是compiler hook 的 tap 方法的第一个参数应该是 驼峰式命名 的插件名称 */
        compiler.hooks.run.tap('MyFirstPlugin', (compilation) => {
            console.log('webpack 构建正在启动！')
        })
    }
}

module.exports = MyFirstPlugin

从示例中我们可以知道，插件的 运行时机 是跟webpack的 hook 所绑定到一起的，我们知道webpack在整个生命周期中会经历很多hook，每一个hook阶段就会 广播 出对应的消息，插件就可以根据自己的需求来监听不同的消息，从而实现在对应hook阶段执行插件逻辑的目的，因此插件配置的书写顺序是无关紧要的，这一点需要注意与 loader 进行区分

plugin的简单配置示例

下面先给出一个简单示例，看下我们如何在webpack中使用插件

1
2
3
4
5
6
7
8
9
10
11
const HtmlWebpackPlugin = require('html-webpack-plugin')
const CleanWebpackPlugin = require('clean-webpack-plugin')

module.exports = {
    ...
    plugins: [
        new HtmlWebpackPlugin({ template: './src/index.html' })
        new CleanWebpackPlugin()
    ]
    ...
};

通过上面示例我们可以知道配置一个插件需要如下几步

  1. 使用 require 导入需要使用的插件
  2. 通过 new 创建一个插件实例
  3. 将创建好的实例放入 plugins 字段
  4. 如果需要传递配置参数，就在创建实例时 直接传入 就好了

结语

plugin的存在对于webpack来说就是如虎添翼，从而奠定了如今在打包器领域的地位，对于我们来说，掌握它的概念是必须的，所以，加油吧，骚年！