Webpack5 基础进阶与原理剖析

相关问题

请说说webpack核心概念？

Webpack 是一个现代 Javascript 应用程序的模块打包工具，它的核心概念包括以下几个：

入口 （Entry）

• 入口起点指示 webpack 应该使用哪个模块作为构建其内部依赖图的开始。进入入口起点后，webpack 会找出哪些模块和库是入口起点（直接和间接）依赖的。

输出 （Output）

• 输出选项指示 webpack 如何以及在哪里输出它所创建的bundles，以及如何命名这些文件。

加载器 （Loaders）

• 加载器让 webpack 能够处理那些非 Javascript 文件（webpack 自身只理解 JavaScript）。加载器可以将所有类型的文件转换为 webpack 能够处理的有效模块。

插件 （Plugins）

• 插件用于执行范围更广的任务，包括打包优化、资源管理和注入环境变量等。插件的功能极其强大，可以用来处理各种各样的任务。

模式（Mode）

• 通过选择 development, production 或 none 之中的一个，来设置 webpack 内置的优化

模块（Modules）

• 在webpack 里，一切文件皆模块，通过入口文件来开始，并通过一系列的导入或加载请求来进行模块间的连接。

说说你用过的 webpack loader 与 plugin？

常用的 Loaders

Babel Loader (babel-loader )

• 用于将 ES6+代码转译为 ES5

CSS Loader ( css-loader ) 和 Style Loader ( style-loader

• css-loader 使你可以使用类似 @import style-loader 将CsS 插入到 DOM中。
• style-loader 将CSS插入到DOM中

Sass Loader ( sass-loader

• 将 Sass/SCSS 文件编译为 CSS

File Loader (file-loader ) 和 Asset Modules

• Webpack 5引入了内置的 Asset Modules，可以代替 file-loader 和 url-loader

常用的 Plugins

HTML Webpack Plugin ( html-webpack-plugin)

• 生成一个 HTML文件，并自动注入所有的生成的bundle

Clean Webpack Plugin

• Webpack 5 中可以通过 output. clean 冼项替代 • clean-webpack-plugin

Mini CSS Extract Plugin ( mini-css-extract-plugin)

• 提取 CSS 到单独的文件中，而不是在 JavaScript 中内联

Define Plugin ( webpack. DefinePlugin

• 创建在编译时可以配置的全局常量

Hot Module Replacement Plugin ( webpack. HotModuleReplacementPlugin)

• 启用热模块替换（HMR），在运行时更新各种模块，而无需完全刷新。
• 在 Webpack 5 中不需要显式添加插件，只需在 devServer 中启用 hot 选项。

请详细说说webpack5构建过程

初始化阶段

• 在这个阶段，Webpack 从配置文件和命令行参数中读取并解析配置。然后， Webpack 根据配置初始化内部状态和插件系统。
  • 读取配置：从 webpack.config.js 文件或命令行参数中读取配置。
  • 初始化插件：根据配置文件中的 plugins 选项初始化插件实例。
  • 确定入口文件：确定项目的入口文件（entry）。

构建依赖图

• Webpack 会从入口文件开始，递归地解析所有依赖，形成一个依赖图。
  • 解析模块：使用 Loaders 处理非 JavaScript 文件，如CSS、图片等。每个模块会被递归地解析其依赖。
  • 创建模块对象：Webpack 为每个模块创建一个模块对象，并保存在内存中。

模块编译

• Webpack 使用相应的 Loaders 将模块的源代码转换为可以在浏览器中运行的 JavaScript 代码。
  • 处理模块：通过加载器链对模块进行转换。
  • 生成 AST（抽象语法树）：Webpack 将模块源代码转换为 AST，以便进一步处理。
  • 收集依赖：从 AST 中提取模块的依赖项，并将其加入到依赖图中。

生成代码块（Chunks）

• Webpack 会根据依赖图将所有模块分组，形成不同的代码块（Chunks）。这些代码块最终会被打包成一个或多个输出文件。
  • 代码拆分：根据配置中的 optimization.splitChunks 等选项，Webpack 会将代码拆分为多个 Chunk。
  • 生成 Chunk 对象：Webpack 创建 Chunk 对象并将相关的模块添加到其中。

优化阶段

• 优化阶段是确保打包后的代码性能和大小得到提升的关键步骤。Webpack 5 提供了一些内置的优化功能
  • 代码压缩：使用 TerserWebpackPlugin 压缩 JavaScript 代码。
  • CSS压缩：使用 css-minimizer-webpack-plugin 压缩CSS 代码。
  • 代码分割：使用 SplitChunksPlugin 进行代码分割，将公共模块提取到单独的文件中。
  • Tree Shaking：移除未使用的代码，减小包的大小。
  • 作用域提升：模块合并，提升运行效率。

输出阶段

• Webpack 将每个代码块转换为一个或多个输出文件，并将其写入到磁盘上。
  • 生成输出文件：Webpack 根据配置中的 output 选项生成最终的输出文件。
  • 应用插件：在输出阶段，Webpack 会调用相关的插件（如 HtmlWebpackPlugin）来处理输出文件。

Webpack 核心与基础使用 Webpack 简介

在现代前端开发中，Webpack 已经成为构建工具的事实标准。作为一名高级前端开发工程师，深入理解 Webpack 的核心概念和配置是必不可少的技能。本文将从基础概念开始，深入解析 Webpack 的核心配置和使用方法。

Webpack

什么是 Webpack

Webpack 是一个现代 JavaScript 应用程序的静态模块打包器。它将项目中的所有资源（JS、CSS、图片等）视为模块，通过分析模块间的依赖关系，生成对应的静态资源。

核心概念

• Entry（入口）：构建依赖图的起点
• Output（输出）：打包后文件的输出位置和命名
• Loader（加载器）：处理非 JavaScript 文件的转换器
• Plugin（插件）：执行更广泛任务的扩展工具
• Mode（模式）：区分开发和生产环境的优化策略

创建基本目录结构

首先，我们需要创建一个标准的项目目录结构：

webpack-demo/
├── dist/                 # 打包输出目录
├── src/                  # 源代码目录
│   ├── assets/          # 静态资源
│   │   ├── images/
│   │   └── styles/
│   ├── components/      # 组件目录
│   ├── utils/          # 工具函数
│   ├── index.js        # 入口文件
│   └── app.js          # 主应用文件
├── public/              # 公共资源
│   └── index.html      # HTML 模板
├── webpack.config.js    # Webpack 配置文件
├── package.json        # 项目配置文件
└── README.md           # 项目说明

初始化项目

使用 npm 或 yarn 初始化项目并安装必要的依赖：

// 初始化项目
npm init -y

// 安装 Webpack 核心依赖
npm install --save-dev webpack webpack-cli

// 安装常用 loader 和 plugin
npm install --save-dev html-webpack-plugin
npm install --save-dev css-loader style-loader
npm install --save-dev file-loader url-loader
npm install --save-dev babel-loader @babel/core @babel/preset-env

// 安装开发服务器
npm install --save-dev webpack-dev-server

基础配置文件（webpack.config.js）

Webpack 的核心配置文件，定义了整个构建流程的各个环节：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  // 模式配置
  mode: 'development',
  
  // 入口配置
  entry: './src/index.js',
  
  // 输出配置
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
    clean: true // 每次构建前清理输出目录
  },
  
  // 模块配置
  module: {
    rules: [
      // JavaScript 处理
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      },
      // CSS 处理
      {
        test: /\.css$/i,
        use: ['style-loader', 'css-loader']
      },
      // 图片处理
      {
        test: /\.(png|svg|jpg|jpeg|gif)$/i,
        type: 'asset/resource'
      }
    ]
  },
  
  // 插件配置
  plugins: [
    new HtmlWebpackPlugin({
      template: './public/index.html'
    })
  ],
  
  // 开发服务器配置
  devServer: {
    static: './dist',
    port: 3000,
    open: true,
    hot: true
  }
};

基础配置说明

Mode（模式）配置

模式配置决定了 Webpack 的优化策略和默认配置：

module.exports = {
  // 开发模式：快速构建，包含调试信息
  mode: 'development',
  
  // 生产模式：优化构建，代码压缩混淆
  // mode: 'production',
  
  // 无模式：不使用任何默认优化
  // mode: 'none'
};

DevTool（源码映射）配置

用于调试时将编译后的代码映射回原始源代码：

module.exports = {
  // 开发环境推荐
  devtool: 'eval-source-map',
  
  // 生产环境推荐
  // devtool: 'source-map',
  
  // 其他选项
  // devtool: 'cheap-module-source-map', // 更快的构建速度
  // devtool: false // 不生成 source map
};

基本的 webpack.config.js 示例配置详解

让我们深入分析一个更完整的配置示例：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = (env, argv) => {
  const isProduction = argv.mode === 'production';
  
  return {
    // 环境模式
    mode: isProduction ? 'production' : 'development',
    
    // 源码映射
    devtool: isProduction ? 'source-map' : 'eval-source-map',
    
    // 入口点配置
    entry: {
      main: './src/index.js',
      vendor: './src/vendor.js' // 第三方库入口
    },
    
    // 输出配置
    output: {
      path: path.resolve(__dirname, 'dist'),
      filename: isProduction 
        ? '[name].[contenthash].bundle.js' 
        : '[name].bundle.js',
      chunkFilename: '[name].[contenthash].chunk.js',
      assetModuleFilename: 'assets/[name].[hash][ext]',
      publicPath: '/'
    },
    
    // 优化配置
    optimization: {
      splitChunks: {
        chunks: 'all',
        cacheGroups: {
          vendor: {
            test: /[\\/]node_modules[\\/]/,
            name: 'vendors',
            chunks: 'all'
          }
        }
      }
    },
    
    // 模块解析配置
    resolve: {
      extensions: ['.js', '.jsx', '.ts', '.tsx'],
      alias: {
        '@': path.resolve(__dirname, 'src'),
        '@components': path.resolve(__dirname, 'src/components'),
        '@utils': path.resolve(__dirname, 'src/utils'),
        '@assets': path.resolve(__dirname, 'src/assets')
      }
    },
    
    // 模块处理规则
    module: {
      rules: [
        // JavaScript/TypeScript 处理
        {
          test: /\.(js|jsx|ts|tsx)$/,
          exclude: /node_modules/,
          use: {
            loader: 'babel-loader',
            options: {
              presets: [
                ['@babel/preset-env', { targets: 'defaults' }],
                '@babel/preset-react',
                '@babel/preset-typescript'
              ],
              plugins: [
                '@babel/plugin-proposal-class-properties',
                '@babel/plugin-transform-runtime'
              ]
            }
          }
        },
        
        // CSS 处理
        {
          test: /\.css$/i,
          use: [
            isProduction ? MiniCssExtractPlugin.loader : 'style-loader',
            {
              loader: 'css-loader',
              options: {
                importLoaders: 1,
                modules: {
                  auto: true,
                  localIdentName: '[name]__[local]--[hash:base64:5]'
                }
              }
            },
            'postcss-loader'
          ]
        },
        
        // SCSS 处理
        {
          test: /\.s[ac]ss$/i,
          use: [
            isProduction ? MiniCssExtractPlugin.loader : 'style-loader',
            'css-loader',
            'postcss-loader',
            'sass-loader'
          ]
        },
        
        // 图片处理
        {
          test: /\.(png|svg|jpg|jpeg|gif|webp)$/i,
          type: 'asset',
          parser: {
            dataUrlCondition: {
              maxSize: 8 * 1024 // 8KB 以下转为 base64
            }
          },
          generator: {
            filename: 'images/[name].[hash:8][ext]'
          }
        },
        
        // 字体处理
        {
          test: /\.(woff|woff2|eot|ttf|otf)$/i,
          type: 'asset/resource',
          generator: {
            filename: 'fonts/[name].[hash:8][ext]'
          }
        }
      ]
    },
    
    // 插件配置
    plugins: [
      // 清理输出目录
      new CleanWebpackPlugin(),
      
      // HTML 模板处理
      new HtmlWebpackPlugin({
        template: './public/index.html',
        filename: 'index.html',
        inject: 'body',
        minify: isProduction ? {
          removeComments: true,
          collapseWhitespace: true,
          removeRedundantAttributes: true
        } : false
      }),
      
      // CSS 提取（生产环境）
      ...(isProduction ? [
        new MiniCssExtractPlugin({
          filename: 'css/[name].[contenthash:8].css',
          chunkFilename: 'css/[name].[contenthash:8].chunk.css'
        })
      ] : [])
    ],
    
    // 开发服务器配置
    devServer: {
      static: {
        directory: path.join(__dirname, 'public')
      },
      port: 3000,
      open: true,
      hot: true,
      compress: true,
      historyApiFallback: true,
      proxy: {
        '/api': {
          target: 'http://localhost:8080',
          changeOrigin: true,
          pathRewrite: {
            '^/api': ''
          }
        }
      }
    }
  };
};

