webpack 复习（五）webpack plugins

plugins

上篇笔记中，介绍了webpack loader 相关知识。本篇笔记续接上文，webpack 另外一个重点知识 —— plugins（插件）。

作用

同样的，需要先明确 plugins 的作用。

loader 的功能定位是转换代码，而一些其他操作 loader 是无法完成的。故插件目的在于解决 loader 无法实现的其他事。比如：

• 当 webpack 生成文件时，自动添加一个 README 文件；
• 当 webpack 编译开始时，终端输出一些日志等；
• …

换句话说就是，在 webpack 编译过程中，开发者想去做某些事，这种场景下可使用 webpack plugins 实现。这里就明了了，plugins 提供了一些 webpack 编译的钩子函数，可让开发者注册事件，进而达到可访问 webpack 编译过程。

plugin 官方定义：webpack 插件是一个具有 apply 属性的 JavaScript 对象。apply 属性会被 webpack compiler 调用，并且 compiler 对象可在整个编译生命周期访问。

翻译一下：webpack 插件是一个对象，该对象有一个 apply 方法。

var plugin = {
    apply: function(compiler) {
        // 注册某些事件
    }
}
module.exports = plugin;

通常情况下，会把插件对象写成构造函数的模式，apply 是实例方法。webpack 编译时，会调用 plugins 的 apply 方法。也就是说，如果在 apply 方法中注册某些钩子函数，即注册的事件可在 webpack 编译过程的某个阶段执行。

module.exports = class MyPlugin {
	constructor() {
		// 可接收参数
  	}
	apply(compiler){
		// 注册某些事件
	}
}

plugins 配置

在 webpack.config.js 中插件的配置是 plugins 属性，属性值是一个数组。

插件也是一个 js 模块文件，使用时导入插件即可。导入的插件，通常情况下是一个类，使用时需 new 关键字实例插件对象。

举例：

const MyPlugin = require('./plugins/MyPlugin');

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

plugins 核心原理

补充知识点

这里先补充一个 webpack.config.js 配置项：

• watch ：表示是否开启 Watch 模式；
• true：表示开启，这意味着在初始构建之后，webpack 将继续监听任何已解析文件的更改（可配置监听的文件，具体参考官网 watch）；
• false：表示不开启，默认是未开启；

plugins 原理

抓重点：

plugins 的 apply 属性会被 webpack compiler 调用，并且 compiler 对象可在整个编译生命周期访问。

插件的核心就是 apply 属性，该属性值是一个函数，入参是 webpack compiler，通过 webpack compiler 可访问 webpack 编译过程 。这样的话，就可以在 webpack 编译时，做一些其他的事情。

plugins 的作用图：

webpack compiler 是开始打包的起点（初始化阶段构建），每一次打包只对应一个 compiler，后续的打包工作是由 compiler 构建的 compilation 负责。

其中，webpack compiler 是在 webpack 初始化阶段构建的，可理解为，获取配置对象之后，准备编译之前。

初始化完成后，进入编译流程。此时 webpack compiler 会构建一个 compilation 对象，用于完成后续工作。

如果 webpack.config.js 有 watch: true 配置时：

1. 打包结果会按照配置生成，但 webpack compiler 一直存在，监控文件变化；
2. 当有些文件内容发生变化时，webpack compiler 会自动把内容变化的文件进行打包输出；
3. 自动打包文件并输出这个动作是由 compilation 对象完成，compilation 是 webpack compiler；

compiler 和 compilation 原理图：

最最重要的是，plugins 的作用是可在 webpack 编译时注册事件的！！！！！