TypeScript项目中Webpack多入口打包与代码分割的核心是：一、通过entry对象配置多入口并用[name]占位符生成独立bundle；二、借助splitChunks自动提取公共及第三方代码，配合HtmlWebpackPlugin多实例确保资源精准挂载。
TypeScript 项目中用 Webpack 做多入口打包和代码分割，核心是两件事：一是让不同入口生成独立 bundle，二是把公共或第三方代码抽离出来复用。关键不在“能不能”，而在“怎么配得干净、可维护、不踩坑”。
多入口配置：明确每个起点，输出带名文件
入口不止一个，比如有 main.ts（主应用）和 admin.ts（后台管理），就得在 entry 里写成对象形式：
- entry 配置为对象，键名即 chunk 名：
entry: { main: './src/main.ts', admin: './src/admin.ts' } - output 的
filename必须含[name]占位符，如js/[name].[contenthash:8].js，否则所有入口会打到同一个文件里 - 建议搭配
HtmlWebpackPlugin多实例，每个入口对应一个 HTML，避免资源错挂：new HtmlWebpackPlugin({ filename: 'main.html', chunks: ['main'] })new HtmlWebpackPlugin({ filename: 'admin.html', chunks: ['admin'] })
自动代码分割：靠 splitChunks 提取共用逻辑
多入口之间难免有重复依赖（比如都用了 lodash 或自定义的 utils.ts），手动拆包容易漏，交给 Webpack 自动做更稳：
- 启用
optimization.splitChunks，设chunks: 'all'，确保同步和异步模块都参与分析 - 加
cacheGroups精准控制提取规则，例如：vendor: { test: /[\/]node_modules[\/]/, name: 'vendors', chunks: 'all' }common: { name: 'common', minChunks: 2, chunks: 'all' } - 注意
minChunks: 2表示至少被两个入口引用才抽离，避免把只用一次的代码也拎出来
配合 TypeScript：确保类型与打包行为一致
TypeScript 编译本身不干预打包逻辑，但配置不对会导致类型检查通过、运行时报错，或分包失效：
-
tsconfig.json中"module"推荐设为"ESNext"，和 Webpack 默认解析方式对齐 - Webpack 的
resolve.extensions要包含'.ts'，否则import '@/utils'可能找不到文件 - 如果用了路径别名（如
@/指向src/），记得在 Webpack 和tsconfig.json的baseUrl+paths里同时配好，否则类型提示和实际打包路径可能不一致
验证是否生效：看 dist 目录和打包报告
配完别急着上线，先确认结果符合预期：
- 构建后
dist/js/下应有main.xxxx.js、admin.xxxx.js、vendors.xxxx.js、common.xxxx.js等多个文件 - 启动
webpack --stats=verbose或加webpack-bundle-analyzer插件，直观查看哪些模块进了哪个 chunk - 打开浏览器开发者工具的 Network 面板，切页面时观察是否只加载对应入口 + 共享 chunk，没有重复拉取
