从loader和plugin开始了解webpack

目录

• 一、webpack中loader和plugin的区别
• • [1. Loader（每个 Loader 是一个函数或对象）](#1. Loader（每个 Loader 是一个函数或对象）)
  • [2.plugin（每个 Plugin 是一个实例）](#2.plugin（每个 Plugin 是一个实例）)
  • 3.自定义loader和plugin
• 二、Babel的功能
• 三、Plugin中的compiler和compilation对象
• • [1. compiler对象](#1. compiler对象)
  • [2. compilation对象](#2. compilation对象)

一、webpack中loader和plugin的区别

1. Loader（每个 Loader 是一个函数或对象）

• 功能：文件转换 --> 将源文件转换为webpack可以处理的模块
• 处理单位：单个文件（.js,.css,.png）
• 执行顺序：链式调用，按配置顺序依次执行（源文件 -> Loader1 -> Loader2 -> ... -> Webpack可用模块）

// webpack.config.js
module: {
  rules: [
    {
      test: /\.css$/,
      use: [ // 执行顺序从后到前
        'style-loader',  // 将CSS注入DOM
        'css-loader',    // 解析CSS中的@import和url()，支持css modules
        'postcss-loader' // 添加浏览器前缀
      ]
    }
  ]
}

• 常用Loader
  代码转换：Babel(.js),TypeScript(.ts)
  样式处理：css-loader,sass-loader,postcss-loader
  文件处理：file-loader,url-loader(小图转为Base64),svg-loader
  模版编译：pug-loader,handlebard-loader

2.plugin（每个 Plugin 是一个实例）

• 功能：扩展功能 --> 在Webpack构建流程的特定阶段执行自定义逻辑
• 处理单位：整个构建过程（如打包完成后生成HTML文件）
• 执行顺序：基于事件钩子，可在特定阶段多次触发（Webpack启动 -> 触发各种事件钩子 -> Plugin监听特定钩子并执行逻辑）

// webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin');

plugins: [
  new HtmlWebpackPlugin({
    template: './src/index.html' // 基于模板生成HTML
  })
]

• 常用Plugins
  CleanWebpackPlugin(),// 每次构建前清空dist目录
  MiniCssExtractPlugin(), // 提取CSS到单独文件，通常生产环境中，替代style-loader
  TerserPlugin(), // 压缩JS
  HtmlWebpackPlugin(), // 生成 HTML

3.自定义loader和plugin

1. 极简的loader

module.exports = function(source) {
  // source: 输入的文件内容（字符串或Buffer）
  // 获取loader配置参数，this.getOptions 是 Webpack 提供的标准化参数获取方式
  const options = this.getOptions() || {};
  // 处理逻辑...
  return source; // 返回处理后的内容
};

2. 极简的plugin

class MyPlugin {
  constructor(options) {
    this.options = options; // 接收配置参数
  }
  
  apply(compiler) { // compiler见下
    // 注册钩子监听编译过程
    compiler.hooks.someHook.tap('MyPlugin', (compilation) => { // compilation见下
      // 处理逻辑...
    });
  }
}

module.exports = MyPlugin;

二、Babel的功能

一句话概括：Babel的功能是JavaScript代码转换

• 可处理：ES6+语法转为ES5兼容形式、API补全（Promise，Array.includes）、适配不同浏览器|node版本等
• Babel 的核心是插件系统，每个转换功能由独立插件实现

// babel.config.js
module.exports = {
  plugins: [
    "@babel/plugin-transform-arrow-functions", // 转换箭头函数
    "@babel/plugin-transform-classes", // 转换 class 语法
    "@babel/plugin-proposal-object-rest-spread" // 转换展开运算符
  ]
};

• Presets（预设）：预设是一组插件的集合，避免手动配置大量插件

// babel.config.js
module.exports = {
  presets: [
    "@babel/preset-env", // 智能转换 ES6+ 代码
    "@babel/preset-react", // 转换 JSX
    "@babel/preset-typescript" // 转换 TypeScript
  ]
};

• Babel 的工作流程：解析代码 → 转换 AST → 生成新代码。
• Babel常和webpack协作，通过babel-loader作为桥梁

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        use: {
          loader: 'babel-loader', // 调用Babel编译JS文件
          options: {
            presets: ['@babel/preset-env']
          }
        }
      }
    ]
  }
};

三、Plugin中的compiler和compilation对象

1. compiler对象

全局单例，代表整个webpack编译过程，包含所有配置信息，监听编译全过程（compile、emit、done）

• compile：当 Webpack 开始新的一轮编译时触发（在读取配置后，真正编译前） ---> 获取编译配置、修改默认行为
• emit：在文件输出到磁盘前触发（所有模块已编译，资源已生成）。 ---> 修改输出资源（如重命名文件、添加额外内容）。
• done：整个编译过程完成时触发（文件已写入磁盘）。 ---> 执行编译后的操作（如通知构建完成、生成报告）。

2. compilation对象

每次构建创建，代表一次具体的编译过程，包含当前构建的所有模块、资源和依赖关系，可修改、添加或删除构建产物