javascript - why babel-loader is part of webpack instead babel itself? - Stack Overflow

admin管理员组

文章数量:1317909

I am learning about how build system works in JavaScript. If babel-loader is transpiler that translates React to JavaScript, why is it part of webpack plugin?

Isn't transpiling and bundling is a separate process?

And is there a resource that explain how all this frameworks fit together and make build system work in detail? I seem to only find high level overview at the official docs.

I am learning about how build system works in JavaScript. If babel-loader is transpiler that translates React to JavaScript, why is it part of webpack plugin?

Isn't transpiling and bundling is a separate process?

And is there a resource that explain how all this frameworks fit together and make build system work in detail? I seem to only find high level overview at the official docs.

• javascript
• webpack
• build
• babeljs
• babel-loader

Share Improve this question Follow asked May 30, 2020 at 12:51 Ishan PatelIshan Patel 6,0911212 gold badges5151 silver badges7070 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 12

• Webpack is a "module bundler". On its own it does not change the source of a program (note: there are some caveats to this, e.g. minification), only join all the different bits of a large codebase together for easier and more efficient delivery over the Internet (depending on the use case; you may be bundling server-side code, in which case the benefits are mostly around being able to consolidate build tooling).
• A webpack loader is used to process files during bundling. It is specific to webpack (you would not use babel-loader without webpack, except maybe in cases of interop with other build tools, but even then it would not be used on its own).
• In a webpack configuration one specifies a mapping of file extensions to webpack loaders. For example, a mon case is to process .ts files using ts-loader. This way, webpack will pass off files with the .ts extension to the TypeScript piler, and use the output of this pilation in the bundle, instead of the source program.
• Babel is a piler; it takes an ESNext program and produces an equivalent ES3+ patible program.
• babel-loader does what ts-loader does for TypeScript; passes off files to the Babel piler, and returns the result to be used in the bundle in-place of the original source program.

Isn't transpiling and bundling is a separate process?

Yes. That is why we have "webpack the bundler", and "Babel the piler/transpiler", and babel-loader to connect the two together. Without babel-loader webpack would not be able to process files through Babel.

Hope that helps.

本文标签： javascriptwhy babelloader is part of webpack instead babel itselfStack Overflow