So sánh webpack và create-react-app

Setting up build tools and bundlers is a critical part of any front-end developer’s workflow. As a beginner looking up to setup a new React project, the first question that arises is whether they should use CRA or do their configuration using webpack.

One of these methods lets you focus on the code without any hassle during the setup, while the other one gives you complete control over how to bundle an application. Keeping this in perspective, let’s explore the nuances of using automated and manual methods to create a project.

What is CRA?

Create React App is a toolchain built and maintained by developers at Facebook for making React application skeleton. You simply run one command npx create-react-app example and Create React App sets up the tools you need to start your React project.

Advantages
1. The advantage of using CRA is that your focus solely remains on React and you don’t have to worry about Babel or Webpack or any other build dependencies which are running in the background.
2. Package maintenance is managed by the React community.
Disadvantages
1. There is less scope of learning here. As a developer, using CRA would not help in unwinding the things that happen under the hood in the build process.
2. Using CRA, it is difficult to add custom build configs. One way of doing that is to eject the app which defeats the whole purpose of using CRA in the first place.
3. CRA comes with SASS support. If you want to use plain CSS or LESS or PostCSS then it becomes an extra dependency that is not supported yet.

The alternative is to make your own React application manually

We will start by making a folder say Example in which we will do the setup.

To initialize Example with npm and git, we will use the following commands -

npm init git init

After running these two commands, the project will be initialized with a basic package.json file.

Runtime Dependencies

To install React into our project, we will need two dependencies React and React DOM

npm install react react-dom — save

Transpilers

Since our browser only understands plain JS so we will need to configure Transpilers in our project. Transpilers are tools that read source code written in one programming language and produce the equivalent code in another language. We will be using Babel for this purpose in our project. For transpiling our code into ES2015 we will add the following -

npm install @babel/core @babel/preset-env — save-dev

For transpiling JSX, we will need to add react preset in babel like this

npm install @babel/preset-react — save-dev

Configuring Babel

We can make a .babelrc in the root of our project and define our configurations there. A basic setup of react would require the following -

{ “presets”: [ “@babel/preset-env”, “@babel/preset-react” ]}

Note: If you don’t want to make a separate .babelrc file then the configuration can also be specified in the package.json file.

{ “name”: “my-package”, “version”: “1.0.0”, “babel”: { “presets”: [ … ], “plugins”: [ … ], }}

We can add various plugins and presets based on our project’s requirements. Check out the details of Babel here.

Bundler

Bundling is the process of acquiring imported files and merging them into a single file: a ‘bundle’ (or more if we follow code-splitting techniques). This bundle can then be included in a webpage to load an entire app.

Most React apps use tools like Webpack, Rollup, or Browserify.

We will use Webpack in our application.

Webpack

For setting up Webpack, we start by installing the following dependencies in the project.

npm install webpack webpack-cli webpack-dev-server babel-loader css-loader style-loader sass-loader html-webpack-plugin — save-dev

After installing the dependencies, we need to configure them in our project.

We will start by making a webpack.config.js file at the root of our project. A basic Webpack configuration will look something like this —

Now, let’s discuss more about the config shown above —

entry: The entry point to the application

output: The build will get generated in a folder named build and filename bundle.js

Out of the box, webpack only understands JavaScript and JSON files. Loaders allow webpack to process other types of files and convert them into valid modules that can be consumed by your application and added to the dependency graph.

We can specify rules for our files, so here we’re telling webpack to look for any .js/.jsx files (excluding ones in the node_modules folder) and apply Babel transpilation using babel-loader (We can specify presets here too. Read more about it here)

In this project, SASS is configured so we are specifying the rule to use sass-loader, css-loader, and style-loader for any .css/.scss files

Note: Loaders can be chained. The above example of resolving scss/css files is a classic example of chaining loaders. The thing to keep in mind while chaining is that, these loaders are executed in reverse order. So, the loader specified at the end(in this case sass-loader) will run in the very beginning and pass the result to the one above it and so on. The last loader to run(in this case: style-loader) will give the Js code to webpack.

We can add various loaders and webpack optimization techniques in our application as per the need.

To start the application, just add the following script into the package.json file and run npm run start

“start”: “webpack serve — config webpack.config.js

HMR

Hot module replacement is a feature that updates our code automatically on the browser as soon as we save the changes. Without this configuration, we will need to restart our server every time.

devServer: { contentBase: ‘./dist’, hot: true},

And we change our start script file as follows -

“start”: “webpack serve — config webpack.config.js — mode development — open — hot”

HMR exchanges, adds, or removes modules while an application is running, without a full reload. This can significantly speed up development.

This concludes the basic setup of a React project using Webpack.

We can always add more features into it like —

Image Loaders
SVG Loaders
Code splitting techniques
Plugins for minification and uglification of JS code, etc…

To dive deep and learn more, please visit this link.

Summary

Bundler vs Package

CRA is an NPM package that includes dependencies a React-based project will need to quick start a project.

Webpack is a powerful module bundler for JavaScript applications. It packages all the modules in your application into one or more bundles and serves it to the browser.

2. Project Maintenance

With Webpack, you’re completely responsible for updating and maintaining the package configurations.

With CRA, maintenance is looked after by the React community.

3. Environment Control

With Webpack, we have total control over the development environment and we can configure it as per our project’s needs.

CRA supports ‘No Build Configuration’ — It means that if we want to change anything present in the configuration, we will have to eject the application. Running npm run eject spits out all the configuration files so you can edit them yourself.

4. Project Size

If you’re building a complex Front End application with many non-code static assets such as CSS, images, fonts, etc, then yes, Webpack will give you great benefits.

If your application is fairly small, and you don’t have many static assets and you only need to build one Javascript file to serve to the client, then Webpack might be more overhead than you need.