webpack构建高级

按提升开发体验、加快构建速度、减少代码体积、优化代码性能四个方向，提纲式总结 webpack 常用优化手段与关键配置，并给出对照表、注意事项和量化方法。

介绍 PWA 的动机与组成：Service Worker、Web App Manifest 与 HTTPS，讲解 SW 生命周期、缓存策略、manifest 字段，并给出 Workbox 在 webpack 中的两种落地方式与完整配置。

区分 Babel 管语法、core-js 管 API，讲解 core-js 的引入方式、useBuiltIns 的 usage/entry、transform-runtime 不污染全局的库方案、browserslist 配合与版本匹配等注意事项。

讲解代码分割的动机与三种手段：多入口、动态 import()（含魔法注释与路由级分割）、splitChunks 公共依赖提取、runtimeChunk 稳定缓存，并说明产物命名与过度分割等注意事项。

介绍 image-minimizer-webpack-plugin 如何配合 asset modules 在构建时压缩图片，涵盖 imagemin/sharp 两种实现、无损与有损压缩、WebP 转换、配置要点与注意事项。

讲解 Tree Shaking 的原理与落地条件：ESM 静态分析、usedExports 标记、sideEffects 声明、Terser 删除，并给出配置示例、验证方法和常见失效原因（如 Babel 转 CommonJS、误删 CSS）。

讲解 babel-loader 的 cacheDirectory 缓存机制与失效原理、eslint-webpack-plugin 的 cache 与缓存策略，并说明它们与 webpack filesystem cache 的关系及常见问题。

解释 test 之外 include/exclude 的作用，说明白名单与黑名单的语义、绝对路径与数组/函数用法、条件组合，以及排除 node_modules 但保留特定包等常见坑。

讲解 module.rules 默认全量匹配的问题，说明 oneOf 的短路匹配语义、顺序敏感与互斥要求等使用要点，并给出需要叠加 loader 时的处理方式和完整配置。

围绕为什么、是什么、怎么用三个问题讲解 HMR：整页刷新为何丢状态、热替换的运行机制、以及 devServer.hot、module.hot.accept、React Refresh、vue-loader 等实际用法与排错要点。

先讲没有 Source Map 时打包后代码行号错乱、变量名丢失、无法断点的调试痛点，再解释 Source Map 的字段与原理，最后给出 devtool 各取值的含义和开发/生产环境的最佳实践。