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!

Classes vs Hooks on React
Beginners Level
Administrate review
Dealing with your first scheduled background job.
Copy link
Powered by Social Snap