Beginners guide to build React Project with Webpack
It’s time to learn something which does not take part in the very initial phase of the development though it becomes really critical when the project starts to grow and inculcates many complexities. The Bundling ….
What is Bundling?
The very first question that arises in anyone’s mind is what the hell is the Bundling? To understand what bundling is, we must understand Why we need it? Hello? Isn’t it? So, When we reach to stage in our development where many packages, libraries, and other important files are being upgraded parallel and the final outcome requires them all together. At that time, it may consume a whole lot of space if we do not compress the development mode files.
A bundler is a tool that takes pieces of code and its dependencies and bundles them into a single file.
Bundlers typically compress the large files and perform a set of rules before it automatically (in the background) compiles all stuff at a single point. Single source of truth 😆. Now that we know, what a bundler is and why it’s needed we need to know what are all tools to achieve a bundle of a project.
What can I use?
There is a number of bundlers available in the market. Webpack, Parcel, Rollup, Browserify, Metro, Bower, Gulp, and many more. Many are being used, some are outdated and some are emerging. But, we need to choose it based on our needs. Our focus is Webpack so we’ll not have other detailed discussions about others. In case anyone wants to evaluate different bundlers, click here.
Prerequisites
- A working internet connection!!! 😇
- Node installed in your machine 😶
- At least made a project or worked with the JavaScript 🍷
- A Project which you’re working on or create a new one😆
Installation
For a sack of easy-going, all installation commands are given at a go. So, one can just install all at once (not all are mandatory) so that focus can be made more on core parts.
npm install webpack webpack-cli — save-devBy default webpack only supports the ‘.js’ file. To add any other file into the loader like SVG, image file it won’t be supported. To do so install a particular node package. like for
svg → npm install svg-inline-loader — save-dev
CSS → npm install css-loader — save-dev
To add styles → npm install style-loader — save-dev
babel → npm install babel-loader — save-devPlugins
The Plugin helps you to execute some external operation to your bundle before the final draft.
npm install html-webpack-plugin — save-devDev server (Only for Developers) 👍
Dev server allows you to use commands from package.json to directly bundle the project Webpack dev server is a web server based on express. So that you don’t have to spin up other servers like node to see your project locally, webpack dev server provides you a port number where you can see or test your project in the browser locally.
npm install webpack-dev-server --save-devConfiguration
Create a webpack.config.js file in your root directory. It is the starting point of the bundler. As the name suggests, it’ll be having all the necessary configurations for bundling.
The code in the file 😍
I could have written the code which can be copied, but it really a small snippet so that you can remember as well. I want everyone who reads this blog to write on their own 😉.
How it executes?
- Webpack grabs the entry point located at ‘./app/index.js’
- It examines all of our ‘import’ and ‘require’ statements and creates a dependency graph.
- Webpack starts creating a bundle, whenever it comes across a path we have a loader for, it transforms the code according to that loader then adds it to the bundle. What does what is explained in the code image, it’s not too critical to infer, is it? 👍
- It takes the final bundle and outputs it at ‘dist/index_bundle.js’
Terminologies
entry: The entry file where to start the bundling
rules: Webpack defaultly allowes only ‘.js’ files. To add other files like image, svg, css we need to mention explicitly in rules and also respective node packages are required to install
loaders: Individual files before or while the bundle is being generated
mode: Defines in which mode to bundle. In case, if production it supress the bundles as optimised as possible
Output: Manages the bundle creation location and related stuffs
Plugins: The plugin allows you to execute some tasks after the bundle is created. For example,
→ HtmlWebpackPlugin — Generates an ‘index.html’ page, puts it in our ‘/dist’ folder with a ‘<script>’ tag that references the newly created bundle. Now even when we change the output webpack bundle filename or path it automatically handles the changes
→ Environment Plugin — If you’re using react and you want to add your ‘process.env’ in node environment to production before we deploy our code this will strip out any developer features like `warnings`. It’s default namespace in webpack package
How to config your packgage.json to run the webpack?
package.json // The bramhastra
Add the below lines to your scripts of your package.json file. ( Here one build is for “Mac and Linux” OS and the other is for “Windows”. One must use any of them, not both of them)
But when we are developing we want everything to fast, we can’t wait every time until webpack generates the build file. For that, we can use ‘webpack DevServer’ Plugin. Remember we added it into our webpack.config.js file 💭
To switch between production or development mode. As in development mode, we want all the developer features whereas we want the most enhanced version for deployment. To achieve it, we can modify mode in webpack.config.js . The code snippet we have handles it automatically. ‘
mode: process.env.NODE_ENV = 'production' ? 'production' : 'development
The final hit 🚀
Go to your command line, grab your keyboard, and hit the below commands.
If you run npm run build you can find that there is dist a folder is created to your root dictionary. And it comprises a index.html file that will be having all the bundled files in a single place. Hurrey, you can directly host the folder to your favorite hosting sites. Like, Netlify (My favorite), Github pages, Heroku, Firebase (Must read: Krupesh Anadakat — Deploy React JS on Google Firebase).
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Medly Front End Coding Challenege</title><link href="main.css" rel="stylesheet"></head><body><div id="app"></div>
// Your entire code in single file. It's amazing isn't it???<script type="text/javascript" src="main.js"></script></body></html>
Run npm run start to actually run your dev server. It’ll be easy to head start having your webpack working and not troubling your development 😜
👦 Word from Author 📕
It’s really basic and fundamental summary which is handy for anyone to just kick start and understand how the webpack actually works. For a deeper understanding, one must need to go through the hell of webpack’s documentation and pick the peculiar requirement specific config and add to their webpack.config.js
In the end, Share your thoughts, feedback, and suggestions. I’ll be bringing many more short stories with which one can kick start. Because the Parato said it is the 20% that impacts the more than the rest 80%. See you guys soon 👋 👋
