Difference between Webpack/Babel and react-scripts

Question

Recently i started working on web pack and react-scripts and i would like to know the advantages and disadvantages using them and how they are different from each other.

Answer 1

Basically speaking, they serve different purposes and usually show up together. I will explain what they are designed to do.

babel

Babel is a transpiler. It can translate all kinds of high version ECMAScript ( not only ECMAScript, but it's easy to understand) into ES5, which is more widely supported by browsers (especially older versions). It's main job is to turn unsupported or cutting-edge language features into ES5.

Webpack

Webpack is, among other things, a dependency analyzer and module bundler. For example, if module A requires B as a dependency, and module B requires C as a dependency, then webpack will generate a dependency map like C -> B -> A. In practice it is much more complicated than this, but the general concept is that Webpack packages modules with complex dependency relationships into bundles. Regarding webpack's relationship with babel: When webpack processes dependencies, it must turn everything into javascript because webpack works on top of javascript. As a result, it uses different loaders to translate different types of resources/code into javascript. When we need ES6 or ES7 features, we use babel-loader to accomplish this.

react-scripts

when we start a react-based project, setting up the build environment is tough and time-consuming work. To help with this, the developers of React created an npm package called react-scripts that includes a lot of the basic setup most people will need for an average React app. Babel and webpack are included as dependencies in react-scripts