Configuring Webpack 5 and webpack-dev-server on React

Reading Time: 4 minutes

Have you ever wondered how today's modern JS applications can process so many style modules or images? Well, in this blog post we explain how to create a basic configuration to pack files through Webpack. Keep reading!

About Webpack

Webpack is a useful tool for developing front-end applications where we divide our code into modules. Webpack is a package to manage those modules and their dependencies, but Webpack can also minify and create bundles of our code.

In Webpack, our JS code is not considered just as a module, neither the style sheets, the images, and the HTML. This is useful when we create applications with a lot of configurations and when we create code that can be run everywhere.

How to

First of all, we need to have some dependencies installed:

Install Webpack

npm install webpack webpack-cli webpack-dev-server --save-dev

Install plugin of Webpack to create html

npm install html-webpack-plugin html-loader --save-dev

Install babel

npm install babel-loader @babel/preset-env @babel/preset-react @babel/core --save-dev

Create the configuration file

Let’s create our wepack file on the root of the project, where we are going to have our configurations:

Configure the entry and output file

Then let’s add the necessary dependencies, the target file, and the place where we are going to save our final output:

Add the target extensions

Now let’s add the configuration of the extension file to apply our configuration:

Add the rules for the modules

Then let’s add the rules to detect the target files where we want to apply a specific loader. Js and jsx files to babel-loader and html files to html-loader:

Add the plugins

Now let’s add the configuration for our plugins. In this case the htm-loader with the “template” that is the file that we are using on development, and “filename” that is our final file when we create a bundle for production:

Add dev server configuration

Then let’s create the configuration to create a server to a local environment with the file where we have our final configuration, the server, and the option to choose a default port:

Create the Babel file and the configurations

Let’s create a new file on the root of the project called “.babelrc”:

And then add the configuration for the presets that we want to use:

  • Preset-env: Compile ECS6
  • Preset-react: Compile JSX and React syntax

Create a shortcut for Webpack commands

Let’s add to our “package.json” file some scripts to run our Webpack configurations to dev and production environment:

Test the dev configuration

Now let's go back to our terminal and run “npm run start”:

And this is how you can see your project running on your localhost.

Test production configuration

Run on your terminal “npm run build”:

The “dist” folder was created with the compressed files which are ready to be run on your production environment:

There you go! Easy peasy, right?

Sometimes we can feel overwhelmed by all the new things we need to learn, but if we dig into them a little bit deeper we will see that they are not that complicated.

Thank you for reading this blog post. I really hope you enjoyed it, and if you have any questions, please let me know!

You May Also Like
Read More

ReactJS: Loops in JSX

Reading Time: 4 minutes Why React? Nowadays developers know that Javascript's world is constantly changing. Every day a new library, framework or…
Read More

RegEx Basics Guide

Reading Time: 6 minutes This guide is a quick compilation of many Regular Expresions examples and how to use them to be…