What Is Webpack What The Webpack

Webpack can seem overwhelming and something you might have avoided learning about when building out React applications. But it is pretty simple to set up and create yourself, for your React apps. This will be a beginner’s guide into Webpack and what it’s actually doing. Let’s unpack any questions you might have about Webpack… haha...

We will be going over:

• What is Webpack?
• How to Configure Webpack
• Cache Busting in Webpack

What is Webpack, how does it work, and what is it doing?

If you are familiar with Create React App, Webpack is responsible for the main functionality in Create React App, along with some other things like Babel (a JS compiler). Create React App is using Webpack to bundle your files, together, and is the reason why developing React applications using create React app is really easy.
Webpack is a module bundler. But what does this mean? It means Webpack compiles JS files into one main file or however many files you want to bundle your code into, but typically it is one bundle file.
Webpack comes with many features such as module bundling, file minification(the process of minimizing code by getting rid of white space, comments, unnecessary code, and minimizing/ shortening code.), SASS compilation, etc. It bundles and complies with your developing application into something that the browser can understand.
Webpack manages dependencies and loads code that needs to be loaded first. Webpack keeps track of what files depend on what and loads them accordingly.
The problem Webpack solves is when developing large apps, your dependencies can pile up and intersect different files which make it complex and difficult to manage. Webpack manages all these dependencies and files for you, bundles it to plain JS that the browser can understand.

How to Configure Webpack

If you want to add loader and plugins to your Webpack bundle, you have to do this in a Webpack config file.
Here is what a webpack config file looks like.

//Webpack.config.js file:
const path = require("path");
module.exports = {
  mode: "development",
  entry: "./src/index.js",
  output: {
    filename: "main.js",
    path: path.resolve(__dirname, "dist")
  }
};

Let’s unpack what is happening in this file.

First, we set the mode to be development and this tells the Webpack not to minify our code, which is extremely helpful when developing.
We then, have to make sure everything we have in this file is exported as a module if we want to use it.
In your package.json file, created when you initialize your application with npm init you can tell Webpack to run in scripts like so:

"scripts": {
    "start": "webpack  --config webpack.config.js"
  },
//The webpack config file can be named anything,
//In this case, it is webpack.config.js

Next the entry property, takes in the src of where your entire application runs. By default, Webpack will look for an index.js file in a src folder but here is where you can specify the file where your application starts and what code needs to be bundled.

The output property is an object, where you want your code to be outputted. The filename property can be named anything you’d like, typically it is main.js.
The path property specifies where you want the code to go. In this case, we are resolving an absolute path to the dist directory, you can call this folder anything. Essentially this is the folder that Webpack will bundle your application in, traditionally this folder is dist.
This is the basics for configuring your Webpack file and how to get Webpack to run your application. There is of course more you can add to this config file such as loaders and plugins. You can refer to the Webpack docs if you are interested in this.

Cache busting in Webpack

Cache busting can be a confusing topic at first, but it can be important to the functionality of your application and something that can be easily done in a Webpack.
When you bundle up your application with Webpack, Webpack bundles everything up in a deployable /dist directory.
Once your application is deployed to a server, and a user is visiting your application, the client (typically a browser) has to reach the server again to retrieve all of the application’s assets.
This is why browsers cache application assets. Essentially they save files or modules form the /dist directory so that the next time the user refreshes or visits the browser doesn’t have to retrieve any assets it already remembers.
How to prevent browsers to cache bundles for CSS or files we have made changes to?
The browser caching files can cause a problem because if we change files that have been cached, the browser might not update them and assume the file is the same just because the name of the file hasn’t changed.
The idea behind cache busting is we want to create a new file name every time you make changes to a file and keep the file name the same if you haven’t made changes. This way when you have made changes to a file, when the client makes requests to the server to retrieve the application assets, the files you have changed will update since the browser does not recognize the filenames.
Luckily, a Webpack comes with a built-in substitution feature in output.filename in the Webpack config file called [contenthash].
The [contenthash] substitution will create a unique hash based on whether the content of an asset has changed or not, updating only when it does.
When you add [contenthash] to the output object in your config file it will look something like this:

//the output object in module.exports from the webpack.config.js file:

output: {
    filename: "main.[contentHash].js",
    path: path.resolve(__dirname, "dist")
  },

So, I hope this introduction to Webpack was easy to digest and answered a few questions you might have had about Webpack. Webpack is doing a lot of the behind the scenes work to make your React applications work, all you need to do is make sure you configure it correctly for your application. Next time you're working on a React app, consider configuring Webpack yourself!