问“Webpack”中的"publicPath“是做什么的？

EN

output.path

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

示例： path.join(__dirname, "build/")

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

output.publicPath

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

示例： /assets/

假设您在服务器根http://server/上部署了应用程序。

通过使用/assets/，该应用程序将在：http://server/assets/找到webpack的资产。在引擎盖下，webpack遇到的每一个urls都会被重写，以"/assets/“开头。

src="picture.jpg"重写src="/assets/picture.jpg"➡

访问者：(http://server/assets/picture.jpg)

src="/img/picture.jpg"重写src="/assets/img/picture.jpg"➡

访问者：(http://server/assets/img/picture.jpg)

当在浏览器中执行时，webpack需要知道您将把生成的包放在哪里。因此，它能够请求额外的块(当使用code splitting时)或分别通过file-loader或url-loader加载的引用文件。

例如:如果您将您的http服务器配置为在/assets/下托管生成的包，您应该这样写：publicPath: "/assets/"

文件名指定文件的文件名，在完成构建步骤后，所有捆绑的代码都将累积到该文件中。

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

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

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

publicPath：“我应该在这里放什么？”

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

例如

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

此配置告诉webpack将所有的js文件捆绑到examples/dist/app.js中，并写入该文件。

公共服务器告诉webpack服务器或快速服务器从publicPath中指定的虚拟位置提供这个捆绑的文件，即中的examples/dist/app.js。因此，在html文件中，您必须将此文件引用为

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

所以总而言之，只要请求文件public/assets/js/app.js到来，/examples/dist/app.js文件就会被提供给publicPath，这就像是服务器中virtual directory和output.path配置所指定的output directory之间的映射