面试题：Webpack 的 publicPath 有什么作用？

核心思路

publicPath 决定浏览器请求构建资源时使用的 URL 前缀；path 决定 Webpack 把构建文件保存到哪个本地目录。

架构图

text 复制代码

Webpack
  │
  ├── path
  │    ↓
  │  文件系统
  │  /project/dist
  │
  └── publicPath
       ↓
     浏览器资源 URL
       ↓
 ┌─────┴─────────┐
 ↓               ↓
开发环境        生产环境
 ↓               ↓
Dev Server      Nginx / CDN
 ↓               ↓
HTTP资源        真实静态资源

底层原理

Webpack 会生成 Runtime。当代码存在：

js 复制代码

import('./User.js');

Webpack 会把 User.js 拆成独立 Chunk。

浏览器加载主 Chunk 后，Webpack Runtime 需要计算这个 Chunk 的 URL：

text 复制代码

Webpack Runtime
      ↓
publicPath + Chunk 文件名
      ↓
HTTP 请求 Chunk

所以 publicPath 本质上是：构建资源在浏览器端的公共访问路径。

开发环境

开发环境通常使用 Webpack Dev Server：

text 复制代码

浏览器
  ↓
webpack-dev-server
  ↓
Webpack 构建资源

例如：

js 复制代码

output: {
  publicPath: '/'
}

浏览器可以从：

text 复制代码

http://localhost:3000/

访问资源。开发环境的资源通常由 Dev Server 提供，因此很多路径问题只会表现为本地资源 404。

生产环境

生产环境通常是：

text 复制代码

浏览器
  ↓
Nginx / CDN / OSS
  ↓
dist 中真实构建文件

例如项目部署在：

text 复制代码

https://example.com/admin/

资源部署在：

text 复制代码

https://example.com/admin/assets/

那么应该让 publicPath 与真实资源访问路径匹配：

js 复制代码

output: {
  publicPath: '/admin/assets/'
}

否则 Webpack Runtime 可能生成错误的 Chunk URL：

text 复制代码

实际：
/admin/assets/123.xxx.js

错误：
/123.xxx.js

最终导致：

text 复制代码

404
↓
Chunk 加载失败
↓
ChunkLoadError
↓
动态功能异常

开发环境与生产环境最核心的区别

text 复制代码

开发环境：
publicPath
    ↓
Dev Server 如何提供构建资源

生产环境：
publicPath
    ↓
浏览器应该向哪个真实 URL 请求资源
    ↓
必须与 Nginx / CDN / OSS 的资源部署路径匹配

最容易被追问的边界

publicPath 只负责资源 URL 的生成和公共路径表达，不负责保证服务器一定能返回资源。

完整链路是：

text 复制代码

publicPath
    ↓
Webpack Runtime 生成 URL
    ↓
浏览器发起 HTTP 请求
    ↓
Nginx / CDN 路由
    ↓
真实文件
    ↓
200 / 404

所以排查生产环境 Chunk 404 时，要同时检查：

text 复制代码

① publicPath 是否正确
        ↓
② Chunk 文件是否真实部署
        ↓
③ Nginx / CDN 路由是否正确
        ↓
④ CDN 缓存是否存在旧版本
        ↓
⑤ HTML、主 Chunk、异步 Chunk 是否属于同一版本

最终一句话

path 解决"Webpack 把文件放哪里"，publicPath 解决"浏览器从哪里找文件"；开发环境主要看 Dev Server 如何提供资源，生产环境则必须让 publicPath、真实部署目录以及 Nginx/CDN 的资源路径三者一致。