用途
本技能是一份 Webpack 与 Vite 的前端打包配置参考，用于在需要编写或调整前端构建配置时提供示例代码。当用户提到 webpack、vite、bundler、vite config、webpack config、code splitting 等关键词时适用。
主要能力
Vite 配置
提供 vite.config.ts 示例，包含插件、路径别名（resolve.alias）、开发服务器（server.port、open、strictPort）、构建选项（outDir、sourcemap、target、minify、rollupOptions.output.manualChunks）、依赖预打包（optimizeDeps.include/exclude）以及 CSS 模块与预处理器选项。
Vite 环境变量
说明 .env 系列文件与 VITE_ 前缀规则：只有 VITE_ 前缀的变量会暴露给客户端代码，非前缀变量（如 DB_PASSWORD）不会暴露。示例展示 import.meta.env.VITE_API_URL、import.meta.env.DEV、import.meta.env.MODE 的用法，以及 env.d.ts 类型声明写法。
Vite 插件
列出常用插件：@vitejs/plugin-react（基于 Babel）、@vitejs/plugin-react-swc（基于 SWC，更快）、@vitejs/plugin-vue、vite-plugin-svgr、vite-plugin-pwa、@vitejs/plugin-legacy、rollup-plugin-visualizer，并给出组合配置示例。
Vite 开发服务器与代理
展示 server.proxy 配置（含 changeOrigin、rewrite、WebSocket 代理 ws: true）、HTTPS 证书、CORS 以及 monorepo 场景下的 fs.allow。
Webpack 5 配置
提供完整配置示例，包含 mode、多入口 entry、output（contenthash、chunkFilename、clean、publicPath）、resolve（extensions、alias）、module.rules（babel-loader、CSS/SCSS、asset 模块、字体资源）以及 HtmlWebpackPlugin、MiniCssExtractPlugin。并注明 Webpack 5 的 asset modules 已替代 file-loader、url-loader、raw-loader。
Webpack 插件
包含 DefinePlugin、ProvidePlugin、CopyWebpackPlugin、BundleAnalyzerPlugin 的用法示例。
代码分割
展示动态 import 与 React.lazy 用法、webpackChunkName 注释、Webpack splitChunks 配置（cacheGroups、runtimeChunk）以及 Vite 的 manualChunks 函数写法。
Tree Shaking
说明 package.json 中 sideEffects 字段的配置方式，对比 lodash-es（ESM，可 tree-shake）与 lodash（CJS，不可 tree-shake），并指出 Webpack 需 production 模式启用 terser 与死代码消除，Vite 生产环境默认通过 Rollup 开启 tree shaking。
打包分析
Webpack 可用 --profile --json 生成 stats.json 配合 webpack-bundle-analyzer，或使用 BundleAnalyzerPlugin；Vite 使用 rollup-plugin-visualizer。
Webpack Dev Server
展示 devServer 配置，包含 port、hot、historyApiFallback（SPA 路由回退）、compress、proxy、https、static。
生产优化
Webpack 侧包含 TerserPlugin（drop_console、drop_debugger）、CssMinimizerPlugin、CompressionPlugin（gzip）以及 devtool 选项；Vite 侧包含 sourcemap: 'hidden'、minify: 'terser'、cssCodeSplit、assetsInlineLimit、chunkSizeWarningLimit。
CSS 处理
提供 postcss.config.js 示例（tailwindcss、autoprefixer、cssnano），并说明 Vite 直接安装 sass 导入 .scss 无需 loader 配置，Webpack 需在 module.rules 中添加 sass-loader。
从 Webpack 迁移到 Vite
给出安装命令、创建 vite.config.ts、移动 index.html 并添加 module script、更新 package.json scripts 的步骤，并提供对照表：require/module.exports 对应 import/export、process.env.X 对应 import.meta.env.VITE_X、file-loader/url-loader 对应原生静态资源处理、DefinePlugin 对应 define 选项、webpackChunkName 注释对应 manualChunks、require.context() 对应 import.meta.glob()、webpack-dev-server proxy 对应 server.proxy。
Monorepo 打包
分别给出 Vite 与 Webpack 在 monorepo 下的别名、optimizeDeps、fs.allow、symlinks、include 路径等配置示例。
性能预算
Webpack 内置 performance 配置（hints、maxAssetSize、maxEntrypointSize、assetFilter）；并介绍 size-limit 工具，可在 CI 中使用，兼容 Webpack 与 Vite。
使用方式
本技能以参考文档形式提供配置示例与命令，用户可依据示例编写或调整自己的构建配置。安装命令、代码片段均按原文保留。
适用场景
适用于前端项目的构建配置编写与优化，包括 Vite 与 Webpack 的配置、代码分割、Tree Shaking、打包体积分析、开发服务器代理、生产环境优化、CSS 处理、从 Webpack 迁移到 Vite、Monorepo 打包以及性能预算设置。
限制
本资料为配置参考，未提供具体版本兼容性说明、性能基准数据、收费或价格信息，也未提供官方支持渠道等信息。