Menu
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.
839
Configuring webpack provides complete control over the development environment, while initializing with Create React App prevents any custom configuration by default.
Babel can be classified as a tool in the "JavaScript Compilers" category, while Webpack is grouped under "JS Build Tools / JS Task Runners".
Creating a React application requires you to set up build tools such as Babel and Webpack. These build tools are required because React's JSX syntax is a language that the browser doesn't understand.
React uses Node. js on development to open the app on http://localhost:3000 , thus the start script enables you to start the webpack development server.
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
154
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
