【关于webpack中的publicPath】

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