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

Answer 2

WebPack and react-scripts is slightly different things.

Webpack is used for compiling bundle for your web-application, which can be free-form and have some entry point. More then, webpack is used with babel-presets, which allows you to use modern ES6+ constructions in relative old browsers. Also, webpack is responsible for assembly dependent node_modules in one file, and maybe compress and optimise it. You can read more about webpack philosophy here: https://webpack.js.org/concepts/

React-scripts is just starter kit for launching some customized webpack-dev-server, which is configured to work with provided boilerplate for React playground. It's just demo purposes thing. Most modern web libraries has it's own starter kit, even server-side libraries too, e.g. https://github.com/reimagined/resolve/tree/master/packages/resolve-scripts and so on