webpack子路径部署需设publicpath为'/my-app/'或'auto'，output.path指向本地dist目录，html插件配置base选项，前端路由启用basename，静态资源通过模块导入确保路径正确。
Webpack 打包结果要支持子路径部署（比如项目部署在 https://example.com/my-app/ 而不是根路径 /），关键在于正确设置 publicPath 和 output.path，同时确保 HTML、静态资源、路由等能适配相对路径。
设置 output.publicPath 为相对路径或动态前缀
publicPath 控制运行时资源（JS、CSS、图片等）的引用前缀。子路径部署时，它必须与实际部署路径一致：
- 若部署在
/my-app/，设为publicPath: '/my-app/' - 若需兼容多种部署路径（如开发用
/、生产用/my-app/），推荐使用'auto'（Webpack 5.31+ 默认行为）或环境变量动态注入 - 避免硬编码绝对 URL；不建议用
https://example.com/my-app/，否则无法跨环境复用
确保 output.path 指向本地 dist 目录，与 publicPath 无关
output.path 是构建产物写入的**本地文件系统路径**，和部署路径无关。它始终是本地绝对路径：
- 正确：
path.resolve(__dirname, 'dist') - 错误：
path.resolve(__dirname, '/my-app')或拼接 URL 字符串 - 打包后所有文件仍输出到
dist/目录，只是运行时通过publicPath解析资源位置
HTML 插件需同步适配 base 标签或 script 路径
使用 html-webpack-plugin 时，需确保生成的 <script src="...>%20%E5%92%8C%20<base%20href=" ...></script> 匹配部署路径：
- 启用
base选项：new HtmlWebpackPlugin({ base: '/my-app/' })，会自动注入<base href="/my-app/"> - 或通过
templateParameters传入publicPath，在自定义 HTML 模板中控制 script 引用 - 不手动修改
filename（如设为'my-app/index.html'），这会导致输出结构混乱，应由服务器配置路由兜底
前端路由（如 React Router / Vue Router）启用 basename
如果项目含客户端路由，必须显式指定 basename，否则跳转会 404：
- React Router v6：
<browserrouter basename="/my-app"></browserrouter> - Vue Router：
createRouter({ history: createWebHistory('/my-app') }) - Angular：
RouterModule.forRoot(routes, { useHash: false, relativeLinkResolution: 'legacy' })配合<base href="/my-app/">
静态资源引用需走 Webpack 模块解析
图片、字体等静态资源路径不能写死 src="img/logo.png"，而应通过模块导入或 require()：
- ✅ 正确：
import logo from './assets/logo.png'; <img src="%7Blogo%7D"> - ❌ 错误：
<img src="/img/logo.png">（绕过 Webpack，不受publicPath控制） - Webpack 会自动将导入路径解析为带
publicPath前缀的 URL
不复杂但容易忽略：publicPath 是运行时行为，和打包输出目录无关；只要它与部署路径一致，配合 HTML base 和路由 basename，就能可靠支持任意子路径部署。
