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

Question

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

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

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

Answer 1

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

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

是的。这就是为什么我们要使用“ webpack捆绑器”，“ Babel编译器/编译器”和babel-loader来将两者连接在一起的原因。没有babel-loader，webpack将无法通过Babel处理文件。

希望有帮助。