当在浏览器中执行时，webpack需要知道你将在哪里托管生成的bundle。因此，它能够请求额外的块(当使用代码分割时)或分别通过文件加载器或url加载器加载的引用文件。

例如:如果你配置你的http服务器来托管/assets/下生成的包，你应该写:publicPath: "/assets/"

webpack使用publicPath替换css中定义的用于引用图像和字体文件的相对路径。

output.path

存储所有输出文件的本地磁盘目录(绝对路径)。

例如:路径。加入(__dirname“构建/”)

Webpack将所有内容输出到localdisk/path-to-your-project/build/

output.publicPath

你上传捆绑文件的地方。(绝对路径，或相对于主HTML文件)

例如:/ /资产

假设您将应用程序部署在服务器根目录http://server/。

通过使用/assets/，应用程序将在http://server/assets/找到webpack资产。在底层，webpack遇到的每个url都会被重写为以“/assets/”开头。

src="/assets/picture.jpg" 访问人员:(http://server/assets/picture.jpg) src="/img/picture.jpg"重写。src="/assets/img/picture.jpg" 访问人员:(http://server/assets/img/picture.jpg)

这里有很多很好的答案，所以我将重点关注输出。publicPath:“汽车”。

当你构建你的项目时，你会得到下一个文件夹结构:

dist/blog/index.html
dist/app.js
dist/app.css
dist/index.html

在这种情况下，我们的index.html文件必须有一个正确的路径到我们的app.js和app.css (next - assets)。让我们考虑下一种情况:

publicPath: '' or publicPath: '/': When hosted on a server both point to the root of the website (ex. https://localhost:8080/), so everything works fine. But should you try to open them locally, blog/index.html won't have a correct path to the assets. In case of publicPath: '' assets will be searched in the blog/ folder since that's where the relative path is pointing to. index.html still has the correct path to assets. And in case of publicPath: '/', / points to the root of the filesystem, so neither of our index.html files will have a correct path to assets. publicPath: 'auto': In this case, both our index.html files will have relative paths to the assets. So, blog/index.html will be pointing to ../app.css, and index.html will be pointing to app.css.

Filename指定文件的名称，所有绑定的代码在经过构建步骤后将被积累到其中。

Path指定app.js(filename)将被保存在磁盘中的输出目录。如果没有输出目录，webpack将为您创建该目录。 例如:

module.exports = {
  output: {
    path: path.resolve("./examples/dist"),
    filename: "app.js"
  } 
}

这将创建一个目录myproject/examples/dist，并在该目录下创建app.js， /myproject/examples/dist/app.js。构建完成后，你可以浏览myproject/examples/dist/app.js来查看捆绑的代码

publicPath:“我应该在这里放什么?”

publicPath指定web服务器中的虚拟目录，捆绑文件app.js将从这里被提供。请记住，在使用publicPath时，服务器这个词可以是webpack-dev-server或express server，也可以是其他可以与webpack一起使用的服务器。

例如

module.exports = {
  output: {
    path: path.resolve("./examples/dist"),
    filename: "app.js",
    publicPath: path.resolve("/public/assets/js")   
  } 
}

这个配置告诉webpack将你所有的js文件打包到examples/dist/app.js中并写入该文件。

publicPath告诉webpack-dev-server或express server从服务器ie /public/assets/js中指定的虚拟位置提供这个捆绑文件ie examples/dist/app.js。在html文件中，你需要引用这个文件为

<script src="public/assets/js/app.js"></script>

总之，publicPath类似于服务器中的虚拟目录和output指定的输出目录之间的映射。当public/assets/js/app.js文件被请求时，/examples/dist/app.js文件将被服务

webpack2文档以一种更清晰的方式解释了这一点: https://webpack.js.org/guides/public-path/#use-cases

Webpack有一个非常有用的配置，它允许您为应用程序中的所有资产指定基本路径。它叫做publicPath。