从loader和plugin开始了解webpack

一、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对象

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