【关于webpack中的publicPath】

  • Post author:
  • Post category:其他


本文内容基于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端口下为我们提供的网站服务&



版权声明:本文为qmy960502原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。