Webpack Or Create React App
It’s all about realising what best suits your needs!
Let’s first be clear that this post is not about concluding which one is better. Both are great tools having different purpose with their own pros and cons. This post will describe few of the scenarios which can help us in identifying which of them will be the best for our use case.
When I built my first React application few years back, I was not aware about how should I build it, which tools should I use or how should I set-up application architecture. As I explored few official docs, I came across the terms “create-react-app” and “webpack”. (Thinking about setting up the application on my own without any boilerplate really fascinated me! 😅)
Be Brave. Take Risks. Nothing Can Substitute Experience. — Paulo Coelho
Quickly build applications
When developers want to quickly build their application within few minutes, “create-react-app” will always come in handy and boost their confidence too! This is because it comes with the required boilerplate and we need not worry about transpiling or creating production builds for deployment. (I remember building my first React application years back with “create-react-app” within few minutes! 🎉)
Focusing on development
When developers want to jump into the development of React applications without worrying about what is actually required or happening behind the scenes, “create-react-app” can always be your first choice. And it does all the magic for you! With create-react-app, the “react-scripts” are installed automatically managing the commands required for creating development and production builds, so developers can focus only on the coding part.
Configuring your application
With “create-react-app”, it becomes difficult for developers to manage different config files in an application. With “webpack”, the developers have the freedom to manage different config files for their application. For example, they can enable compression for their build files so that they load faster in browsers.
Managing entry points
Many times developers come across scenarios where they want to have multiple entry points in their application, in that case, “webpack” will always be their first choice. They can easily define multiple entry points as per their requirements in the webpack.config.js file.
Application architecture
Needless to say, “create-react-app” provides a boilerplate already so that the developer can only focus on the coding part and need not worry about managing and scaling the architecture of their applications. When developer wants to manage the architecture of an application on their own, using “webpack” will be more recommendable.
Code Splitting
While working with very large applications, often developers would want to take advantage of code splitting so that they can dynamically load their components as and when required. With “webpack”, developers get the freedom to easily configure which chunks they want to group together via SplitChunksPlugin.
Both the tools have their own charm. We need to choose the tool which best suits our use case. Choose wisely!
Resources
- Webpack Official Site (https://webpack.js.org/)
- Create React App Official Website (https://create-react-app.dev/)
That’s all about webpack and create-react-apps, folks! Do let me know in comments which one best suits your needs! 😄 Happy Coding! 👩💻