Entry 配置

Entry 是 Webpack 构建依赖图的起点，支持多种配置方式：

单入口配置

module.exports = {
  entry: './src/index.js'
};

// 等同于
module.exports = {
  entry: {
    main: './src/index.js'
  }
};

多入口配置

module.exports = {
  entry: {
    app: './src/app.js',
    admin: './src/admin.js',
    vendor: ['react', 'react-dom', 'lodash']
  }
};

动态入口配置

module.exports = {
  entry: () => {
    return {
      app: './src/app.js',
      admin: './src/admin.js'
    };
  }
};

// 返回 Promise 的动态入口
module.exports = {
  entry: () => new Promise((resolve) => {
    resolve({
      app: './src/app.js',
      admin: './src/admin.js'
    });
  })
};

入口依赖配置

module.exports = {
  entry: {
    app: {
      import: './src/app.js',
      dependOn: 'shared'
    },
    admin: {
      import: './src/admin.js',
      dependOn: 'shared'
    },
    shared: ['react', 'react-dom']
  }
};

Output 配置

Output 配置决定了打包后文件的输出位置、命名规则等（即编译后的产物、输出配置）

基础输出配置

const path = require('path');

module.exports = {
  output: {
    // 输出目录
    path: path.resolve(__dirname, 'dist'),
    
    // 入口文件输出名称
    filename: 'bundle.js',
    
    // 非入口 chunk 文件名
    chunkFilename: '[name].chunk.js',
    
    // 静态资源文件名
    assetModuleFilename: 'assets/[name].[hash][ext]',
    
    // 公共路径
    publicPath: '/',
    
    // 每次构建前清理输出目录
    clean: true
  }
};

高级输出配置

module.exports = {
  output: {
    path: path.resolve(__dirname, 'dist'),
    
    // 使用占位符的文件名配置
    filename: (pathData) => {
      return pathData.chunk.name === 'main' 
        ? '[name].bundle.js' 
        : '[name].[contenthash].bundle.js';
    },
    
    // 根据环境配置不同的输出名称
    filename: process.env.NODE_ENV === 'production'
      ? '[name].[contenthash:8].js'
      : '[name].js',
    
    // 库相关配置
    library: {
      name: 'MyLibrary',
      type: 'umd',
      export: 'default'
    },
    
    // 全局对象
    globalObject: 'this',
    
    // 路径信息
    pathinfo: false,
    
    // 比较函数
    compareBeforeEmit: false
  }
};

输出文件名占位符

module.exports = {
  output: {
    // [name] - chunk 名称
    // [id] - chunk id
    // [hash] - 编译 hash
    // [contenthash] - 内容 hash
    // [chunkhash] - chunk hash
    // [query] - 查询字符串
    filename: '[name].[contenthash:8].js',
    chunkFilename: '[name].[contenthash:8].chunk.js'
  }
};

Module 配置

Module 配置定义了如何处理不同类型的模块：

Loader 规则配置

module.exports = {
  module: {
    rules: [
      // 基础规则
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: 'babel-loader'
      },
      
      // 多 loader 配置
      {
        test: /\.scss$/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              modules: true,
              importLoaders: 2
            }
          },
          'postcss-loader',
          'sass-loader'
        ]
      },
      
      // 条件配置
      {
        test: /\.js$/,
        include: path.resolve(__dirname, 'src'),
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      },
      
      // 资源模块
      {
        test: /\.(png|jpg|jpeg|gif)$/i,
        type: 'asset',
        parser: {
          dataUrlCondition: {
            maxSize: 4 * 1024 // 4KB
          }
        }
      },
      
      // 内联 loader
      {
        resourceQuery: /inline/,
        type: 'asset/inline'
      }
    ]
  }
};

高级模块配置

module.exports = {
  module: {
    // 不解析的模块
    noParse: /jquery|lodash/,
    
    rules: [
      // OneOf 规则
      {
        oneOf: [
          {
            test: /\.module\.css$/,
            use: [
              'style-loader',
              {
                loader: 'css-loader',
                options: { modules: true }
              }
            ]
          },
          {
            test: /\.css$/,
            use: ['style-loader', 'css-loader']
          }
        ]
      },
      
      // 嵌套规则
      {
        test: /\.js$/,
        rules: [
          {
            loader: 'babel-loader',
            options: {
              presets: ['@babel/preset-env']
            }
          }
        ]
      },
      
      // 条件规则
      {
        test: /\.js$/,
        include: [
          path.resolve(__dirname, 'src'),
          path.resolve(__dirname, 'test')
        ],
        use: 'babel-loader'
      }
    ]
  }
};

Resolve 配置

Resolve 配置决定了模块如何被解析：

基础解析配置

module.exports = {
  resolve: {
    // 文件扩展名
    extensions: ['.js', '.jsx', '.ts', '.tsx', '.json'],
    
    // 路径别名
    alias: {
      '@': path.resolve(__dirname, 'src'),
      '@components': path.resolve(__dirname, 'src/components'),
      '@utils': path.resolve(__dirname, 'src/utils'),
      '@styles': path.resolve(__dirname, 'src/styles'),
      '@assets': path.resolve(__dirname, 'src/assets')
    },
    
    // 模块搜索目录
    modules: [
      'node_modules',
      path.resolve(__dirname, 'src')
    ],
    
    // 主文件名
    mainFiles: ['index'],
    
    // 主字段
    mainFields: ['browser', 'module', 'main']
  }
};

高级解析配置

module.exports = {
  resolve: {
    // 条件导出
    conditionNames: ['import', 'module', 'browser', 'default'],
    
    // 解析插件
    plugins: [
      // 自定义解析插件
    ],
    
    // 符号链接
    symlinks: true,
    
    // 缓存
    cache: true,
    
    // 不安全缓存
    unsafeCache: /src/,
    
    // 别名字段
    aliasFields: ['browser'],
    
    // 描述文件
    descriptionFiles: ['package.json'],
    
    // 强制扩展名
    enforceExtension: false,
    
    // 强制模块扩展名
    enforceModuleExtension: false
  }
};

完整示例

让我们创建一个完整的项目示例，展示所有配置的协同工作：

package.json

{
  "name": "webpack-complete-example",
  "version": "1.0.0",
  "description": "Complete Webpack configuration example",
  "main": "index.js",
  "scripts": {
    "start": "webpack serve --mode development",
    "build": "webpack --mode production",
    "build:dev": "webpack --mode development",
    "analyze": "webpack-bundle-analyzer dist/bundle.js"
  },
  "devDependencies": {
    "@babel/core": "^7.22.0",
    "@babel/preset-env": "^7.22.0",
    "@babel/preset-react": "^7.22.0",
    "babel-loader": "^9.1.0",
    "css-loader": "^6.8.0",
    "html-webpack-plugin": "^5.5.0",
    "mini-css-extract-plugin": "^2.7.0",
    "postcss": "^8.4.0",
    "postcss-loader": "^7.3.0",
    "sass": "^1.63.0",
    "sass-loader": "^13.3.0",
    "style-loader": "^3.3.0",
    "webpack": "^5.88.0",
    "webpack-cli": "^5.1.0",
    "webpack-dev-server": "^4.15.0"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  }
}

完整的 webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = (env, argv) => {
  const isProduction = argv.mode === 'production';
  const isDevelopment = !isProduction;

  console.log(`🚀 Running in ${isProduction ? 'PRODUCTION' : 'DEVELOPMENT'} mode`);

  return {
    target: 'web',
    mode: isProduction ? 'production' : 'development',
    devtool: isProduction ? 'source-map' : 'eval-cheap-module-source-map',

    entry: {
      main: './src/index.js'
    },

    output: {
      path: path.resolve(__dirname, 'dist'),
      filename: isProduction 
        ? 'js/[name].[contenthash:8].js' 
        : 'js/[name].js',
      chunkFilename: isProduction
        ? 'js/[name].[contenthash:8].chunk.js'
        : 'js/[name].chunk.js',
      assetModuleFilename: 'assets/[name].[hash:8][ext]',
      publicPath: '/',
      clean: true,
      pathinfo: isDevelopment
    },

    resolve: {
      extensions: ['.js', '.jsx', '.ts', '.tsx', '.json'],
      alias: {
        '@': path.resolve(__dirname, 'src'),
        '@components': path.resolve(__dirname, 'src/components'),
        '@utils': path.resolve(__dirname, 'src/utils'),
        '@hooks': path.resolve(__dirname, 'src/hooks'),
        '@services': path.resolve(__dirname, 'src/services'),
        '@styles': path.resolve(__dirname, 'src/styles'),
        '@assets': path.resolve(__dirname, 'src/assets')
      },
      modules: ['node_modules', path.resolve(__dirname, 'src')]
    },

    optimization: {
      splitChunks: {
        chunks: 'all',
        minSize: 20000,
        maxSize: 244000,
        cacheGroups: {
          default: {
            minChunks: 2,
            priority: -20,
            reuseExistingChunk: true
          },
          vendor: {
            test: /[\\/]node_modules[\\/]/,
            name: 'vendors',
            priority: -10,
            chunks: 'all'
          },
          react: {
            test: /[\\/]node_modules[\\/](react|react-dom)[\\/]/,
            name: 'react',
            priority: 20,
            chunks: 'all'
          }
        }
      },
      runtimeChunk: {
        name: 'runtime'
      }
    },

    module: {
      rules: [
        // JavaScript/JSX
        {
          test: /\.(js|jsx)$/,
          exclude: /node_modules/,
          use: {
            loader: 'babel-loader',
            options: {
              presets: [
                ['@babel/preset-env', {
                  targets: {
                    browsers: ['last 2 versions', 'ie >= 11']
                  },
                  useBuiltIns: 'usage',
                  corejs: 3
                }],
                ['@babel/preset-react', {
                  runtime: 'automatic'
                }]
              ],
              cacheDirectory: true,
              cacheCompression: false,
              compact: isProduction
            }
          }
        },

        // CSS
        {
          test: /\.css$/,
          use: [
            isProduction ? MiniCssExtractPlugin.loader : 'style-loader',
            {
              loader: 'css-loader',
              options: {
                importLoaders: 1,
                sourceMap: isDevelopment
              }
            },
            {
              loader: 'postcss-loader',
              options: {
                sourceMap: isDevelopment
              }
            }
          ]
        },

        // SCSS
        {
          test: /\.s[ac]ss$/,
          use: [
            isProduction ? MiniCssExtractPlugin.loader : 'style-loader',
            {
              loader: 'css-loader',
              options: {
                importLoaders: 2,
                sourceMap: isDevelopment
              }
            },
            {
              loader: 'postcss-loader',
              options: {
                sourceMap: isDevelopment
              }
            },
            {
              loader: 'sass-loader',
              options: {
                sourceMap: isDevelopment
              }
            }
          ]
        },

        // 图片
        {
          test: /\.(png|jpe?g|gif|svg|webp)$/i,
          type: 'asset',
          parser: {
            dataUrlCondition: {
              maxSize: 8 * 1024
            }
          },
          generator: {
            filename: 'images/[name].[hash:8][ext]'
          }
        },

        // 字体
        {
          test: /\.(woff2?|eot|ttf|otf)$/i,
          type: 'asset/resource',
          generator: {
            filename: 'fonts/[name].[hash:8][ext]'
          }
        }
      ]
    },

    plugins: [
      new HtmlWebpackPlugin({
        template: './public/index.html',
        filename: 'index.html',
        inject: 'body',
        scriptLoading: 'defer',
        minify: isProduction ? {
          removeComments: true,
          collapseWhitespace: true,
          removeRedundantAttributes: true,
          useShortDoctype: true,
          removeEmptyAttributes: true,
          removeStyleLinkTypeAttributes: true,
          keepClosingSlash: true,
          minifyJS: true,
          minifyCSS: true,
          minifyURLs: true
        } : false
      }),

      ...(isProduction ? [
        new MiniCssExtractPlugin({
          filename: 'css/[name].[contenthash:8].css',
          chunkFilename: 'css/[name].[contenthash:8].chunk.css'
        })
      ] : [])
    ],

    devServer: {
      static: {
        directory: path.join(__dirname, 'public')
      },
      port: 3000,
      host: 'localhost',
      open: true,
      hot: true,
      compress: true,
      historyApiFallback: {
        disableDotRule: true
      },
      client: {
        overlay: {
          errors: true,
          warnings: false
        },
        progress: true
      },
      proxy: {
        '/api': {
          target: 'http://localhost:8080',
          changeOrigin: true,
          secure: false,
          pathRewrite: {
            '^/api': ''
          }
        }
      }
    },

    performance: {
      hints: isProduction ? 'warning' : false,
      maxAssetSize: 500000,
      maxEntrypointSize: 500000
    },

    stats: {
      colors: true,
      modules: false,
      children: false,
      chunks: false,
      chunkModules: false
    }
  };
};

