插件，提供了webpack引擎中的完整能力，使用阶段式的构建回调，可以在webpack构建流程中引入自定义事件。其目的是处理loader不能实现的其它事。

构成

webpack插件是一个具有apply方法的JavaScript对象，其apply方法会被webpack compiler调用，在整个生命周期内都可访问compiler对象。

  • 一个JavaScript命名函数或JavaScript类
  • 在插件的prototype上定义一个apply方法
  • 制定一个绑定到webpack自身的事件钩子
  • 处理webpack内部的特定数据

  • 功能完成后调用webpack的回调

    1. // 一个 JavaScript 类
    2. class MyExampleWebpackPlugin {
    3. // 在插件函数的 prototype 上定义一个 `apply` 方法，以 compiler 为参数。
    4. apply(compiler) {
    5.   // 指定一个挂载到 webpack 自身的事件钩子。
    6.   compiler.hooks.emit.tapAsync(
    7.     'MyExampleWebpackPlugin',
    8.     (compilation, callback) => {
    9.       console.log('这是一个示例插件！');
    10.       console.log(
    11.         '这里表示了资源的单次构建的 `compilation` 对象：',
    12.         compilation
    13.       );
    15.       // 用 webpack 提供的插件 API 处理构建过程
    16.       compilation.addModule(/* ... */);
    18.       callback(); // 调用回调函数通知webpack插件处理完成，进入下个流程
    19.     }
    20.   );
    21. }
    22. }

    :::info tab()传入的第一个参数需为驼峰式的插件名
    compiler：包含webpack的所有配置信息，包括options、loader、plugin和webpack整个生命周期钩子
    compilation：plugin内置事件回调函数的参数，包含当前模块资源，编译生成资源，变化的文件以及被跟踪依赖的状态信息。当检测到一个文件变化，一个新的compilation将被创建 ::: compiler.hooks的可选生命周期钩子函数有：

  • entry-option：初始化option

  • run
  • compile：真正开始的编译，在创建compilation对象之前
  • compilation：生成compilation对象后
  • make：从entry开始递归分析依赖，准备对每个模块进行build
  • after-compile：编译build过程结束
  • emit：在将内存中的assets内容写到磁盘之前
  • after-emit：在assets写到磁盘后
  • done：完成所有编译过程
  • failed：编译失败时

    使用

    在plugins属性中传入一个new实例以携带参数 ```javascript const HtmlWebpackPlugin = require(‘html-webpack-plugin’); // 通过 npm 安装 const webpack = require(‘webpack’); // 访问内置的插件 const path = require(‘path’);

module.exports = { entry: ‘./path/to/my/entry/file.js’, output: { filename: ‘my-first-webpack.bundle.js’, path: path.resolve(__dirname, ‘dist’), }, module: { rules: [ { test: /.(js|jsx)$/, use: ‘babel-loader’, }, ], }, plugins: [ new webpack.ProgressPlugin(), // 自定义编译过程中的进度报告 new HtmlWebpackPlugin({ template: ‘./src/index.html’ }), // 生成一个html文件并用script标签引入my-first-webpack.bundle.js
], }; ```

常用plugin

  • CommonsChunkPlugin：提取chunks之间共享的通用模块
  • CopyWebpackPlugin：将文件或目录复制到目录结构
  • HtmlWebpackPlugin：生成html文件