loader
style-loader: 将css添加到DOM的内联样式标签style里
css-loader :允许将css文件通过require的方式引入，并返回css代码
less-loader: 处理less
sass-loader: 处理sass
postcss-loader: 用postcss来处理CSS
autoprefixer-loader: 处理CSS3属性前缀，已被弃用，建议直接使用postcss
file-loader: 分发文件到output目录并返回相对路径
url-loader: 和file-loader类似，但是当文件小于设定的limit时可以返回一个Data Url
html-minify-loader: 压缩HTML
babel-loader:用babel来转换ES6文件到ES
swc-loader: SWC 既可用于编译，也可用于打包。对于编译，它使用现代 JavaScript 功能获取 JavaScript / TypeScript 文件并输出所有主流浏览器支持的有效代码,提升20-70倍。
ts-loader: 将 TypeScript 文件编译为 JavaScript 文件，通常与 Babel 配合使用，以获得对 TypeScript 代码的完全控制。
vue-loader: 处理 .vue 文件，允许将 Vue.js 组件的模板、脚本和样式进行单文件组件（SFC）的开发。
babel-loader + @babel/preset-react: 使用 Babel 将 JSX 和 ES6+ 的 JavaScript 代码转换为兼容更广泛浏览器的代码。用于 React 项目中。
babel-loader + @babel/preset-typescript: 使用 Babel 将 TypeScript 转换为 JavaScript，同时保留类型信息，用于结合 Babel 的 TypeScript 项目。
html-loader: 处理 HTML 文件中的 img 等标签的 src 属性，解析资源路径并进行必要的加载操作。
raw-loader: 将文件内容作为字符串加载到 JavaScript 中。适用于加载文本文件或非代码文件内容，如 .txt、.md 文件。
thread-loader: 为 CPU 密集型的构建任务（如 Babel 转译、TypeScript 编译、Sass 预处理等）开启多线程处理，显著加快构建速度。适用于大型项目，尤其是构建时间较长的场景。
cache-loader: 用于在磁盘上缓存 Loader 的结果，以减少重新构建时的处理时间。特别适用于构建时间较长的项目，如 Babel、TypeScript 或图像处理。
babel-loader with @babel/plugin-transform-runtim: 用于优化 Babel 编译的输出，避免重复引入辅助代码（如 _extends、_classCallCheck），减少最终 bundle 的大小，尤其是在多个模块中使用相同辅助代码时。
image-webpack-loader: 用于优化和压缩图像文件（如 PNG、JPEG、GIF、SVG 等），以减少图像文件的大小，提高页面加载速度。特别适用于需要大量图片资源的网站。
vue-loader with vue-style-loader: vue-loader 是处理 Vue 单文件组件（SFC）的 Loader，而 vue-style-loader 则专门用于处理 Vue 组件中的样式部分，使样式在组件加载时动态插入到 DOM 中。这种组合特别适用于大型 Vue.js 项目。
postcss-loader with postcss-preset-env: postcss-loader 可以通过插件扩展 PostCSS 的功能，而 postcss-preset-env 是一个高级插件集，包含了现代 CSS 特性支持、自动添加浏览器前缀、转换未来的 CSS 标准等功能。适用于需要高级 CSS 特性和兼容性的项目。
eslint-loader: 在编译时检查 JavaScript/TypeScript 代码中的语法和风格问题，确保代码风格一致性和质量。适用于大型团队协作开发项目。
svg-inline-loader: 将 SVG 文件转换为内联的 SVG 字符串，直接在 HTML 或 JavaScript 中使用。这可以减少对外部 SVG 文件的请求，并允许动态修改 SVG 的属性。
worker-loader: 用于将 Web Workers 作为模块加载，允许你将多线程处理引入到你的 Web 应用中，从而提升性能。适用于需要执行大量计算的前端项目。
markdown-loader: 将 Markdown 文件转换为 HTML 字符串，适用于需要将 Markdown 内容直接嵌入到 Web 应用中的场景。
graphql-tag/loader: 允许你直接导入 .graphql 或 .gql 文件，将 GraphQL 查询转换为解析的 GraphQL DocumentNode。适用于使用 GraphQL 的项目。
val-loader: 允许你在构建时执行 JavaScript 代码并返回编译时值，通常用于动态生成模块内容。
plugin
clean-webpack-plugin：删除（清理）构建目录
CopyWebpackPlugin：将单个文件或整个目录复制到构建目录
HtmlwebpackPlugin： 简单创建HTML文件，用于服务器访问
ExtractTextWebpackPlugin: 从 bundle 中提取文本 (CSS) 到单独的文件
OptimizeCssAssetsWebpackPlugin: 用于优化和压缩 CSS 资源，通常与 MiniCssExtractPlugin 一起使用，以减少最终生成的 CSS 文件大小。
PurgeCSSWebpackPlugin: 通过分析项目中实际使用的 CSS 类名，移除未使用的 CSS，显著减少 CSS 文件大小。这对于大型项目中的 CSS 文件特别有效，避免不必要的样式加载。
BabeMinifyWebpackPlugin: 使用 babel-minify进行压缩
TerserWebpackPlugin: 用于压缩和优化 JavaScript 文件，通常在生产环境中使用，以减少文件大小和提高加载速度。
CompressionWebpackPlugin: 用于生成压缩版本的资源文件（如 .gz），以供服务器端使用。通过压缩提高文件传输效率，特别适用于生产环境。
DefinePlugin: 允许在编译时(compile time)配置的全局常量
Dllplugin: 为了极大减少构建时间，进行分离打包.
HotModuleReplacementPlugin:启用模块热替换(Enable Hot Module Replacement -
HMR)
AggressiveSplittingPlugin: 将原来的 chunk 分成更小的 chunk
CommonsChunkPlugin: 提取 chunks 之间共享的通用模块
LimitChunkCountPlugin: 设置 chunk 的最小/最大限制，以微调和控制 chunk
MinChunkSizePlugin: 确保 chunk 大小超过指定限制
NoEmitOnErrorsPlugin: 在输出阶段时，遇到编译错误跳过
HardSourceWebpackPlugin: 提供构建的中间缓存，显著提高二次构建的速度。对于大型项目，构建时间通常较长，此插件通过缓存构建过程中的模块结果，减少后续构建时间。
WorkboxWebpackPlugin: 用于在构建过程中自动生成 Service Worker，帮助构建 PWA（渐进式 Web 应用），提高离线支持能力、资源缓存和页面加载性能。
SpeedMeasurePlugin: 分析和测量 Webpack 构建过程中的时间消耗，帮助开发者识别构建过程中的性能瓶颈并进行优化。
WebpackBundleAnalyzer: 提供打包分析工具，生成交互式可视化图表，展示各个模块在打包后的大小占比，帮助开发者进行打包优化。
WebpackBar: 一个简洁的构建进度条插件，增强了 Webpack 的开发体验，尤其是在大型项目中，它可以直观地展示构建进度，并支持自定义样式和显示内容。
ESLintWebpackPlugin: 将 ESLint 集成到 Webpack 构建过程中，对项目代码进行静态检查，确保代码风格一致性和质量。这个插件帮助开发者在开发过程中实时捕捉代码中的问题。
ModuleFederationPlugin: Webpack 5 引入的模块联邦（Module Federation）插件，支持在多个独立构建之间共享模块。这对于构建微前端架构特别有用，允许应用程序跨多个构建动态加载代码。
plugin个编译生命周期钩子，有如下：
• entry-option ：初始化 option
• run
• compile： 真正开始的编译，在创建 compilation 对象之前
• compilation ：生成好了 compilation 对象
• make 从 entry 开始递归分析依赖，准备对每个模块进行 build
• after-compile： 编译 build 过程结束
• emit ：在将内存中 assets 内容写到磁盘文件夹之前
• after-emit ：在将内存中 assets 内容写到磁盘文件夹之后
• done： 完成所有的编译过程
• failed： 编译失败的时候
