Webpack output publicPath
Just came across this property in webpack configuration. I am confused by this property so I created a small example in order to understand what it is.
First, install webpack and webpack-cli
npm i -D webpack webpack-cli
In order to see how the bundled module gets injected to html, we use HtmlWebpackPlugin. This plugin will create html for you or use the template you provide.
npm i -D html-webpack-plugin
Then let’s create a simple webpack configuration file:
Create index.js inside src folder:
console.log('I am index.js');Now let’s run webpack to bundle our module.
webpack (for global installed webpack)
or
create start script in package.json “start”:”webpack” then run npm start
Result
Since by default webpack runs in production mode, the final html we get is:
check the script tag, src is using the publicPath we specified.
So it’s pretty useful if we are serving resources through CDN or places other than where html is served.
