为什么 babel-loader 是 webpack 的一部分而不是 babel 本身？答案

【问题标题】：why babel-loader is part of webpack instead babel itself?为什么 babel-loader 是 webpack 的一部分而不是 babel 本身？
【发布时间】：2020-05-30 12:51:09
【问题描述】：

我正在学习如何在 JavaScript 中构建系统。如果babel-loader 是将React 转换为JavaScript 的转译器，为什么它是webpack 插件的一部分？

transpiling 和 bundling 不是一个单独的进程吗？

是否有资源可以解释所有这些框架如何组合在一起并使构建系统详细工作？我似乎只能在官方文档中找到高级概述。

【问题讨论】：

标签： javascript webpack build babeljs babel-loader

【解决方案1】：

Webpack 是一个“模块捆绑器”。它本身不会改变程序的来源（注意：对此有一些警告，例如缩小），只是将大型代码库的所有不同部分连接在一起，以便通过 Internet 更轻松、更有效地交付（取决于用例；您可能正在捆绑服务器端代码，在这种情况下，好处主要在于能够整合构建工具。
webpack 加载器用于在捆绑期间处理文件。它特定于 webpack（如果没有 webpack，你不会使用 babel-loader，除非可能与其他构建工具互操作，但即使那样它也不会单独使用）。
在 webpack 配置中，指定文件扩展名到 webpack 加载器的映射。例如，一个常见的情况是使用ts-loader 处理.ts 文件。这样，webpack 会将带有 .ts 扩展名的文件传递给 TypeScript 编译器，并在包中使用此编译的输出，而不是源程序。
Babel 是一个编译器；它需要一个 ESNext 程序并生成一个等效的 ES3+ 兼容程序。
babel-loader 做了 ts-loader 为 TypeScript 做的事情；将文件传递给 Babel 编译器，并返回要在原始源程序的包中使用的结果。

转译和捆绑不是一个单独的过程吗？

是的。这就是为什么我们有“webpack the bundler”、“Babel the compiler/transpiler”和babel-loader 将两者连接在一起的原因。如果没有babel-loader，webpack 将无法通过 Babel 处理文件。

希望对您有所帮助。

【讨论】：

完全有道理。谢谢你:)