核心思路publicPath 决定浏览器请求构建资源时使用的 URL 前缀path 决定 Webpack 把构建文件保存到哪个本地目录。架构图Webpack │ ├── path │ ↓ │ 文件系统 │ /project/dist │ └── publicPath ↓ 浏览器资源 URL ↓ ┌─────┴─────────┐ ↓ ↓ 开发环境 生产环境 ↓ ↓ Dev Server Nginx / CDN ↓ ↓ HTTP资源 真实静态资源底层原理Webpack 会生成 Runtime。当代码存在import(./User.js);Webpack 会把User.js拆成独立 Chunk。浏览器加载主 Chunk 后Webpack Runtime 需要计算这个 Chunk 的 URLWebpack Runtime ↓ publicPath Chunk 文件名 ↓ HTTP 请求 Chunk所以publicPath本质上是构建资源在浏览器端的公共访问路径。开发环境开发环境通常使用 Webpack Dev Server浏览器 ↓ webpack-dev-server ↓ Webpack 构建资源例如output:{publicPath:/}浏览器可以从http://localhost:3000/访问资源。开发环境的资源通常由 Dev Server 提供因此很多路径问题只会表现为本地资源 404。生产环境生产环境通常是浏览器 ↓ Nginx / CDN / OSS ↓ dist 中真实构建文件例如项目部署在https://example.com/admin/资源部署在https://example.com/admin/assets/那么应该让publicPath与真实资源访问路径匹配output:{publicPath:/admin/assets/}否则 Webpack Runtime 可能生成错误的 Chunk URL实际 /admin/assets/123.xxx.js 错误 /123.xxx.js最终导致404 ↓ Chunk 加载失败 ↓ ChunkLoadError ↓ 动态功能异常开发环境与生产环境最核心的区别开发环境 publicPath ↓ Dev Server 如何提供构建资源 生产环境 publicPath ↓ 浏览器应该向哪个真实 URL 请求资源 ↓ 必须与 Nginx / CDN / OSS 的资源部署路径匹配最容易被追问的边界publicPath只负责资源 URL 的生成和公共路径表达不负责保证服务器一定能返回资源。完整链路是publicPath ↓ Webpack Runtime 生成 URL ↓ 浏览器发起 HTTP 请求 ↓ Nginx / CDN 路由 ↓ 真实文件 ↓ 200 / 404所以排查生产环境 Chunk 404 时要同时检查① publicPath 是否正确 ↓ ② Chunk 文件是否真实部署 ↓ ③ Nginx / CDN 路由是否正确 ↓ ④ CDN 缓存是否存在旧版本 ↓ ⑤ HTML、主 Chunk、异步 Chunk 是否属于同一版本最终一句话path解决“Webpack 把文件放哪里”publicPath解决“浏览器从哪里找文件”开发环境主要看 Dev Server 如何提供资源生产环境则必须让 publicPath、真实部署目录以及 Nginx/CDN 的资源路径三者一致。
