Learn Webpack in React Js | A step-by-step Guide 2022 ( Part-I )
Getting Started with Webpack: Configuring and Using Webpack in Your React Application
What is Webpack?
At its core, webpack is a static module bundler for modern JavaScript applications. When webpack processes your application, it internally builds a dependency graph from one or more entry points and then combines every module your project needs into one or more bundles, which are static assets to serve your content from.
source: https://webpack.js.org/concepts/
If you are a React Js developer, then sooner or later you will need to use Webpack in your application and as a web developer, it will do you good to get at least a basic understanding of this static module bundler, and this article will help you with just that.
Before we move on, we need to be aware of one thing, Webpack despite being an amazing tool, is just like a General, it needs troops to achieve anything significant, and css-loader, style-loader, sass-loader, babel-loader, @babel/preset-env, and various plugins etc make up its ranks. We will discuss these as we move on.
Code Structure
For this tutorial, we will follow a simple example and our code structure will look like this
The dist folder will contain the build for our code, src will have our source code and webpack.config.js will have the webpack configurations.
Tutorial
Now, lets first create a file src/demo.js and write the following piece of code in it
function demo(){
return "You are learning Webpack..."
}export default demo;
Create src/index.js file with the following content
import demo from "./demo";
console.log(demo());As you can see, we have exported a simple function demo from the demo.js file and then tried to import that function into our index.js file
Now, let's create a simple HTML template in src/template.html
<!DOCTYPE html>
<html>
<head>
<title>WebPack Example By M Umair</title>
<script src="./index.js"></script>
</head>
<body>
<button class="btn">Great!</button>
</body>
</html>In the above code, we have loaded our src/index.js script in our HTML template. Now let's try to open the src/template.html file in the browser.
You will see a very unsightly error in your browser console.
:( This means that we are not able to run our code. (We lost the battle). But no worries, our mighty general will come to our aid soon
Setup Webpack
//Run the following commands to setup webpack in your project
npm init -y
npm i -D webpack webpack-cliAfter running the above commands, you will see that we have a new package.json file in our directory with the following content
Now let's create a new script by adding the following line in the scripts key of your package.json object.
"build": "webpack --mode=development"
Now run the following command
npm run buildYou will notice that a new folder dist with a file named main.js is created and this includes our bundled code. If you replace the script path in our src/template.html from “./index.js” to “../dist/main.js”, you will see that we no longer get the error in our console. (Revert this change when done confirming)
But unfortunately, we cannot see our HTML code in our dist folder yet. (This means our General needs the help of one of his commanders html-webpack-plugin)
What is html-webpack-plugin?
TheHtmlWebpackPluginsimplifies creation of HTML files to serve your webpack bundles. This is especially useful for webpack bundles that include a hash in the filename which changes every compilation. You can either let the plugin generate an HTML file for you, supply your own template using lodash templates, or use your own loader.In short, this plugin will generate an HTML5 file for you that includes all your webpack bundles in the body using
scripttags
But let's try to prepare a proper battlefield before we call our commander. For that create a new file webpack.config.js in our main directory and add the following content to it.
const path = require("path");
module.exports = {
mode: "development",
entry: path.resolve(__dirname, "src/index.js"),
output: {
path: path.resolve(__dirname, "dist"),
filename: "main.js",
},
};Now let's install html-webpack-plugin using the following command
npm i -D html-webpack-pluginTo use this plugin, let’s change the webpack.config.js file content to the following
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
mode: "development",
entry: path.resolve(__dirname, "src/index.js"),
output: {
path: path.resolve(__dirname, "dist"),
filename: "main.js",
},
plugins: [
new HtmlWebpackPlugin({
title: "Webpack App by M Umair",
filename: "index.html",
template: "src/template.html",
}),
],
};Let’s remove the script tag from src/template.html and replace the title tag with
<title><%= htmlWebpackPlugin.options.title %></title>The file will look like this
<!DOCTYPE html>
<html><head>
<title><%= htmlWebpackPlugin.options.title %></title>
</head><body>
<button class="btn">Great!</button>
</body></html>
Now run
npm run build
You can see that we now have our index.html bundled inside our dist folder. Open the file in the browser and you can see that our code is working fine now.
:) Great!
That’s all for Part 1 of this series. I hope this has helped you in understanding a bit about Webpack and one of its plugins. In the next part, we will discuss how to load CSS and image files in our bundled code using webpack. We will also discuss how to serve our bundle code and how to achieve a hot reload. So Stay Tuned :)
