表示资源(assets)被引用的根路径，在生产环境下生效；可以是相对路径，也可以是绝对路径；

该配置会为index.html中引入的 等标签中的资源路径添加前缀

注意 这对你手动引入的静态资源不生效

Webpack中一般会使用插件html-webpack-plugin把打包好的js、css等注入到html模板中，该插件也可以传入一个publicPath，使用方式如下:

一般情况下不会在html-webpack-plugin配置publicPath，它在生产环境下会默认读取output.publicPath作为资源根路径，而这个插件的作用就是注入webpack打包出来的所有资源文件，这也是手写的资源不会在其路径前添加前缀的原因。因为只有这些资源文件通过html-webpack-plugin注入到html模板中时才会生效。

如果在output和html-webpack-plugin中都配置了publicPath，最终以html-webpack-plugin中为准

如果配置为相对路径，那么该资源的引入路径是相对于你的html文件

如果配置为绝对路径，不带域名则从当前服务器获取资源，如果使用cdn，可以配置全路径。

无论是相对路径还是绝对路径，尾部都要携带斜杠/

这三种情况下在html中注入的资源如下：

默认设置为’auto’，下面是摘自官方的解释，它会根据一些自定的规则来动态配置publicPath

There are chances that you don’t know what the publicPath will be in advance, and webpack can handle it automatically for you by determining the public path from variables like importa.url , document.currentScript , script.src or self.location. What you need is to set output.publicPath to ‘auto’ -- 摘自官方文档

官方提供了一个全局参数来动态设置资源路径，这在微前端中，主应用加载不同子应用的资源时很有用。

In cases where the publicPath of output files can’t be known at compile time, it can be left blank and set dynamically at runtime in the entry file using the free variable 只需要在你的项目入口设置即可，以微前端框架qiankun为例，可以实现在子应用中动态设置主应用传递的publicPath，达到动态设置资源路径的目的。

使用webpack-dev-server启动一个快捷的本地开发服务器时会采用config.devServer参数，和生产环境不同，开发环境下webpack不会将执行文件打包到本地文件夹，而是存放到内存中，devServer.publicPath的含义和output.publicPath完全不同，它不会修改html中资源的路径，有点类似于output.path，用于配置前端文件的服务器访问路径。

必须以/开头，以/结尾

如果配置了一个相对路径，会导致服务器无法访问到文件，出现空白页面

举个🌰：

启动webpack-dev-server后，需要这样访问你的本地服务器：localhost:3334/assets/

以vue-router为例，当你配置了devServer.publicPath为/assets/时，对应的路由配置也需要改变，否则会出现路由跳转不正确的问题。

默认配置为/

Webpack打包文件后的输出目录

必须配置为绝对路径

The output directory as an absolute path. -- 摘自官方文档

它和publicPath没有任何关系，它只关系到前端最终生成的js文件被存放到哪个目录