javascript - Webpack中的“publicPath”有什么作用？(What does “publicPath” in Webpack do?)

Question

Webpack docs state that output.publicPath is:

(Webpack文档声明output.publicPath是：)

The output.path from the view of the JavaScript.

(来自JavaScript视图的output.path 。)

Could you please elaborate on what this actually means?

(你能详细说明这实际意味着什么吗？)

I use output.path and output.filename to specify where Webpack should output the result, but I'm not sure what to put in output.publicPath and whether it is required.

(我使用output.path和output.filename来指定Webpack应该输出结果的位置，但是我不确定将什么放在output.publicPath以及是否需要它。)

module.exports = {
  output: {
    path: path.resolve("./examples/dist"),
    filename: "app.js",
    publicPath: "What should I put here?"   
  } 
}

  ask by Misha Moroshko translate from so

Answer 1

output.path

Local disk directory to store all your output files (Absolute path) .

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

Example: path.join(__dirname, "build/")

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

Webpack will output everything into localdisk/path-to-your-project/build/

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

---

output.publicPath

Where you uploaded your bundled files.

(您上传捆绑文件的位置。)

(Relative to server root)

(（相对于服务器根目录）)

Example: /assets/

(示例： /assets/)

Assumed you deployed the app at server root http://server/ .

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

By using /assets/ , the app will find webpack assets at: http://server/assets/ .

(通过使用/assets/ ，应用程序将在以下位置找到webpack资产： http://server/assets/ 。)

Under the hood, every urls that webpack encounters will be re-written to begin with " /assets/ ".

(在幕后，webpack遇到的每个网址都将以“ /assets/ ”开头重新编写。)

src="picture.jpg" Re-writes ? src="/assets/picture.jpg"

(src="picture.jpg"重写?src src="/assets/picture.jpg")

Accessed by: ( http://server/assets/picture.jpg )

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

---

src="/img/picture.jpg" Re-writes ? src="/assets/img/picture.jpg"

(src="/img/picture.jpg"重写?src src="/assets/img/picture.jpg")

Accessed by: ( http://server/assets/img/picture.jpg )

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