运行 Webpack

开发环境运行

// 启动开发服务器
npm run start

// 或者直接使用 webpack-cli
npx webpack serve --mode development --open

// 使用配置文件
npx webpack serve --config webpack.config.js --mode development

生产环境构建

// 生产构建
npm run build

// 或者直接使用 webpack-cli
npx webpack --mode production

// 查看构建分析
npm run analyze

// 使用自定义配置文件
npx webpack --config webpack.prod.js

高级运行选项

// 监听模式
npx webpack --watch

// 指定配置文件
npx webpack --config custom.webpack.config.js

// 设置环境变量
npx webpack --env production --env platform=web

// 显示详细信息
npx webpack --progress --colors

// JSON 输出（用于分析）
npx webpack --json > stats.json

// 性能分析
npx webpack --profile --json > compilation-stats.json

环境变量和模式

// webpack.config.js 中使用环境变量
module.exports = (env, argv) => {
  const config = {
    mode: argv.mode,
    // 基础配置
  };

  if (env.platform === 'web') {
    config.target = 'web';
  } else if (env.platform === 'node') {
    config.target = 'node';
  }

  if (env.analyze) {
    const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
    config.plugins.push(new BundleAnalyzerPlugin());
  }

  return config;
};

// 运行命令
npx webpack --env platform=web --env analyze

Loader 详解

Loader 基础

Webpack Loader 是 Webpack 生态系统中的核心概念之一，它是一个转换器，用于将源代码转换为可被 Webpack 理解和处理的模块。Loader 本质上是一个函数，接收源代码作为参数，返回转换后的代码。

Loader 的设计理念

Webpack 本身只能理解 JavaScript 和 JSON 文件，但通过 Loader，我们可以处理各种类型的文件：

• CSS 文件 → css-loader
• TypeScript 文件 → ts-loader
• 图片文件 → file-loader、url-loader
• Vue 单文件组件 → vue-loader

// Loader 的基本形式
module.exports = function(source) {
  // source 是传入的源代码字符串
  // 进行转换处理
  return transformedSource;
};

Loader 的特性

1. 链式调用：多个 Loader 可以串联使用
2. 单一职责：每个 Loader 只负责一种转换
3. 可配置：通过 options 参数进行配置
4. 支持同步和异步：适应不同的处理场景

基础使用

配置方式

Webpack 中配置 Loader 主要有三种方式：

1. 配置文件方式（推荐）

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      },
      {
        test: /\.(png|jpe?g|gif)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[name].[hash].[ext]',
              outputPath: 'images/'
            }
          }
        ]
      }
    ]
  }
};

2. 内联方式

// 在 import 语句中使用
import styles from 'css-loader!./styles.css';
import script from 'babel-loader!./script.js';

// 禁用特定 Loader
import styles from '!css-loader!./styles.css';

3. CLI 方式

webpack --module-bind js=babel-loader --module-bind css=css-loader

Loader 执行顺序

Loader 的执行顺序是从右到左，从下到上：

module.exports = {
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          'style-loader',    // 3. 将 CSS 插入到 DOM
          'css-loader',      // 2. 将 CSS 转换为 CommonJS
          'sass-loader'      // 1. 将 Sass 编译为 CSS
        ]
      }
    ]
  }
};

Loader 的职责

核心职责

1. 文件转换：将不同格式的文件转换为 JavaScript 模块
2. 代码预处理：在构建过程中对代码进行预处理
3. 资源优化：压缩、合并、优化资源
4. 开发体验提升：提供热重载、错误提示等功能

转换流程

// 伪代码：Loader 转换流程
function loaderProcess(source, map, meta) {
  // 1. 解析源代码
  const ast = parse(source);
  
  // 2. 转换 AST
  const transformedAst = transform(ast);
  
  // 3. 生成目标代码
  const result = generate(transformedAst);
  
  // 4. 返回结果
  return result;
}

常用 Loader 盘点

样式处理

// CSS 相关 Loader
{
  test: /\.css$/,
  use: [
    'style-loader',     // 将 CSS 注入到 DOM
    'css-loader',       // 解析 CSS 文件
    'postcss-loader'    // PostCSS 处理
  ]
},
{
  test: /\.scss$/,
  use: [
    'style-loader',
    'css-loader',
    'sass-loader'       // Sass 编译
  ]
},
{
  test: /\.less$/,
  use: [
    'style-loader',
    'css-loader',
    'less-loader'       // Less 编译
  ]
}

JavaScript 处理

// Babel 转换
{
  test: /\.js$/,
  exclude: /node_modules/,
  use: {
    loader: 'babel-loader',
    options: {
      presets: [
        ['@babel/preset-env', {
          targets: {
            browsers: ['> 1%', 'last 2 versions']
          }
        }]
      ],
      plugins: ['@babel/plugin-transform-runtime']
    }
  }
},
// TypeScript 处理
{
  test: /\.tsx?$/,
  use: 'ts-loader',
  exclude: /node_modules/
}

资源处理

// 图片和字体
{
  test: /\.(png|jpe?g|gif|svg)$/,
  use: [
    {
      loader: 'url-loader',
      options: {
        limit: 8192,      // 小于 8KB 转为 base64
        name: 'images/[name].[hash].[ext]'
      }
    }
  ]
},
{
  test: /\.(woff|woff2|eot|ttf|otf)$/,
  use: [
    {
      loader: 'file-loader',
      options: {
        name: 'fonts/[name].[hash].[ext]'
      }
    }
  ]
}

框架相关

// Vue 单文件组件
{
  test: /\.vue$/,
  loader: 'vue-loader'
},
// React JSX
{
  test: /\.(js|jsx)$/,
  exclude: /node_modules/,
  use: {
    loader: 'babel-loader',
    options: {
      presets: ['@babel/preset-react']
    }
  }
}

自定义 Loader 与进阶

自定义基础 Loader

创建一个简单的 Loader：

// my-loader.js
module.exports = function(source) {
  // 获取 Loader 的配置选项
  const options = this.getOptions() || {};
  
  // 执行转换逻辑
  const result = source.replace(/console\.log\(/g, 'console.info(');
  
  // 返回转换后的代码
  return result;
};

使用自定义 Loader：

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        use: {
          loader: path.resolve('./loaders/my-loader.js'),
          options: {
            name: 'custom-loader'
          }
        }
      }
    ]
  }
};

Loader 实现原理

Loader 的本质

// Loader 函数签名
function loader(source, map, meta) {
  // source: 源代码字符串
  // map: SourceMap 对象
  // meta: 元数据对象
  
  // 处理逻辑
  const result = transform(source);
  
  // 返回结果
  return result;
}

// 导出 Loader
module.exports = loader;

Loader Context

Loader 在执行时会绑定一个上下文对象，包含很多有用的方法和属性：

module.exports = function(source) {
  // this 指向 loader context
  
  // 获取配置选项
  const options = this.getOptions();
  
  // 获取资源路径
  console.log('Resource path:', this.resourcePath);
  
  // 获取资源查询参数
  console.log('Resource query:', this.resourceQuery);
  
  // 添加依赖
  this.addDependency('./config.json');
  
  // 缓存控制
  this.cacheable(false);
  
  return source;
};

获取 Loader 的 options 返回其他结果

使用 loader-utils

const { getOptions } = require('loader-utils');
const { validate } = require('schema-utils');

// 定义选项的 JSON Schema
const schema = {
  type: 'object',
  properties: {
    name: {
      type: 'string'
    },
    test: {
      type: 'boolean'
    }
  }
};

module.exports = function(source) {
  // 获取并验证选项
  const options = getOptions(this) || {};
  validate(schema, options, 'My Loader');
  
  // 使用选项进行处理
  if (options.test) {
    source = `// Test mode\n${source}`;
  }
  
  if (options.name) {
    source = `// Loader: ${options.name}\n${source}`;
  }
  
  return source;
};

返回多种结果

module.exports = function(source) {
  const options = this.getOptions();
  
  // 处理源代码
  const transformedSource = transform(source);
  
  // 生成 SourceMap
  const sourceMap = generateSourceMap(source, transformedSource);
  
  // 返回多个结果
  this.callback(
    null,           // 错误信息
    transformedSource,  // 转换后的代码
    sourceMap,      // SourceMap
    {               // 元数据
      transform: 'custom-transform'
    }
  );
};

同步与异步

同步 Loader

// 同步 Loader - 直接返回结果
module.exports = function(source) {
  const result = syncTransform(source);
  return result;
};

// 或者使用 this.callback
module.exports = function(source) {
  const result = syncTransform(source);
  this.callback(null, result);
};

异步 Loader

module.exports = function(source) {
  // 获取异步回调
  const callback = this.async();
  
  // 异步处理
  asyncTransform(source)
    .then(result => {
      callback(null, result);
    })
    .catch(error => {
      callback(error);
    });
};

// 使用 async/await
module.exports = async function(source) {
  const callback = this.async();
  
  try {
    const result = await asyncTransform(source);
    callback(null, result);
  } catch (error) {
    callback(error);
  }
};

