Question 375151 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – Basic Front-End Question – Can someone please explain Webpack and Babel?

Some background:

I am an experienced back-end developer starting up a new web front-end project. I am fluent in Typescript, and am currently setting up an Electron ReactJS application /w the Webpack plugin. I’m running into a brick wall right now due to the fact that I simply do not understand what Webpack is doing.

I’ve read through tutorials and online explanations (such as this one), but mostly the tutorials are just showing how to set up a webpack application – not really explaining what webpack is doing (or, at least, not sufficiently for me). From what I’m reading, I can see there is a lot of history behind why webpack was developed, but I’m not understanding it.

I understand that webpack "packages" together the front-end application and applies "polyfils" (which, I also do not understand), but I’m not grasping why it is necessary, or what that really means. Additionally, I’m not fully understanding the role that Babel plugins are playing into the Wepack application – Why do I need Babel to translate Typescript? What is it translating it into?

The entire thing is just extremely confusing for me – I’m thinking it has something to do with Browser Support, and translating typescript to a common ES JS standard – but I don’t know this for sure, and I’m operating at the very edge of my knowledge here.

Are there any experienced Front End developers here who can help me understand what is happening here? Your help and explanation will be greatly appreciated.

I’ve read through multiple online tutorials, and am expecting a detailed explanation of what Babel is, how it relates to Browser Support, and how that relates to what Webpack offers. Also, and explanation behind why Webpack is necessary.

Tags:

2

Answers


  1. 0

    Webpack:
    Webpack is a module bundler for JavaScript applications. It takes modules with dependencies and generates static assets representing those modules, which can then be loaded in the browser. key points about Webpack:

    1. Module Bundling
    2. Dependency Management
    3. Code Splitting
    4. Provides Plugins

    Babel:
    Babel is a JavaScript compiler that transforms modern JavaScript code (ES6/ES7/ESNext) into backward-compatible versions that can run in older browsers or environments. key points about Babel:

    1. JavaScript Transpilation
    2. Syntax Transformation
    3. Plugin System

    Similarities:

    1. Both Webpack and Babel are widely used in modern JavaScript development workflows.
    2. They are both configurable and extensible, allowing developers to tailor their setups to specific project requirements.
    3. They are both essential tools for building modern web applications, especially those using features from newer JavaScript standards or frameworks.

    Differences:

    1. Webpack primarily focuses on bundling and optimizing assets for the browser, while Babel focuses on transpiling JavaScript code to ensure compatibility with older environments.
    2. Webpack handles various assets in addition to JavaScript, while Babel is specifically focused on transforming JavaScript syntax and features.
    3. Webpack has a rich ecosystem of loaders and plugins for asset management and optimization, while Babel’s plugin ecosystem is primarily focused on JavaScript transformation and syntax extension.
    Login or Signup to reply.
  2. 0

    You don’t have to know the inner workings of Babel/Webpack to do frontend development unless you building some plugin or a package using it. I told it because you’re a backend developer and most of the frontend developers don’t know those to be honest.

    But, I’ll give you a simple explanation for your question.

    Webpack
    This technology is a popular tool in frontend development known as a module bundler. It essentially takes your project’s various Javascript files and combines them into optimized bundles, often a single .js file. This bundling has several advantages.

    • Performance boost – Compilers can compile code in a single file faster than code in several files.

    • Easier Code Management – As webpack makes sure the code is packed into a main bundle, you don’t have to worry about it.

    • Dependency Resolution – If you’re using external packages in your projects, webpack can detect them and bundle them with your project. (Ex: npm modules)

    Babel
    Babel acts as a bridge between modern JavaScript and older browsers. It’s a JavaScript transpiler, which means it converts code written using the latest features (ES6+) into a version that can be understood by browsers with limited JavaScript support.

    In the question you also asked these:

    I understand that webpack "packages" together the front-end
    application and applies "polyfils"

    Think about flask in python (which is a library/package). It do what we can’t do with pure python. (making web applications with pure python) Polyfils is a term used for the packages used by babel to do what it can’t do.

    Why do I need Babel to translate Typescript? What is it translating it
    into?

    Webpack don’t translate code. Babel does it. So, webpack using babel in the bundling process to transpile any code. (TS -> JS, SASS -> CSS)

    Hope this make sense!

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search