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.
Basically speaking, they serve different purposes and usually show up together. I will explain what they are designed to do.
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 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.
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