处理二进制数据

// 标记 Loader 可以处理二进制数据
module.exports = function(content) {
  // content 是 Buffer 对象
  console.log('File size:', content.length);
  
  // 处理二进制数据
  const processedContent = processBinary(content);
  
  return processedContent;
};

// 标记为 raw loader
module.exports.raw = true;

实际应用示例：图片压缩 Loader

const imagemin = require('imagemin');
const imageminPngquant = require('imagemin-pngquant');

module.exports = function(content) {
  const callback = this.async();
  const options = this.getOptions() || {};
  
  imagemin.buffer(content, {
    plugins: [
      imageminPngquant({
        quality: options.quality || [0.6, 0.8]
      })
    ]
  })
  .then(result => {
    callback(null, result);
  })
  .catch(error => {
    callback(error);
  });
};

module.exports.raw = true;

缓存加速

module.exports = function(source) {
  // 启用缓存（默认启用）
  this.cacheable(true);
  
  // 获取选项
  const options = this.getOptions() || {};
  
  // 添加依赖文件，当依赖文件变化时重新处理
  this.addDependency(path.resolve('./config.json'));
  
  // 添加上下文依赖
  this.addContextDependency(path.resolve('./src'));
  
  // 处理源代码
  const result = expensiveTransform(source, options);
  
  return result;
};

其他 Loader API

完整的 Loader 示例

const { getOptions } = require('loader-utils');
const { validate } = require('schema-utils');

const schema = {
  type: 'object',
  properties: {
    banner: {
      type: 'string'
    },
    footer: {
      type: 'string'
    }
  }
};

module.exports = function(source, map, meta) {
  // 获取选项
  const options = getOptions(this) || {};
  
  // 验证选项
  validate(schema, options, 'Banner Loader');
  
  // 启用缓存
  this.cacheable(true);
  
  // 添加文件依赖
  if (options.bannerFile) {
    this.addDependency(options.bannerFile);
  }
  
  // 处理源代码
  let result = source;
  
  if (options.banner) {
    result = `${options.banner}\n${result}`;
  }
  
  if (options.footer) {
    result = `${result}\n${options.footer}`;
  }
  
  // 发送信息到控制台
  this.emitWarning(new Error('This is a warning'));
  
  // 生成额外文件
  this.emitFile('info.txt', 'Processed by banner loader');
  
  return result;
};

加载本地 Loader

使用 npm link

步骤一：创建 Loader 包

// my-custom-loader/package.json
{
  "name": "my-custom-loader",
  "version": "1.0.0",
  "main": "index.js",
  "keywords": ["webpack", "loader"]
}

// my-custom-loader/index.js
module.exports = function(source) {
  console.log('Processing with my custom loader');
  return source.replace(/var /g, 'let ');
};

步骤二：链接 Loader

# 在 loader 目录下
cd my-custom-loader
npm link

# 在项目目录下
npm link my-custom-loader

步骤三：使用 Loader

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        use: 'my-custom-loader'
      }
    ]
  }
};

使用 resolveLoader

// webpack.config.js
const path = require('path');

module.exports = {
  resolveLoader: {
    // 添加 loader 搜索目录
    modules: [
      'node_modules',
      path.resolve(__dirname, 'loaders')
    ],
    // 添加别名
    alias: {
      'custom-loader': path.resolve(__dirname, 'loaders/custom-loader.js')
    }
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        use: 'custom-loader'
      },
      {
        test: /\.vue$/,
        use: path.resolve(__dirname, 'loaders/vue-custom-loader.js')
      }
    ]
  }
};

实战

实战案例：自动添加版权信息 Loader

// loaders/copyright-loader.js
const { getOptions } = require('loader-utils');

module.exports = function(source) {
  const options = getOptions(this) || {};
  
  const copyright = `
/*!
 * ${options.name || 'Unknown'}
 * Version: ${options.version || '1.0.0'}
 * Author: ${options.author || 'Unknown'}
 * Date: ${new Date().toISOString()}
 * License: ${options.license || 'MIT'}
 */
`;
  
  return copyright + '\n' + source;
};

配置使用

// webpack.config.js
const path = require('path');

module.exports = {
  resolveLoader: {
    modules: ['node_modules', path.resolve(__dirname, 'loaders')]
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: [
          {
            loader: 'copyright-loader',
            options: {
              name: 'My Project',
              version: '2.0.0',
              author: 'Your Name',
              license: 'MIT'
            }
          },
          'babel-loader'
        ]
      }
    ]
  }
};

实战案例：环境变量注入 Loader

// loaders/env-loader.js
module.exports = function(source) {
  const options = this.getOptions() || {};
  
  // 定义环境变量替换规则
  const envVars = {
    'process.env.NODE_ENV': JSON.stringify(options.env || 'development'),
    'process.env.API_URL': JSON.stringify(options.apiUrl || 'http://localhost:3000'),
    'process.env.VERSION': JSON.stringify(options.version || '1.0.0')
  };
  
  let result = source;
  
  // 替换环境变量
  Object.keys(envVars).forEach(key => {
    const regex = new RegExp(key.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'), 'g');
    result = result.replace(regex, envVars[key]);
  });
  
  return result;
};

高级实战：代码分析 Loader

// loaders/analyzer-loader.js
const babel = require('@babel/core');
const traverse = require('@babel/traverse').default;

module.exports = function(source) {
  const callback = this.async();
  const options = this.getOptions() || {};
  
  try {
    // 解析代码为 AST
    const ast = babel.parseSync(source, {
      sourceType: 'module',
      plugins: ['jsx', 'typescript']
    });
    
    const analysis = {
      functions: [],
      imports: [],
      exports: [],
      complexity: 0
    };
    
    // 遍历 AST 进行分析
    traverse(ast, {
      FunctionDeclaration(path) {
        analysis.functions.push({
          name: path.node.id.name,
          params: path.node.params.length,
          line: path.node.loc.start.line
        });
      },
      ImportDeclaration(path) {
        analysis.imports.push({
          source: path.node.source.value,
          specifiers: path.node.specifiers.map(spec => spec.local.name)
        });
      },
      ExportDefaultDeclaration(path) {
        analysis.exports.push({ type: 'default' });
      },
      IfStatement() {
        analysis.complexity++;
      },
      ForStatement() {
        analysis.complexity++;
      },
      WhileStatement() {
        analysis.complexity++;
      }
    });
    
    // 生成分析报告
    if (options.generateReport) {
      const report = JSON.stringify(analysis, null, 2);
      this.emitFile(`${this.resourcePath}.analysis.json`, report);
    }
    
    // 如果开启详细模式，添加注释
    if (options.verbose) {
      const comment = `\n/* Analysis: ${analysis.functions.length} functions, ${analysis.imports.length} imports, complexity: ${analysis.complexity} */\n`;
      callback(null, source + comment);
    } else {
      callback(null, source);
    }
    
  } catch (error) {
    callback(error);
  }
};

Plugin 详解

Plugin 基础

Webpack Plugin 是 Webpack 构建流程中的核心扩展机制，它能够在构建过程的特定时机执行自定义逻辑，从而实现各种复杂的构建需求。Plugin 本质上是一个具有 apply 方法的 JavaScript 对象或类，通过监听 Webpack 的生命周期事件来介入构建过程。

基础使用

Plugin 的基本配置

// webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].[contenthash].js'
  },
  plugins: [
    // 清理输出目录
    new CleanWebpackPlugin(),
    
    // 生成 HTML 文件
    new HtmlWebpackPlugin({
      template: './src/index.html',
      filename: 'index.html',
      inject: 'body'
    }),
    
    // 提取 CSS 到单独文件
    new MiniCssExtractPlugin({
      filename: '[name].[contenthash].css',
      chunkFilename: '[id].[contenthash].css'
    })
  ]
};

Plugin 与 Loader 的区别

// Loader: 文件转换器，专注于单个文件的处理
module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        use: 'babel-loader' // 转换单个 JS 文件
      }
    ]
  }
};

// Plugin: 功能扩展器，能够访问整个构建流程
module.exports = {
  plugins: [
    new webpack.DefinePlugin({ // 全局常量定义
      'process.env.NODE_ENV': JSON.stringify('production')
    })
  ]
};

Plugin 的职责

核心职责分类

1. 资源优化：压缩、合并、去重等
2. 资源管理：复制文件、生成 HTML 等
3. 环境变量注入：定义全局变量
4. 构建分析：生成构建报告、性能分析
5. 开发体验：热更新、进度显示等

// 资源优化 Plugin
const TerserPlugin = require('terser-webpack-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');

module.exports = {
  optimization: {
    minimizer: [
      // JS 压缩
      new TerserPlugin({
        parallel: true,
        terserOptions: {
          compress: {
            drop_console: true,
            drop_debugger: true
          }
        }
      }),
      // CSS 压缩
      new OptimizeCSSAssetsPlugin({
        cssProcessorOptions: {
          safe: true,
          discardComments: {
            removeAll: true
          }
        }
      })
    ]
  }
};

常用 Plugin 盘点

开发环境 Plugin

const webpack = require('webpack');

module.exports = {
  mode: 'development',
  plugins: [
    // 热模块替换
    new webpack.HotModuleReplacementPlugin(),
    
    // 友好的错误提示
    new webpack.NamedModulesPlugin(),
    
    // 进度显示
    new webpack.ProgressPlugin((percentage, message, ...args) => {
      console.log(`${Math.round(percentage * 100)}%`, message, ...args);
    }),
    
    // 定义环境变量
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify('development'),
      'process.env.API_URL': JSON.stringify('http://localhost:3000')
    })
  ]
};

生产环境 Plugin

const path = require('path');
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
const CompressionPlugin = require('compression-webpack-plugin');

module.exports = {
  mode: 'production',
  plugins: [
    // 生成 HTML
    new HtmlWebpackPlugin({
      template: './src/index.html',
      minify: {
        removeComments: true,
        collapseWhitespace: true,
        removeRedundantAttributes: true,
        useShortDoctype: true,
        removeEmptyAttributes: true,
        removeStyleLinkTypeAttributes: true,
        keepClosingSlash: true,
        minifyJS: true,
        minifyCSS: true,
        minifyURLs: true
      }
    }),
    
    // 复制静态资源
    new CopyWebpackPlugin({
      patterns: [
        {
          from: path.resolve(__dirname, 'public'),
          to: path.resolve(__dirname, 'dist'),
          globOptions: {
            ignore: ['**/index.html']
          }
        }
      ]
    }),
    
    // Gzip 压缩
    new CompressionPlugin({
      test: /\.(js|css|html|svg)$/,
      algorithm: 'gzip',
      threshold: 8192,
      minRatio: 0.8
    }),
    
    // 包分析
    new BundleAnalyzerPlugin({
      analyzerMode: 'static',
      openAnalyzer: false,
      reportFilename: 'bundle-report.html'
    })
  ]
};

框架特定 Plugin

// Vue 项目
const { VueLoaderPlugin } = require('vue-loader');

// React 项目
const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');

module.exports = {
  plugins: [
    // Vue 支持
    new VueLoaderPlugin(),
    
    // React 热更新
    process.env.NODE_ENV === 'development' && new ReactRefreshWebpackPlugin(),
    
    // PWA 支持
    new WorkboxPlugin.GenerateSW({
      clientsClaim: true,
      skipWaiting: true,
      runtimeCaching: [
        {
          urlPattern: /^https:\/\/api\./,
          handler: 'NetworkFirst',
          options: {
            cacheName: 'api-cache',
            expiration: {
              maxEntries: 50,
              maxAgeSeconds: 5 * 60 // 5 minutes
            }
          }
        }
      ]
    })
  ].filter(Boolean)
};

