Webpack output publicPath

Code Alchemist
Sep 9, 2018 · 1 min read

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.

Code Alchemist

Written by

Explore things… https://stackblitz.com/@Qi-Z

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade