CODEWITHSUNDEEP
webpackbabeljs
Priyesh Tiwari
Priyesh Tiwari

Reputation: 341

Is webpack module loader or bundler?

I am sort of confused with webpack. Some places I find webpack is bundler means it just create bundle.js file . At some places I find webpack is also acting as module loader. It is loading import or require to es5 syntax without any loaders. If webpack resolves import and require to javascript syntax then what is need of babel and babel loader?

Upvotes: 1

Views: 709

Answers (1)

Michael Jungo
Michael Jungo

Reputation: 32972

Webpack is a module bundler, but that entails far more than putting files together. From webpack - Concepts:

webpack is a module bundler for modern JavaScript applications. When webpack processes your application, it recursively builds a dependency graph that includes every module your application needs, then packages all of those modules into a small number of bundles - often only one - to be loaded by the browser.

When you bundle your application, webpack needs to figure out what it must include in that bundle. Different kinds of module APIs have been used in JavaScript, so webpack uses them to determine which modules are being used (see Module API - Methods for the supported APIs). The most well known is CommonJS, which is what Node.js uses (require).

A big merit of webpack is that it works in the browser (hence the name webpack). The problem is that browsers don't support CommonJS (require doesn't exist), which means that you couldn't use the rich Node ecosystem. To make it work, webpack transforms any import syntax alongside including the needed source, to which they refer.

What does Babel do? The Babel website says:

Babel is a JavaScript compiler.
Use next generation JavaScript, today.

JavaScript is continuously evolving and new features are being added to the language. The issue is that browsers need some time to implement these features and the features need to reach a certain maturity, because once they are in the spec, you can't remove or change them dramatically any more. The TC39 process for ECMAScript features explains the process of including a new feature.

This is where Babel comes in. It allows you to use these features before any browsers even start implementing them (some of these feature might not even make it into the spec). Babel transforms these features into a semantically equivalent code that can be run in today's JavaScript engines. There are a lot more features than just import/export, which Babel could be used for (e.g. Object Rest/Spread Properties for ECMAScript), especially if you want to support older (but still used) browser versions.

Since webpack 2, ES modules work out of the box and they don't need to be transpiled by Babel and you should leave them to webpack because it enables Tree Shaking. If you want to use JavaScript features that are not yet supported, you will need babel-loader to transpile them. To clarify, loaders are modules that transform a given input file to valid JavaScript, which can be used by webpack (this could be anything as long as you have a loader that handles it, for example css-loader allows you to import CSS files). Loaders are specific to webpack, but Babel is a standalone tool which is widely used outside of webpack, and babel-loader combines them by using Babel under the hood and feeding it to webpack in the expected form. You could use them individually by running Babel first and then webpack on the resulting files, but loaders bridge the gap, which gives a much nicer development experience.

Upvotes: 7

Related Questions