手写一个 webpack 插件

前言

webpack 是目前前端最流行的打包工具，在 webpack 的世界里，一切都可以看成是一个包模块。包括但不限于 JS，CSS，图片资源。webpack 本身只支持打包 JS 文件。其他的资源比如 CSS 和 图片只能通过 loader 进行编译后进行打包。打包之后的 CSS 和 JS 混在一个文件中。如果想要将 CSS 单独提取出来就需要用到 plugins 插件。

常用 webpack 插件

mini-css-extract-plugin ：将 CSS 从 JS 中分离出来。
copy-webpack-plugin：复制静态资源。
progress-bar-webpack-plugin：打包进度条。
terser-webpack-plugin：压缩优化 JS。
optimize-css-assets-webpack-plugin：压缩优化 CSS。
hard-source-webpack-plugin：缓存 node_modules 资源。

webpack 插件实现过程

webpack 的核心包有 compiler 模块和 compilation 模块。

compiler 模块主要提供 webpack 的配置信息（options，loaders，plugins 等），打包启动时被一次性构建。compiler 拓展自 tapable 类，这个类暴露了多种 hooks 函数。

compilation 也是继承自 Tapable 类。有着父类相同的特性和方法。compilation 会被 compiler 用来创建新的编译。每次检测到文件变化，就会生成一组新的编译资源。
一个 compilation 对象表示当前模块信息，编译生成资源，变化的文件以及被跟踪依赖的状态信息。compilation 也提供了很多关键的回调以供插件使用。

在 webpack 的运行生命周期内，会广播出一些事件，而 plugins 会监听这些事件，在特定的时刻调用 webpack 提供的 API 执行这些事件。

webpack 插件是一个构造函数。要实现 webpack 插件，先需要在其原型对象上添加 apply 方法。apply 方法会被 webpack 中的 compiler 调用。然后在 webpack 中注册一个钩子事件。处理 webpack 内部实例的数据，最后调用 webpack 提供的回调。

手写一个 webpack 插件

1. 创建 myWebpack.js 文件

function MyWebpackPlugin(option) {
  console.log("打印参数"+option.job);
};
// 在插件函数的 prototype 上定义一个 `apply` 方法。
MyWebpackPlugin.prototype.apply = function(compiler) {
 compiler.hooks.run.tap('MyWebpackPlugin', compilation => {
   console.log('webpack 构建过程开始！');
 });
};
module.exports = MyWebpackPlugin;

2. 在 webpack.conf.js 中添加如下信息。

 plugins: [
    new MyWebpack({job:"engineer"})
 ]