自定义 Plugin

基础 Plugin 结构

// my-plugin.js
class MyPlugin {
  constructor(options = {}) {
    this.options = options;
  }
  
  apply(compiler) {
    // 插件逻辑
    compiler.hooks.emit.tapAsync('MyPlugin', (compilation, callback) => {
      console.log('MyPlugin is running!');
      console.log('Options:', this.options);
      
      // 执行插件逻辑
      this.processAssets(compilation);
      
      // 调用回调函数
      callback();
    });
  }
  
  processAssets(compilation) {
    // 处理资源
    Object.keys(compilation.assets).forEach(filename => {
      console.log('Processing asset:', filename);
    });
  }
}

module.exports = MyPlugin;

使用自定义 Plugin

// webpack.config.js
const MyPlugin = require('./plugins/my-plugin.js');

module.exports = {
  plugins: [
    new MyPlugin({
      name: 'custom-plugin',
      verbose: true
    })
  ]
};

Plugin 实现原理

Plugin 的工作机制

// 简化的 Webpack Plugin 系统实现
class SimpleWebpack {
  constructor(config) {
    this.config = config;
    this.hooks = {
      beforeRun: new SyncHook(['compiler']),
      run: new AsyncSeriesHook(['compiler']),
      emit: new AsyncSeriesHook(['compilation']),
      done: new SyncHook(['stats'])
    };
  }
  
  run() {
    // 触发 beforeRun 钩子
    this.hooks.beforeRun.call(this);
    
    // 应用所有插件
    this.config.plugins.forEach(plugin => {
      plugin.apply(this);
    });
    
    // 开始构建
    this.hooks.run.callAsync(this, (err) => {
      if (err) return console.error(err);
      
      this.compile();
    });
  }
  
  compile() {
    const compilation = this.createCompilation();
    
    // 触发 emit 钩子
    this.hooks.emit.callAsync(compilation, (err) => {
      if (err) return console.error(err);
      
      this.emitAssets(compilation);
      this.hooks.done.call({ compilation });
    });
  }
  
  createCompilation() {
    return {
      assets: {},
      modules: [],
      chunks: []
    };
  }
  
  emitAssets(compilation) {
    // 输出资源到文件系统
    Object.keys(compilation.assets).forEach(filename => {
      console.log(`Emitting: ${filename}`);
    });
  }
}

Hook 系统详解

// Tapable Hook 使用示例
const { SyncHook, AsyncSeriesHook, AsyncParallelHook } = require('tapable');

class MyCompiler {
  constructor() {
    this.hooks = {
      // 同步钩子
      syncHook: new SyncHook(['arg1', 'arg2']),
      
      // 异步串行钩子
      asyncSeriesHook: new AsyncSeriesHook(['compilation']),
      
      // 异步并行钩子
      asyncParallelHook: new AsyncParallelHook(['compiler'])
    };
  }
  
  run() {
    // 触发同步钩子
    this.hooks.syncHook.call('value1', 'value2');
    
    // 触发异步串行钩子
    this.hooks.asyncSeriesHook.callAsync({ assets: {} }, (err) => {
      if (err) console.error(err);
      console.log('Async series hook completed');
    });
  }
}

// Plugin 监听钩子
class ExamplePlugin {
  apply(compiler) {
    // 监听同步钩子
    compiler.hooks.syncHook.tap('ExamplePlugin', (arg1, arg2) => {
      console.log('Sync hook triggered:', arg1, arg2);
    });
    
    // 监听异步钩子
    compiler.hooks.asyncSeriesHook.tapAsync('ExamplePlugin', (compilation, callback) => {
      setTimeout(() => {
        console.log('Async hook completed');
        callback();
      }, 1000);
    });
    
    // 监听异步钩子（Promise 方式）
    compiler.hooks.asyncParallelHook.tapPromise('ExamplePlugin', async (compiler) => {
      await new Promise(resolve => setTimeout(resolve, 500));
      console.log('Promise hook completed');
    });
  }
}

Plugin 的进阶

Compiler & Compilation

Compiler 对象详解

class CompilerPlugin {
  apply(compiler) {
    console.log('Compiler 信息:');
    console.log('- 输出路径:', compiler.options.output.path);
    console.log('- 入口文件:', compiler.options.entry);
    console.log('- 模式:', compiler.options.mode);
    
    // Compiler 生命周期钩子
    compiler.hooks.beforeRun.tap('CompilerPlugin', (compiler) => {
      console.log('构建开始前');
    });
    
    compiler.hooks.run.tap('CompilerPlugin', (compiler) => {
      console.log('开始构建');
    });
    
    compiler.hooks.watchRun.tap('CompilerPlugin', (compiler) => {
      console.log('监听模式下重新构建');
    });
    
    compiler.hooks.compilation.tap('CompilerPlugin', (compilation) => {
      console.log('创建新的 compilation 对象');
    });
    
    compiler.hooks.emit.tap('CompilerPlugin', (compilation) => {
      console.log('资源生成完成，即将输出到文件系统');
    });
    
    compiler.hooks.done.tap('CompilerPlugin', (stats) => {
      console.log('构建完成');
      console.log('构建时间:', stats.endTime - stats.startTime, 'ms');
    });
  }
}

Compilation 对象详解

class CompilationPlugin {
  apply(compiler) {
    compiler.hooks.compilation.tap('CompilationPlugin', (compilation) => {
      console.log('Compilation 信息:');
      console.log('- 模块数量:', compilation.modules.size);
      console.log('- 入口点数量:', compilation.entrypoints.size);
      
      // Compilation 生命周期钩子
      compilation.hooks.buildModule.tap('CompilationPlugin', (module) => {
        console.log('开始构建模块:', module.resource);
      });
      
      compilation.hooks.finishModules.tap('CompilationPlugin', (modules) => {
        console.log('所有模块构建完成:', modules.size);
      });
      
      compilation.hooks.seal.tap('CompilationPlugin', () => {
        console.log('开始封装，不再接受新模块');
      });
      
      compilation.hooks.optimize.tap('CompilationPlugin', () => {
        console.log('开始优化阶段');
      });
      
      compilation.hooks.optimizeChunks.tap('CompilationPlugin', (chunks) => {
        console.log('优化代码块:', chunks.length);
      });
    });
  }
}

事件流

Webpack 构建流程事件

class BuildFlowPlugin {
  apply(compiler) {
    // 1. 初始化阶段
    compiler.hooks.initialize.tap('BuildFlowPlugin', () => {
      console.log('1. 初始化');
    });
    
    // 2. 编译准备
    compiler.hooks.beforeRun.tap('BuildFlowPlugin', () => {
      console.log('2. 编译准备');
    });
    
    // 3. 开始编译
    compiler.hooks.run.tap('BuildFlowPlugin', () => {
      console.log('3. 开始编译');
    });
    
    // 4. 创建模块工厂
    compiler.hooks.normalModuleFactory.tap('BuildFlowPlugin', (factory) => {
      console.log('4. 创建模块工厂');
    });
    
    // 5. 创建编译对象
    compiler.hooks.compilation.tap('BuildFlowPlugin', (compilation) => {
      console.log('5. 创建编译对象');
      
      // 6. 构建模块
      compilation.hooks.buildModule.tap('BuildFlowPlugin', (module) => {
        console.log('6. 构建模块:', module.resource);
      });
      
      // 7. 模块构建完成
      compilation.hooks.succeedModule.tap('BuildFlowPlugin', (module) => {
        console.log('7. 模块构建完成:', module.resource);
      });
      
      // 8. 完成所有模块构建
      compilation.hooks.finishModules.tap('BuildFlowPlugin', () => {
        console.log('8. 完成所有模块构建');
      });
      
      // 9. 封装
      compilation.hooks.seal.tap('BuildFlowPlugin', () => {
        console.log('9. 开始封装');
      });
      
      // 10. 优化
      compilation.hooks.optimize.tap('BuildFlowPlugin', () => {
        console.log('10. 开始优化');
      });
    });
    
    // 11. 生成资源
    compiler.hooks.emit.tap('BuildFlowPlugin', () => {
      console.log('11. 生成资源');
    });
    
    // 12. 构建完成
    compiler.hooks.done.tap('BuildFlowPlugin', () => {
      console.log('12. 构建完成');
    });
  }
}

常用 API

访问模块信息

class ModuleAnalysisPlugin {
  apply(compiler) {
    compiler.hooks.compilation.tap('ModuleAnalysisPlugin', (compilation) => {
      compilation.hooks.finishModules.tap('ModuleAnalysisPlugin', (modules) => {
        const moduleInfo = [];
        
        modules.forEach(module => {
          if (module.resource) {
            moduleInfo.push({
              id: module.id,
              resource: module.resource,
              size: module.size(),
              dependencies: module.dependencies.length,
              reasons: module.reasons.map(reason => ({
                module: reason.module ? reason.module.resource : 'unknown',
                dependency: reason.dependency.constructor.name
              }))
            });
          }
        });
        
        // 按文件大小排序
        moduleInfo.sort((a, b) => b.size - a.size);
        
        console.log('模块分析结果:');
        console.table(moduleInfo.slice(0, 10)); // 显示前10个最大的模块
      });
    });
  }
}

访问代码块信息

class ChunkAnalysisPlugin {
  apply(compiler) {
    compiler.hooks.compilation.tap('ChunkAnalysisPlugin', (compilation) => {
      compilation.hooks.afterOptimizeChunks.tap('ChunkAnalysisPlugin', (chunks) => {
        const chunkInfo = [];
        
        chunks.forEach(chunk => {
          const modules = Array.from(chunk.modulesIterable);
          chunkInfo.push({
            id: chunk.id,
            name: chunk.name,
            size: chunk.size(),
            moduleCount: modules.length,
            files: Array.from(chunk.files),
            parents: chunk.parents.map(parent => parent.id),
            children: chunk.children.map(child => child.id)
          });
        });
        
        console.log('代码块分析结果:');
        console.table(chunkInfo);
      });
    });
  }
}

读取输出资源、代码块、模块及其依赖

class AssetAnalysisPlugin {
  apply(compiler) {
    compiler.hooks.emit.tap('AssetAnalysisPlugin', (compilation) => {
      console.log('=== 输出资源分析 ===');
      
      // 分析所有输出资源
      const assets = compilation.assets;
      const assetInfo = Object.keys(assets).map(filename => {
        const asset = assets[filename];
        return {
          filename,
          size: asset.size(),
          emitted: compilation.emittedAssets.has(filename)
        };
      });
      
      console.log('输出资源列表:');
      console.table(assetInfo);
      
      // 分析代码块和模块的依赖关系
      console.log('=== 依赖关系分析 ===');
      compilation.chunks.forEach(chunk => {
        console.log(`\n代码块: ${chunk.name || chunk.id}`);
        
        const modules = Array.from(chunk.modulesIterable);
        modules.forEach(module => {
          if (module.resource) {
            console.log(`  模块: ${module.resource}`);
            
            // 分析模块依赖
            module.dependencies.forEach(dep => {
              if (dep.module && dep.module.resource) {
                console.log(`    依赖: ${dep.module.resource}`);
              }
            });
          }
        });
      });
    });
  }
}

监听文件变化

