What does "publicPath" in Webpack do?

Question

Webpack docs state that output.publicPath is:

The output.path from the view of the JavaScript.

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.

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

Answer 1

output.path

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

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

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

---

output.publicPath

Where you uploaded your bundled files. (absolute path, or relative to main HTML file)

Example: /assets/

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

By using /assets/, the app will find webpack assets at: http://server/assets/. Under the hood, every urls that webpack encounters will be re-written to begin with "/assets/".

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

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

---

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

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