webpack 中 loader 和 plugin

1. 功能定位

   • Loader
     • 作用对象
       • 是翻译官，处理单文件
     • 功能
       • 将非JS模块文件（vue/css/TS/png等）源代码转换成Webpack能处理的模块
     • 特点
       • 是“文件加载器”，针对指定类型文件进行转换
     • 示例
       • css-loader 用于解析 css模块中的import() 和 url()等语句
       • style-loader 将css代码注入到HTML的中
   • Plugin
     • 作用对象
       • 是工程师，优化整个构建流程
     • 功能
       • 扩展Webpack能力，介入打包生命周期，在特定生命周期节点上执行不同任务，比如代码压缩/资源管理/环境变量注入等
     • 特点
       • 是“插件”，能监听Webpack事件并改变输出结果
     • 示例
       • HtmlWebpackPlugin会自动生成HTML文件，并将打包后的 JS 文件自动引入到该 HTML 文件

2. 执行时机

   • Loader
     • 在模块加载阶段（module.rules配置阶段）执行，针对每个匹配的文件依次处理
     • 当Webpack遇到一个模块时，会根据配置的Loader规则对其进行转换
   • Plugin
     • Webpack的整个生命周期中运行（通过监听hook事件）
       • beforeRun 构建前
       • compile 编译时
       • emit 生成资源到输出目录前
       • afterEmit 生成文件到输出目录后
       • done 构建完成时

3. 配置方式

   • Loader
     • 在webpack.config.js的module.rules中配置，通过test配置文件类型，use指定Loader

     module.exports = {
         module: {
             rules: [
                 { test: /\.css$/, use: ['style-loader', 'css-loader'] }
             ]
         }
     }
     

   • Plugin
     • 用require()需要先导入插件，然后在plugins数组中实例化

     const HtmlWebpackPlugin = require('html-webpack-plugin')
     module.exports = {
         plugins: [
             new HtmlWebpackPlugin({ template: './src/index.html' })
         ]
     }
     

4. 典型场景

   • Loader
     • 转换文件
       • babel-loader -> 转译JS
       • ts-loader -> 处理TS文件
     • 处理样式
       • css-loader -> 解析css
       • sass-loader -> 编译SCSS
     • 处理资源
       • file-loader -> 处理图片/字体
   • Plugin
     • 生成html： HtmlWebpackPlugin
     • 优化代码：TerserPlugin (压缩JS)， CssMinimizerPlugin（压缩CSS）
     • 清理构建目录：CleanWebpackPlugin
     • 环境变量注入：DefinePlugin

总结

特性	Loader	Plugin
作用对象	单个文件	整个构建流程
功能	文件转换/预处理	扩展 Webpack 能力
执行时机	模块加载阶段	整个生命周期（通过钩子监听）
配置方式	module.rules 中的 use 字段	plugins 数组实例化
本质	函数（输入 → 输出）	类（实现 apply 方法）

---