What does “publicPath” in Webpack do?

by

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)

More Related Contents:

  1. What should I do to use this webpacked JS library? [closed]
  2. Passing environment-dependent variables in webpack
  3. babel-loader jsx SyntaxError: Unexpected token [duplicate]
  4. How to copy static files to build directory with Webpack?
  5. “You may need an appropriate loader to handle this file type” with Webpack and Babel
  6. Calling webpacked code from outside (HTML script tag)
  7. Resolving require paths with webpack
  8. ES6 exporting/importing in index file
  9. How do I generate sourcemaps when using babel and webpack?
  10. Using require(‘…’) with a variable vs. using a string in webpack
  11. How to bundle vendor scripts separately and require them as needed with Webpack?
  12. I am getting an “Invalid Host header” message when connecting to webpack-dev-server remotely
  13. Error: Missing class properties transform
  14. webpack –watch isn’t compiling changed files
  15. Conditional build based on environment using Webpack
  16. Importing CSS files in Isomorphic React Components
  17. Webpack Express Cannot Resolve Module ‘fs’, Request Dependency is Expression
  18. In the `import` syntax of ES6, how is a module evaluated exactly?
  19. Babel 7 – ReferenceError: regeneratorRuntime is not defined
  20. What are differences between SystemJS and Webpack?
  21. Webpack-dev-server compiles files but does not refresh or make compiled javascript available to browser
  22. Webpack: Bundle.js – Uncaught ReferenceError: process is not defined
  23. Webpack 5 – Uncaught ReferenceError: process is not defined
  24. Example of how to load static CSS files from node_modules using webpack?
  25. Conflict: Multiple assets emit to the same filename
  26. How to disable ESLint in vue-cli?
  27. Run command after webpack build
  28. How can I use webpack with express?
  29. Rails 5/6: How to include JS functions with webpacker?
  30. Solution: load independently compiled Webpack 2 bundles dynamically [closed]

Leave a Comment