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!
