【webpack】publicPath

理解webpack中各种publicPath的含义

output中的publicPath

• type: function | string

对于按需加载(on-demand-load)或加载外部资源(external resources)（如图片、文件等）来说，output.publicPath 是很重要的选项。如果指定了一个错误的值，则在加载这些资源时会收到 404 错误。

htmlWebpackPlugin的publicPatch

• type: string
• default: 'auto'

用户<script>和<link>的publicPath

devServer的publicPath

其实，我们经常容易搞混的就是output的publicPath和deveServer的publicPatch。

在开发阶段，我们借用 devServer 启动一个开发服务器进行开发，这里也会配置一个 publicPath，这里的 publicPath 路径下的打包文件可以在浏览器中访问。而静态资源仍然使用 output.publicPath。

webpack-dev-server 打包的内容是放在内存中的，这些打包后的资源对外的的根目录就是 publicPath，换句话说，静态资源在内存中的路径都是以 publicPath 为准的。

确保 devServer.publicPath 始终以正斜杠开头和结尾

从文档中，我们可以看到 建议 devServer.publicPath 与 output.publicPath 相同，这是为啥？

因为平时我们项目生成 html 文件都是使用 webpack 插件 html-webpack-plugin 生成，其中涉及到 js、css、img 的静态文件的路径处理，html-webpack-plugin 是基于 output.publicPath 生成最终访问链接的。

如果 webpack-dev-server 的 publicPath 和 output.publicPath 不一致，在使用 html-webpack-plugin 可能会导致引用静态资源失败，因为在 webpack-dev-server 中生成 html 时，html-webpack-plugin 仍然以 output.publicPath 引用静态资源，和 webpack-dev-server 的提供的资源访问路径不一致，从而无法正常访问。

vue-cli的publicPath

• Type: string
• Default: '/'

用法和 webpack 本身的 output.publicPath 一致，但是 Vue CLI 在一些其他地方也需要用到这个值，所以请始终使用 publicPath 而不要直接修改 webpack 的 output.publicPath。

这个值也可以被设置为空字符串 ('') 或是相对路径 ('./')，这样所有的资源都会被链接为相对路径，这样打出来的包可以被部署在任意路径，也可以用在类似 Cordova hybrid 应用的文件系统中。

相对 publicPath 的限制

相对路径的 publicPath 有一些使用上的限制。在以下情况下，应当避免使用相对 publicPath:

当使用基于 HTML5 history.pushState 的路由时；

当使用 pages 选项构建多页面应用时。

参考文章

• output的publicpath和devServer的publicpath有什么关系
• webpack的path、publicPath和 devServer 的publicPath、contentBase