【关于webpack中的publicPath】

最新推荐文章于 2025-04-02 00:06:31 发布

qnimal

最新推荐文章于 2025-04-02 00:06:31 发布

阅读量2.9k

点赞数

分类专栏： webpack 文章标签：运维 webpack 前端 nginx vue

本文链接：https://blog.csdn.net/qmy960502/article/details/128650679

版权

本文详细解析了webpack中output.publicPath的含义和作用，它作为运行时或载入时URL的前缀，影响静态资源的引用。文章讨论了公共URL的概念，以及publicPath在相对路径和绝对路径中的应用，特别强调了在SPA应用和nginx部署时的注意事项。同时，提到了devServer的publicPath配置，以及如何避免动态加载模块时的路径问题。最后，建议在设置publicPath时，应考虑服务部署的实际路径，以确保资源的正确加载。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本文内容基于webpack5作说明

假设你已经有一定webpack使用经验，但对该配置项仍有疑惑

官方定义：

此选项指定在浏览器中所引用的「此输出目录对应的公开 URL」 --中文文档

This option specifies the public URL of the output directory when referenced in a browser --英文文档

来看细节，在浏览器中引用时，'输出目录' 的 '公开'URL。

一般，url可以是一个域名来表示访问一台网络主机

也有的时候，一台主机中提供多个服务（一般是这样，只不过对外暴露可能是一个入口服务或者通过二级域名、url后缀等方式暴露多个服务），但是域名只有一个（因为运维不给批或者批的就是二级域名，或者个人开发主站没什么名气，副站不为人知，使用多个域名、开发服务显然没必要），这时候访问服务的url 就变成了主机表达+url片段，如 http://www.pb.com/new/。

此时这个服务相对于主机的public url是 /new/，这个就是定义中所说的public url

webpack中，output选项的publicPath会被作为运行时或载入时创建的url的前缀。

载入时：

比方说使用html-webpack-plugin插件，依据某个html模板文件创建一个新的html文件输出到指定输出目录（一般是dist），并插入标签读取入口js文件。此时publicPath设定的值就会被加入到路径前

可以做个简单的小测试，设置devServer.devMiddleware.publicPath="new"来将服务启动在主机localhost:port/new下，将output的publicPath设置为new123，这时我们通过主机域名+url片段new的url来访问主机localhost在port端口下为我们提供