class FileWatchPlugin {
  apply(compiler) {
    // 监听文件变化（仅在 watch 模式下）
    compiler.hooks.watchRun.tap('FileWatchPlugin', (compiler) => {
      const watchFileSystem = compiler.watchFileSystem;
      
      if (watchFileSystem && watchFileSystem.watcher) {
        const changedFiles = watchFileSystem.watcher.mtimes;
        
        if (Object.keys(changedFiles).length > 0) {
          console.log('文件变化检测:');
          Object.keys(changedFiles).forEach(filepath => {
            const changeTime = new Date(changedFiles[filepath]);
            console.log(`  ${filepath} - 修改时间: ${changeTime.toLocaleString()}`);
          });
        }
      }
    });
    
    // 监听依赖变化
    compiler.hooks.compilation.tap('FileWatchPlugin', (compilation) => {
      compilation.hooks.buildModule.tap('FileWatchPlugin', (module) => {
        if (module.resource) {
          // 添加文件依赖
          compilation.fileDependencies.add(module.resource);
          
          // 监听模块内的其他文件依赖
          if (module.buildInfo && module.buildInfo.fileDependencies) {
            module.buildInfo.fileDependencies.forEach(dep => {
              compilation.fileDependencies.add(dep);
            });
          }
        }
      });
    });
  }
}

修改输出资源

class AssetModificationPlugin {
  constructor(options = {}) {
    this.options = options;
  }
  
  apply(compiler) {
    compiler.hooks.emit.tapAsync('AssetModificationPlugin', (compilation, callback) => {
      // 1. 修改现有资源
      Object.keys(compilation.assets).forEach(filename => {
        if (filename.endsWith('.js')) {
          const asset = compilation.assets[filename];
          const source = asset.source();
          
          // 添加版权信息
          const modifiedSource = this.addCopyright(source, filename);
          
          // 更新资源
          compilation.assets[filename] = {
            source: () => modifiedSource,
            size: () => modifiedSource.length
          };
        }
      });
      
      // 2. 生成新的资源文件
      this.generateManifest(compilation);
      this.generateReport(compilation);
      
      callback();
    });
  }
  
  addCopyright(source, filename) {
    const copyright = `/*!
 * File: ${filename}
 * Generated: ${new Date().toISOString()}
 * Copyright (c) ${new Date().getFullYear()} Your Company
 */\n`;
    
    return copyright + source;
  }
  
  generateManifest(compilation) {
    const manifest = {};
    
    // 收集所有资源信息
    Object.keys(compilation.assets).forEach(filename => {
      const asset = compilation.assets[filename];
      manifest[filename] = {
        size: asset.size(),
        hash: this.generateHash(asset.source())
      };
    });
    
    // 生成 manifest.json
    const manifestContent = JSON.stringify(manifest, null, 2);
    compilation.assets['manifest.json'] = {
      source: () => manifestContent,
      size: () => manifestContent.length
    };
  }
  
  generateReport(compilation) {
    const report = {
      buildTime: new Date().toISOString(),
      webpack: {
        version: require('webpack/package.json').version
      },
      assets: {},
      chunks: [],
      modules: []
    };
    
    // 收集资源信息
    Object.keys(compilation.assets).forEach(filename => {
      const asset = compilation.assets[filename];
      report.assets[filename] = {
        size: asset.size(),
        type: this.getAssetType(filename)
      };
    });
    
    // 收集代码块信息
    compilation.chunks.forEach(chunk => {
      report.chunks.push({
        id: chunk.id,
        name: chunk.name,
        size: chunk.size(),
        files: Array.from(chunk.files),
        moduleCount: Array.from(chunk.modulesIterable).length
      });
    });
    
    // 收集模块信息
    compilation.modules.forEach(module => {
      if (module.resource) {
        report.modules.push({
          id: module.id,
          resource: module.resource,
          size: module.size(),
          dependencyCount: module.dependencies.length
        });
      }
    });
    
    const reportContent = JSON.stringify(report, null, 2);
    compilation.assets['build-report.json'] = {
      source: () => reportContent,
      size: () => reportContent.length
    };
  }
  
  getAssetType(filename) {
    const ext = filename.split('.').pop();
    const typeMap = {
      'js': 'javascript',
      'css': 'stylesheet',
      'html': 'document',
      'png': 'image',
      'jpg': 'image',
      'jpeg': 'image',
      'gif': 'image',
      'svg': 'image',
      'woff': 'font',
      'woff2': 'font',
      'ttf': 'font',
      'eot': 'font'
    };
    return typeMap[ext] || 'unknown';
  }
  
  generateHash(content) {
    const crypto = require('crypto');
    return crypto.createHash('md5').update(content).digest('hex').slice(0, 8);
  }
}

判断 Webpack 使用哪些插件

在 Webpack 构建过程中，了解当前项目使用了哪些插件对于调试、优化和维护都非常重要。以下是几种不同的插件检测方法：

方法一：基础插件检测

class PluginDetectionPlugin {
  apply(compiler) {
    // 在初始化阶段检测插件
    compiler.hooks.initialize.tap('PluginDetectionPlugin', () => {
      console.log('=== 已配置的插件检测 ===');
      
      // 从 compiler.options.plugins 获取所有插件
      const plugins = compiler.options.plugins || [];
      
      // 基础信息收集
      const pluginInfo = plugins.map((plugin, index) => ({
        index,
        name: plugin.constructor.name,
        optionsCount: this.getPluginOptions(plugin),
        hasApplyMethod: typeof plugin.apply === 'function'
      }));
      
      console.table(pluginInfo);
      
      // 检测特定插件
      this.detectSpecificPlugins(plugins);
      
      // 分析插件依赖关系
      this.analyzePluginDependencies(plugins);
    });
  }
  
  getPluginOptions(plugin) {
    if (plugin.options) {
      return Object.keys(plugin.options).length;
    }
    if (plugin.opts) { // 某些插件使用 opts
      return Object.keys(plugin.opts).length;
    }
    return 0;
  }
  
  detectSpecificPlugins(plugins) {
    const detectedPlugins = {
      hasHtmlWebpackPlugin: false,
      hasMiniCssExtractPlugin: false,
      hasCleanWebpackPlugin: false,
      hasDefinePlugin: false,
      hasHotModuleReplacementPlugin: false,
      hasCopyWebpackPlugin: false,
      hasBundleAnalyzerPlugin: false,
      hasCompressionPlugin: false
    };
    
    const pluginDetails = {};
    
    plugins.forEach((plugin, index) => {
      const pluginName = plugin.constructor.name;
      
      // 记录插件详细信息
      pluginDetails[pluginName] = {
        index,
        instance: plugin,
        options: plugin.options || plugin.opts || {}
      };
      
      switch (pluginName) {
        case 'HtmlWebpackPlugin':
          detectedPlugins.hasHtmlWebpackPlugin = true;
          break;
        case 'MiniCssExtractPlugin':
          detectedPlugins.hasMiniCssExtractPlugin = true;
          break;
        case 'CleanWebpackPlugin':
          detectedPlugins.hasCleanWebpackPlugin = true;
          break;
        case 'DefinePlugin':
          detectedPlugins.hasDefinePlugin = true;
          break;
        case 'HotModuleReplacementPlugin':
          detectedPlugins.hasHotModuleReplacementPlugin = true;
          break;
        case 'CopyWebpackPlugin':
          detectedPlugins.hasCopyWebpackPlugin = true;
          break;
        case 'BundleAnalyzerPlugin':
          detectedPlugins.hasBundleAnalyzerPlugin = true;
          break;
        case 'CompressionPlugin':
          detectedPlugins.hasCompressionPlugin = true;
          break;
      }
    });
    
    console.log('\n特定插件检测结果:');
    console.log(detectedPlugins);
    
    console.log('\n插件详细信息:');
    Object.keys(pluginDetails).forEach(name => {
      const detail = pluginDetails[name];
      console.log(`${name}:`, {
        位置: detail.index,
        配置项数量: Object.keys(detail.options).length,
        主要配置: Object.keys(detail.options).slice(0, 3)
      });
    });
    
    // 给出优化建议
    this.provideSuggestions(detectedPlugins);
  }
  
  analyzePluginDependencies(plugins) {
    console.log('\n=== 插件依赖分析 ===');
    
    const dependencies = [];
    
    plugins.forEach((plugin, index) => {
      const pluginName = plugin.constructor.name;
      
      // 分析插件之间的依赖关系
      switch (pluginName) {
        case 'HtmlWebpackPlugin':
          dependencies.push({
            plugin: pluginName,
            dependencies: ['assets'],
            conflicts: [],
            recommendations: ['建议与 MiniCssExtractPlugin 配合使用']
          });
          break;
        case 'MiniCssExtractPlugin':
          dependencies.push({
            plugin: pluginName,
            dependencies: ['css-loader'],
            conflicts: ['style-loader'],
            recommendations: ['不要与 style-loader 同时使用']
          });
          break;
        case 'CleanWebpackPlugin':
          dependencies.push({
            plugin: pluginName,
            dependencies: [],
            conflicts: [],
            recommendations: ['建议放在插件数组的最前面']
          });
          break;
      }
    });
    
    if (dependencies.length > 0) {
      console.table(dependencies);
    }
  }
  
  provideSuggestions(detectedPlugins) {
    const suggestions = [];
    
    if (!detectedPlugins.hasHtmlWebpackPlugin) {
      suggestions.push({
        type: 'missing',
        plugin: 'HtmlWebpackPlugin',
        reason: '自动生成 HTML 文件',
        priority: 'high'
      });
    }
    
    if (!detectedPlugins.hasMiniCssExtractPlugin) {
      suggestions.push({
        type: 'missing',
        plugin: 'MiniCssExtractPlugin',
        reason: '提取 CSS 到单独文件',
        priority: 'medium'
      });
    }
    
    if (!detectedPlugins.hasCleanWebpackPlugin) {
      suggestions.push({
        type: 'missing',
        plugin: 'CleanWebpackPlugin',
        reason: '清理输出目录',
        priority: 'medium'
      });
    }
    
    if (!detectedPlugins.hasCompressionPlugin && process.env.NODE_ENV === 'production') {
      suggestions.push({
        type: 'missing',
        plugin: 'CompressionPlugin',
        reason: '生产环境建议启用 Gzip 压缩',
        priority: 'low'
      });
    }
    
    if (suggestions.length > 0) {
      console.log('\n=== 优化建议 ===');
      suggestions.forEach((suggestion, index) => {
        console.log(`${index + 1}. [${suggestion.priority.toUpperCase()}] ${suggestion.plugin}`);
        console.log(`   原因: ${suggestion.reason}`);
      });
    } else {
      console.log('\n✅ 插件配置良好，无需额外建议');
    }
  }
}

方法二：运行时插件检测

class RuntimePluginDetector {
  constructor() {
    this.detectedPlugins = new Map();
    this.pluginHooks = new Map();
  }
  
  apply(compiler) {
    // 在编译开始前收集所有插件信息
    compiler.hooks.beforeRun.tap('RuntimePluginDetector', () => {
      this.scanPlugins(compiler);
    });
    
    // 监听各个生命周期，记录哪些插件在哪个阶段被调用
    this.monitorPluginActivity(compiler);
  }
  
  scanPlugins(compiler) {
    console.log('\n=== 运行时插件扫描 ===');
    
    const plugins = compiler.options.plugins || [];
    
    plugins.forEach((plugin, index) => {
      const pluginInfo = {
        name: plugin.constructor.name,
        index,
        module: plugin.constructor.name,
        version: this.getPluginVersion(plugin),
        configuration: this.extractConfiguration(plugin),
        hooks: []
      };
      
      this.detectedPlugins.set(plugin, pluginInfo);
    });
    
    // 显示检测结果
    this.displayPluginSummary();
  }
  
