babel： 广泛的转码器,（es6/ts代码转成es5代码）

loader：加载更类资源文件

**plugin：**插件

补充

补充：babel 是一个 JavaScript 编译器（transpiler），把 ES6+ / TypeScript / JSX 等新语法转换为向后兼容的 JS；通过 @babel/preset-env、@babel/preset-react、@babel/preset-typescript 等预设组合。在 webpack 中由 babel-loader 调用。

loader 是 webpack 用来"加载非 JS 资源"的转换器，每个 loader 接收文件内容、返回处理后的 JS 字符串，链式调用（从右到左）。常用 loader：

  • babel-loader：转换 JS 语法。
  • ts-loader / esbuild-loader / swc-loader：转译 TypeScript（后两者速度远快于 ts-loader）。
  • css-loader、style-loader、sass-loader、less-loader、postcss-loader：处理 CSS / SCSS / Less。
  • file-loader（webpack 5 已内置资源模块 asset/resource）：处理图片 / 字体。
  • url-loader：把小资源内联为 base64。
  • vue-loader：处理 .vue 单文件组件。
  • thread-loader：把耗时 loader 放入 worker 线程。

plugin 是 webpack 基于 Tapable 事件流机制实现的扩展点，可以在整个编译生命周期（compiler.hooks、compilation.hooks）中挂钩修改产物。常用 plugin：

  • HtmlWebpackPlugin：自动生成 HTML 并注入 bundle。
  • MiniCssExtractPlugin：把 CSS 抽取成单独文件。
  • DefinePlugin：注入构建期常量（如 process.env.NODE_ENV）。
  • TerserPlugin / CssMinimizerPlugin：压缩 JS / CSS。
  • CleanWebpackPlugin：构建前清理输出目录。
  • CopyWebpackPlugin：复制静态资源到输出目录。
  • BundleAnalyzerPlugin：可视化包体积分析。
  • ModuleFederationPlugin：模块联邦（Webpack 5）。

loader 与 plugin 的区别：loader 做的是文件级转换（A 文件 → B 文件），plugin 做的是构建流程干预（在特定钩子修改输出）。两者在 webpack 中相互配合，共同完成构建管线。

来源整理自：我的有道云笔记