Distinguish Babel and Webpack

Sometimes I am still confused about Babel and Webpack, so I noted this for reference reasons.

Babel

  • Not all new features of JS are supported by all browsers, but Babel compiles source code to the version that can work on any browser.

Webpack

  • It is a bundler for JS and static files. It packs many files and modules into a few files.
  • It also has some functions like code-splitting, and lazy loads help make our app more effective.
  • It also allows us to write custom packing logic with the “loader” plugin.

Summary

Usually, in modern web applications, Babel and Webpack are used together.