  getPluginVersion(plugin) {
    try {
      // 尝试从插件构造函数或包信息中获取版本
      if (plugin.constructor.version) {
        return plugin.constructor.version;
      }
      
      // 尝试从 package.json 获取版本信息
      const packageName = this.guessPackageName(plugin.constructor.name);
      if (packageName) {
        const packageInfo = require(`${packageName}/package.json`);
        return packageInfo.version;
      }
    } catch (error) {
      // 忽略错误，返回未知版本
    }
    
    return 'unknown';
  }
  
  guessPackageName(pluginName) {
    // 根据插件名推测包名
    const nameMap = {
      'HtmlWebpackPlugin': 'html-webpack-plugin',
      'MiniCssExtractPlugin': 'mini-css-extract-plugin',
      'CleanWebpackPlugin': 'clean-webpack-plugin',
      'CopyWebpackPlugin': 'copy-webpack-plugin',
      'BundleAnalyzerPlugin': 'webpack-bundle-analyzer',
      'CompressionPlugin': 'compression-webpack-plugin'
    };
    
    return nameMap[pluginName] || null;
  }
  
  extractConfiguration(plugin) {
    const config = {};
    
    // 提取常见的配置属性
    ['options', 'opts', 'config', 'settings'].forEach(prop => {
      if (plugin[prop] && typeof plugin[prop] === 'object') {
        Object.assign(config, plugin[prop]);
      }
    });
    
    return config;
  }
  
  monitorPluginActivity(compiler) {
    // 监控主要的生命周期钩子
    const hooksToMonitor = [
      'beforeRun', 'run', 'compilation', 'emit', 'done',
      'watchRun', 'invalid', 'watchClose'
    ];
    
    hooksToMonitor.forEach(hookName => {
      if (compiler.hooks[hookName]) {
        compiler.hooks[hookName].tap('RuntimePluginDetector', (...args) => {
          this.recordPluginActivity(hookName, args);
        });
      }
    });
  }
  
  recordPluginActivity(hookName, args) {
    // 记录插件在特定钩子上的活动
    this.detectedPlugins.forEach((info, plugin) => {
      if (!info.hooks.includes(hookName)) {
        // 检查插件是否监听了这个钩子
        if (this.pluginListensToHook(plugin, hookName)) {
          info.hooks.push(hookName);
        }
      }
    });
  }
  
  pluginListensToHook(plugin, hookName) {
    // 简化的检测逻辑，实际情况更复杂
    try {
      const pluginSource = plugin.apply.toString();
      return pluginSource.includes(hookName);
    } catch (error) {
      return false;
    }
  }
  
  displayPluginSummary() {
    console.log('\n--- 插件详细报告 ---');
    
    const summary = Array.from(this.detectedPlugins.values()).map(info => ({
      插件名: info.name,
      版本: info.version,
      配置项: Object.keys(info.configuration).length,
      主要配置: Object.keys(info.configuration).slice(0, 2).join(', ') || '无'
    }));
    
    console.table(summary);
    
    // 分析插件分布
    this.analyzePluginDistribution();
  }
  
  analyzePluginDistribution() {
    console.log('\n--- 插件类型分析 ---');
    
    const categories = {
      'HTML处理': ['HtmlWebpackPlugin'],
      'CSS处理': ['MiniCssExtractPlugin', 'OptimizeCSSAssetsPlugin'],
      'JS处理': ['TerserPlugin', 'UglifyJsPlugin'],
      '文件操作': ['CleanWebpackPlugin', 'CopyWebpackPlugin'],
      '开发工具': ['HotModuleReplacementPlugin', 'NamedModulesPlugin'],
      '分析工具': ['BundleAnalyzerPlugin'],
      '压缩工具': ['CompressionPlugin'],
      '环境变量': ['DefinePlugin', 'EnvironmentPlugin']
    };
    
    const distribution = {};
    
    Object.keys(categories).forEach(category => {
      distribution[category] = 0;
      categories[category].forEach(pluginName => {
        this.detectedPlugins.forEach(info => {
          if (info.name === pluginName) {
            distribution[category]++;
          }
        });
      });
    });
    
    console.log('插件类型分布:');
    Object.keys(distribution).forEach(category => {
      if (distribution[category] > 0) {
        console.log(`  ${category}: ${distribution[category]} 个`);
      }
    });
  }
}

方法三：配置文件分析

class ConfigAnalyzer {
  static analyzeWebpackConfig(configPath = './webpack.config.js') {
    console.log('\n=== 配置文件分析 ===');
    
    try {
      // 读取配置文件
      const config = require(path.resolve(configPath));
      
      // 处理函数形式的配置
      const resolvedConfig = typeof config === 'function' 
        ? config({ mode: 'development' }, {}) 
        : config;
      
      // 处理数组形式的配置
      const configs = Array.isArray(resolvedConfig) ? resolvedConfig : [resolvedConfig];
      
      configs.forEach((cfg, index) => {
        console.log(`\n配置 ${index + 1}:`);
        this.analyzeConfig(cfg);
      });
      
    } catch (error) {
      console.error('配置文件分析失败:', error.message);
    }
  }
  
  static analyzeConfig(config) {
    if (!config.plugins) {
      console.log('  未发现插件配置');
      return;
    }
    
    const pluginAnalysis = config.plugins.map((plugin, index) => {
      const analysis = {
        序号: index + 1,
        插件名: plugin.constructor.name,
        类型: this.getPluginType(plugin.constructor.name),
        配置复杂度: this.getConfigComplexity(plugin)
      };
      
      return analysis;
    });
    
    console.table(pluginAnalysis);
    
    // 检查插件顺序
    this.checkPluginOrder(config.plugins);
    
    // 检查插件冲突
    this.checkPluginConflicts(config.plugins);
  }
  
  static getPluginType(pluginName) {
    const typeMap = {
      'HtmlWebpackPlugin': 'HTML生成',
      'MiniCssExtractPlugin': 'CSS提取',
      'CleanWebpackPlugin': '文件清理',
      'CopyWebpackPlugin': '文件复制',
      'DefinePlugin': '环境变量',
      'HotModuleReplacementPlugin': '热更新',
      'BundleAnalyzerPlugin': '包分析',
      'CompressionPlugin': '文件压缩',
      'TerserPlugin': 'JS压缩'
    };
    
    return typeMap[pluginName] || '其他';
  }
  
  static getConfigComplexity(plugin) {
    const options = plugin.options || plugin.opts || {};
    const optionCount = Object.keys(options).length;
    
    if (optionCount === 0) return '简单';
    if (optionCount <= 3) return '中等';
    return '复杂';
  }
  
  static checkPluginOrder(plugins) {
    console.log('\n--- 插件顺序检查 ---');
    
    const orderRules = [
      {
        plugin: 'CleanWebpackPlugin',
        position: 'first',
        reason: '应该最先清理输出目录'
      },
      {
        plugin: 'DefinePlugin',
        position: 'early',
        reason: '环境变量定义应该尽早'
      },
      {
        plugin: 'HtmlWebpackPlugin',
        position: 'late',
        reason: '应该在资源生成后处理HTML'
      }
    ];
    
    orderRules.forEach(rule => {
      const pluginIndex = plugins.findIndex(p => p.constructor.name === rule.plugin);
      
      if (pluginIndex !== -1) {
        let isCorrectPosition = false;
        
        switch (rule.position) {
          case 'first':
            isCorrectPosition = pluginIndex === 0;
            break;
          case 'early':
            isCorrectPosition = pluginIndex < plugins.length / 3;
            break;
          case 'late':
            isCorrectPosition = pluginIndex > plugins.length * 2 / 3;
            break;
        }
        
        if (!isCorrectPosition) {
          console.warn(`⚠️  ${rule.plugin} 位置可能不当: ${rule.reason}`);
        } else {
          console.log(`✅ ${rule.plugin} 位置正确`);
        }
      }
    });
  }
  
  static checkPluginConflicts(plugins) {
    console.log('\n--- 插件冲突检查 ---');
    
    const conflicts = [
      {
        plugins: ['MiniCssExtractPlugin', 'style-loader'],
        reason: 'MiniCssExtractPlugin 与 style-loader 功能冲突'
      },
      {
        plugins: ['TerserPlugin', 'UglifyJsPlugin'],
        reason: '不应同时使用多个 JS 压缩插件'
      }
    ];
    
    const pluginNames = plugins.map(p => p.constructor.name);
    
    conflicts.forEach(conflict => {
      const foundPlugins = conflict.plugins.filter(name => pluginNames.includes(name));
      
      if (foundPlugins.length > 1) {
        console.warn(`⚠️  发现冲突: ${foundPlugins.join(' 与 ')}`);
        console.warn(`   原因: ${conflict.reason}`);
      }
    });
  }
}

// 使用示例
module.exports = class AdvancedPluginDetector {
  apply(compiler) {
    // 结合多种检测方法
    new PluginDetectionPlugin().apply(compiler);
    new RuntimePluginDetector().apply(compiler);
    
    // 分析配置文件
    compiler.hooks.beforeRun.tap('AdvancedPluginDetector', () => {
      ConfigAnalyzer.analyzeWebpackConfig();
    });
  }
};

通过以上三种方法，我们可以全面了解 Webpack 项目中使用的插件情况：

1. 基础检测：快速获取插件列表和基本信息
2. 运行时检测：监控插件的实际活动情况
3. 配置分析：静态分析配置文件，检查插件配置的合理性

这些方法可以帮助开发者更好地理解和优化 Webpack 配置。

核心检测原理详解

插件检测的核心原理：

// 判断当前配置是否使用了 ExtractTextPlugin
// compiler 参数即为 Webpack 在 apply(compiler) 中传入的参数
function hasExtractTextPlugin(compiler) {
  // 当前配置所有使用的插件列表
  const plugins = compiler.options.plugins;
  // 去 plugins 中寻找有没有 ExtractTextPlugin 的实例
  return plugins.find(plugin => plugin.__proto__.constructor === ExtractTextPlugin) != null;
}

这段代码展示了插件检测的几个关键点：

1. 通过 compiler.options.plugins 获取插件数组
   • 这是 Webpack 内部存储所有已配置插件的地方
   • 每个插件都是一个实例化的对象
2. 使用原型链检测插件类型
   • plugin.__proto__.constructor 获取插件的构造函数
   • 通过与目标插件类（如 ExtractTextPlugin）进行严格比较来判断类型
3. 实际应用场景
   • 这种检测常用于插件间的兼容性检查
   • 避免功能冲突的插件同时使用
   • 根据已有插件调整当前插件的行为

更完整的检测实现：

class PluginCompatibilityChecker {
  constructor(targetPlugins = []) {
    this.targetPlugins = targetPlugins;
  }
  
  apply(compiler) {
    compiler.hooks.beforeRun.tap('PluginCompatibilityChecker', () => {
      this.checkPluginCompatibility(compiler);
    });
  }
  
  checkPluginCompatibility(compiler) {
    const plugins = compiler.options.plugins || [];
    
    // 检测特定插件是否存在
    this.targetPlugins.forEach(TargetPlugin => {
      const hasPlugin = this.hasPlugin(plugins, TargetPlugin);
      console.log(`${TargetPlugin.name} 检测结果: ${hasPlugin ? '已配置' : '未配置'}`);
      
      if (hasPlugin) {
        const pluginInstance = this.getPluginInstance(plugins, TargetPlugin);
        console.log(`插件配置:`, pluginInstance.options || {});
      }
    });
    
    // 检测插件冲突
    this.checkConflicts(plugins);
  }
  
