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.
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)..ts
files using ts-loader
. This way, webpack will pass off files with the .ts
extension to the TypeScript compiler, and use the output of this compilation in the bundle, instead of the source program.babel-loader
does what ts-loader
does for TypeScript; passes off files to the Babel compiler, 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 compiler/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.