#Yarn install webpack file loader how to

The contents of the main.js file have changed. Now, at some later point in time, you've released new code for your app. Then, a user visits your app and their browser caches the main.js file. So, what's the problem here? Imagine if we had a file called main.js used in our app. This means that if you visit the site again, your browser can use the cached files instead of requesting them again, so you get a faster page load time and a better experience. For example, if you've visited a website, and your browser had to download assets like JavaScript, CSS, or image files, your browser may cache those files so that it doesn't have to request them from the server again. Your browser tries to be helpful by caching files it has seen before. Why, you ask, would we want the content hash included in our file names? To help the browser understand when a file has changed!

Since we've included the content hash in the generated CSS file, now is a good time to talk about cache busting. If you haven't read my previous article so far, it is recommended to have a look at first before you continue reading this article.Р”Р„lright, So I am assuming you have read and understood the above stated article, so let's continue our due part. Now it's time to minify and compress our generated css and js files for any possible production use.

#Yarn install webpack file loader how to

We have already learned so far how to compile your source code and extract css into separate css files (for production use) along with bundling using Webpack. This article is a continuation of my previous webpack article located here.

Yarn install webpack file-loader