  // 核心检测方法 - 多种检测方式
  hasPlugin(plugins, TargetPlugin) {
    return plugins.find(plugin => {
      // 方法1: 通过原型链检测（如图中代码）
      if (plugin.__proto__.constructor === TargetPlugin) {
        return true;
      }
      
      // 方法2: 通过 instanceof 检测
      if (plugin instanceof TargetPlugin) {
        return true;
      }
      
      // 方法3: 通过构造函数名检测
      if (plugin.constructor.name === TargetPlugin.name) {
        return true;
      }
      
      return false;
    }) != null;
  }
  
  getPluginInstance(plugins, TargetPlugin) {
    return plugins.find(plugin => 
      plugin.__proto__.constructor === TargetPlugin ||
      plugin instanceof TargetPlugin ||
      plugin.constructor.name === TargetPlugin.name
    );
  }
  
  checkConflicts(plugins) {
    console.log('\n=== 插件冲突检测 ===');
    
    // 定义冲突规则
    const conflictRules = [
      {
        plugins: ['ExtractTextPlugin', 'MiniCssExtractPlugin'],
        reason: '这两个插件功能重复，不应同时使用'
      },
      {
        plugins: ['ExtractTextPlugin', 'style-loader'],
        reason: 'ExtractTextPlugin 会提取CSS，与 style-loader 冲突'
      }
    ];
    
    const pluginNames = plugins.map(plugin => plugin.constructor.name);
    
    conflictRules.forEach(rule => {
      const conflictingPlugins = rule.plugins.filter(name => 
        pluginNames.includes(name)
      );
      
      if (conflictingPlugins.length > 1) {
        console.warn(`⚠️  检测到冲突: ${conflictingPlugins.join(' 与 ')}`);
        console.warn(`   原因: ${rule.reason}`);
      }
    });
  }
}

// 使用示例
const checker = new PluginCompatibilityChecker([
  require('extract-text-webpack-plugin'),
  require('mini-css-extract-plugin'),
  require('html-webpack-plugin')
]);

实际项目中的应用场景：

// 场景1: 根据现有插件调整行为
class SmartCssPlugin {
  apply(compiler) {
    const hasExtractText = this.hasExtractTextPlugin(compiler);
    const hasMiniCss = this.hasMiniCssExtractPlugin(compiler);
    
    if (hasExtractText) {
      console.log('检测到 ExtractTextPlugin，使用兼容模式');
      this.setupExtractTextMode(compiler);
    } else if (hasMiniCss) {
      console.log('检测到 MiniCssExtractPlugin，使用现代模式');
      this.setupMiniCssMode(compiler);
    } else {
      console.log('未检测到CSS提取插件，使用默认模式');
      this.setupDefaultMode(compiler);
    }
  }
  
  hasExtractTextPlugin(compiler) {
    const plugins = compiler.options.plugins || [];
    return plugins.some(plugin => 
      plugin.constructor.name === 'ExtractTextPlugin'
    );
  }
  
  hasMiniCssExtractPlugin(compiler) {
    const plugins = compiler.options.plugins || [];
    return plugins.some(plugin => 
      plugin.constructor.name === 'MiniCssExtractPlugin'
    );
  }
}

检测方法的优缺点对比：

检测方法	优点	缺点	适用场景
__proto__.constructor	精确匹配类型	依赖原型链，可能被修改	严格的类型检查
instanceof	标准JS方法	跨Realm可能失效	一般的实例检查
constructor.name	简单易懂	名称可能重复或被混淆	快速的名称匹配

通过这种检测机制，插件可以智能地感知环境，避免冲突，提供更好的兼容性。

实战

实战案例：性能监控 Plugin

class PerformanceMonitorPlugin {
  constructor(options = {}) {
    this.options = {
      threshold: 250, // 超过250KB的资源会被标记
      showDetails: true,
      ...options
    };
    this.startTime = 0;
    this.buildTimes = [];
  }
  
  apply(compiler) {
    // 记录构建开始时间
    compiler.hooks.beforeRun.tap('PerformanceMonitorPlugin', () => {
      this.startTime = Date.now();
    });
    
    compiler.hooks.watchRun.tap('PerformanceMonitorPlugin', () => {
      this.startTime = Date.now();
    });
    
    // 分析构建性能
    compiler.hooks.done.tap('PerformanceMonitorPlugin', (stats) => {
      const buildTime = Date.now() - this.startTime;
      this.buildTimes.push(buildTime);
      
      console.log('\n=== 构建性能分析 ===');
      console.log(`构建时间: ${buildTime}ms`);
      
      if (this.buildTimes.length > 1) {
        const averageTime = this.buildTimes.reduce((a, b) => a + b, 0) / this.buildTimes.length;
        console.log(`平均构建时间: ${Math.round(averageTime)}ms`);
      }
      
      this.analyzeAssetSizes(stats.compilation);
      this.analyzeModulePerformance(stats.compilation);
    });
  }
  
  analyzeAssetSizes(compilation) {
    console.log('\n--- 资源大小分析 ---');
    
    const assets = Object.keys(compilation.assets).map(name => {
      const asset = compilation.assets[name];
      const size = asset.size();
      return { name, size, sizeKB: Math.round(size / 1024 * 100) / 100 };
    });
    
    // 按大小排序
    assets.sort((a, b) => b.size - a.size);
    
    // 显示前10个最大的资源
    console.table(assets.slice(0, 10));
    
    // 标记超过阈值的资源
    const largeAssets = assets.filter(asset => asset.sizeKB > this.options.threshold);
    if (largeAssets.length > 0) {
      console.warn(`⚠️  发现 ${largeAssets.length} 个超过 ${this.options.threshold}KB 的大资源:`);
      largeAssets.forEach(asset => {
        console.warn(`   ${asset.name}: ${asset.sizeKB}KB`);
      });
    }
  }
  
  analyzeModulePerformance(compilation) {
    if (!this.options.showDetails) return;
    
    console.log('\n--- 模块构建时间分析 ---');
    
    const moduleTimings = [];
    compilation.modules.forEach(module => {
      if (module.buildInfo && module.buildInfo.buildTime && module.resource) {
        moduleTimings.push({
          resource: module.resource.replace(process.cwd(), '.'),
          buildTime: module.buildInfo.buildTime,
          size: module.size()
        });
      }
    });
    
    // 按构建时间排序
    moduleTimings.sort((a, b) => b.buildTime - a.buildTime);
    
    // 显示前10个构建时间最长的模块
    console.table(moduleTimings.slice(0, 10));
  }
}

实战案例：代码分割优化 Plugin

class CodeSplitOptimizationPlugin {
  constructor(options = {}) {
    this.options = {
      minSize: 20000,
      maxSize: 250000,
      ...options
    };
  }
  
  apply(compiler) {
    compiler.hooks.compilation.tap('CodeSplitOptimizationPlugin', (compilation) => {
      compilation.hooks.optimizeChunks.tap('CodeSplitOptimizationPlugin', (chunks) => {
        console.log('\n=== 代码分割优化分析 ===');
        
        this.analyzeChunkSizes(chunks);
        this.suggestOptimizations(chunks);
      });
    });
  }
  
  analyzeChunkSizes(chunks) {
    const chunkInfo = [];
    
    chunks.forEach(chunk => {
      const size = chunk.size();
      const moduleCount = Array.from(chunk.modulesIterable).length;
      
      chunkInfo.push({
        name: chunk.name || chunk.id,
        size: Math.round(size / 1024),
        moduleCount,
        isEntry: chunk.hasEntryModule(),
        parents: chunk.parents.length,
        children: chunk.children.length
      });
    });
    
    chunkInfo.sort((a, b) => b.size - a.size);
    console.table(chunkInfo);
  }
  
  suggestOptimizations(chunks) {
    const suggestions = [];
    
    chunks.forEach(chunk => {
      const size = chunk.size();
      const sizeKB = Math.round(size / 1024);
      
      if (sizeKB > this.options.maxSize / 1024) {
        suggestions.push({
          type: 'split',
          chunk: chunk.name || chunk.id,
          reason: `代码块过大 (${sizeKB}KB)，建议进一步分割`,
          recommendation: '考虑使用动态导入或分离第三方库'
        });
      }
      
      if (sizeKB < this.options.minSize / 1024 && !chunk.hasEntryModule()) {
        suggestions.push({
          type: 'merge',
          chunk: chunk.name || chunk.id,
          reason: `代码块过小 (${sizeKB}KB)，建议合并`,
          recommendation: '调整 splitChunks 配置或合并相关模块'
        });
      }
    });
    
    if (suggestions.length > 0) {
      console.log('\n--- 优化建议 ---');
      suggestions.forEach((suggestion, index) => {
        console.log(`${index + 1}. [${suggestion.type.toUpperCase()}] ${suggestion.chunk}`);
        console.log(`   原因: ${suggestion.reason}`);
        console.log(`   建议: ${suggestion.recommendation}\n`);
      });
    } else {
      console.log('\n✅ 代码分割配置良好，无需优化');
    }
  }
}

实战案例：环境配置 Plugin

class EnvironmentConfigPlugin {
  constructor(options = {}) {
    this.options = {
      configFile: 'config.json',
      ...options
    };
  }
  
  apply(compiler) {
    const mode = compiler.options.mode || 'development';
    
    compiler.hooks.environment.tap('EnvironmentConfigPlugin', () => {
      this.injectEnvironmentVariables(compiler, mode);
    });
    
    compiler.hooks.emit.tapAsync('EnvironmentConfigPlugin', (compilation, callback) => {
      this.generateConfigFile(compilation, mode);
      callback();
    });
  }
  
  injectEnvironmentVariables(compiler, mode) {
    const envConfig = this.loadEnvironmentConfig(mode);
    
    // 将环境变量注入到 DefinePlugin
    const definePlugin = new compiler.webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify(mode),
      'process.env.BUILD_TIME': JSON.stringify(new Date().toISOString()),
      ...this.stringifyEnvVars(envConfig)
    });
    
    definePlugin.apply(compiler);
    
    console.log(`Environment variables injected for ${mode} mode:`, envConfig);
  }
  
  loadEnvironmentConfig(mode) {
    const fs = require('fs');
    const path = require('path');
    
    const configFiles = [
      `config.${mode}.json`,
      'config.json'
    ];
    
    for (const file of configFiles) {
      const configPath = path.resolve(process.cwd(), file);
      if (fs.existsSync(configPath)) {
        try {
          return JSON.parse(fs.readFileSync(configPath, 'utf8'));
        } catch (error) {
          console.warn(`Failed to parse config file ${file}:`, error.message);
        }
      }
    }
    
    return {};
  }
  
  stringifyEnvVars(config) {
    const result = {};
    
    Object.keys(config).forEach(key => {
      if (typeof config[key] === 'object') {
        result[`process.env.${key}`] = JSON.stringify(config[key]);
      } else {
        result[`process.env.${key}`] = JSON.stringify(config[key]);
      }
    });
    
    return result;
  }
  
  generateConfigFile(compilation, mode) {
    const config = {
      mode,
      buildTime: new Date().toISOString(),
      version: require(path.resolve(process.cwd(), 'package.json')).version,
      assets: Object.keys(compilation.assets).filter(name => !name.endsWith('.map')),
      chunks: Array.from(compilation.chunks).map(chunk => ({
        id: chunk.id,
        name: chunk.name,
        files: Array.from(chunk.files)
      }))
    };
    
    const configContent = JSON.stringify(config, null, 2);
    compilation.assets[this.options.configFile] = {
      source: () => configContent,
      size: () => configContent.length
    };
  }
}