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

User · Answer

When executed in the browser  webpack needs to know where you ll host the generated bundle  Thus it is able to request additional chunks  when using code splitting  or referenced files loaded via the file-loader or url-loader respectively   For example  If you configure your http server to host the generated bundle under  assets  you should write  publicPath    assets

User · Answer

in my case  i have a cdn and i am going to place all my processed static files  js imgs fonts     into my cdn suppose the url is http   my cdn com   so if there is a js file which is the orginal refer url in html is    js my js  it should became http   my cdn com js my js in production environment  in that case what i need to do is just set publicpath equals http   my cdn com  and webpack will automatic add that prefix

User · Answer

filename specifies the name of file into which all your bundled code is going to get accumulated after going through build step    path specifies the output directory where the app js filename  is going to get saved in the disk  If there is no output directory  webpack is going to create that directory for you  for example    module exports       output        path  path resolve    examples dist        filename   app js           This will create a directory myproject examples dist and under that directory it creates app js   myproject examples dist app js  After building  you can browse to myproject examples dist app js to see the bundled code  publicPath   What should I put here    publicPath specifies the virtual directory in web server from where bundled file  app js is going to get served up from  Keep in mind  the word server when using publicPath can be either webpack-dev-server or express server or other server that you can use with webpack   for example  module exports       output        path  path resolve    examples dist        filename   app js       publicPath  path resolve   public assets js               this configuration tells webpack to bundle all your js files into examples dist app js and write into that file    publicPath tells webpack-dev-server or express server to serve this bundled file ie examples dist app js from specified virtual location in server ie  public assets js  So in your html file  you have to reference this file as    lt script src  public assets js app js  gt  lt  script gt    So in summary  publicPath is like mapping between virtual directory in your server and output directory specified by output path configuration  Whenever request for file public assets js app js comes   examples dist app js file will be served

User · Answer

You can use publicPath to point to the location where you want webpack-dev-server to serve its  virtual  files  The publicPath option will be the same location of the content-build option for webpack-dev-server   webpack-dev-server creates virtual files that it will use when you start it  These virtual files resemble the actual bundled files webpack creates  Basically you will want the --content-base option to point to the  directory your index html is in  Here is an example setup     application directory structure  app   build   build index html  webpack config js     webpack config js var path   require  path    module exports           output        path  path resolve   dirname   build        publicPath    assets        filename   bundle js               index html  lt  DOCTYPE gt   lt html gt       lt script src  assets bundle js  gt  lt  script gt   lt  html gt     starting a webpack-dev-server from the command line   webpack-dev-server --content-base build    webpack-dev-server has created a virtual assets folder along with a virtual bundle js file that it refers to  You can test this by going to localhost 8080 assets bundle js then check in your application for these files  They are only generated when you run the webpack-dev-server

User · Answer

publicPath is used by webpack for the replacing relative path defined in your css for refering image and font file

User · Answer

the publicPath is just used for dev purpose  I was confused at first time I saw this config property  but it makes sense now that I ve used webpack for a while  suppose you put all your js source file under src folder  and you config your webpack to build the source file to dist folder with output path   But you want to serve your static assets under a more meaningful location like webroot public assets  this time you can use out publicPath   webroot public assets   so that in your html  you can reference your js with  lt script src   webroot public assets bundle js  gt  lt  script gt    when you request webroot public assets bundle js the webpack-dev-server will find the js under the dist folder  Update    thanks for Charlie Martin to correct my answer  original  the publicPath is just used for dev purpose  this is not just for dev purpose     No  this option is useful in the dev server  but its intention is for asynchronously loading script bundles in production  Say you have a very large single page application  for example Facebook   Facebook wouldn t want to serve all of its javascript every time you load the homepage  so it serves only whats needed on the homepage  Then  when you go to your profile  it loads some more javascript for that page with ajax  This option tells it where on your server to load that bundle from

User · Answer

The webpack2 documentation explains this in a much cleaner way  https   webpack js org guides public-path  use-cases     webpack has a highly useful configuration that let you specify the base path for all the assets on your application  It s called publicPath

User · Answer

output path Local disk directory to store all your output files  Absolute path   Example  path join   dirname   quot build  quot   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  quot  assets  quot    src  quot picture jpg quot  Re-writes   src  quot  assets picture jpg quot  Accessed by   http   server assets picture jpg   src  quot  img picture jpg quot  Re-writes   src  quot  assets img picture jpg quot  Accessed by   http   server assets img picture jpg

[javascript] What does "publicPath" in Webpack do?

Examples related to javascript

Examples related to webpack