webpack中publicPath配置为./的具体作用是什么？

基础定义 #

publicPath是webpack用来指定打包后静态资源（JS、CSS、图片、字体等）的引用路径前缀的核心配置项，publicPath: './'代表所有静态资源都会使用相对于当前HTML文件的相对路径进行引用。

实际作用 #

• 适配本地直接打开打包后的HTML文件的场景，不会因为文件协议的路径规则出现资源加载失败的问题
• 适配部署在任意子目录的场景，只要打包后静态资源和HTML文件的相对层级不变，不管你把整个dist文件夹放在服务端的哪个子路径下，资源都能正常加载，不会出现404错误

举个实际的产物结构示例：

dist/
├── index.html
├── js/
│   └── main.2f3d9.js
├── css/
│   └── main.7e8a1.css
└── assets/
    └── logo.png

配置publicPath: './'后，index.html中引入JS的代码会是：
<script src="./js/main.2f3d9.js"></script>

与常见配置的差异 #

• 若配置为publicPath: '/'：静态资源会从域名根目录开始查找，仅适合部署在域名根目录的场景，放在子目录或本地打开都会出现资源加载失败
• 若配置为CDN地址如publicPath: 'https://your-cdn.com/dist/'：所有静态资源都会从指定的CDN路径加载

内容的提问来源于stack exchange，提问作者RamAlx