我对 webpack 有点困惑。有些地方我发现 webpack 是 bundler 意味着它只是创建 bundle.js 文件。在某些地方，我发现 webpack 也充当模块加载器。它正在加载 import 或 require 到 es5 语法，没有任何加载器。如果 webpack 将 import 和 require 解析为 javascript 语法，那么 babel 和 babel loader 需要什么？
【问题讨论】：
Webpack 是一个模块打包器，但它不仅仅需要将文件放在一起。来自webpack - Concepts：
webpack 是现代 JavaScript 应用程序的 模块捆绑器。当 webpack 处理您的应用程序时，它会递归地构建一个 依赖关系图，其中包含您的应用程序需要的每个模块，然后将所有这些模块打包成少量 bundles - 通常只有一个- 由浏览器加载。
当你打包你的应用程序时，webpack 需要弄清楚它必须在那个包中包含什么。 JavaScript 中使用了不同类型的模块 API，因此 webpack 使用它们来确定正在使用哪些模块（有关支持的 API，请参阅Module API - Methods）。最著名的是 CommonJS，它是 Node.js 使用的 (require)。
webpack 的一大优点是它可以在浏览器中运行（因此得名 webpack）。问题是浏览器不支持 CommonJS（require 不存在），这意味着您无法使用丰富的 Node 生态系统。为了使其正常工作，webpack 会转换任何导入语法以及它们所引用的所需源代码。
Babel 是做什么的？Babel website 说：
Babel 是一个 JavaScript 编译器。
立即使用下一代 JavaScript。
JavaScript 不断发展，新功能正在被添加到该语言中。问题是浏览器需要一些时间来实现这些功能，并且这些功能需要达到一定的成熟度，因为一旦它们在规范中，你就不能再删除或改变它们了。 The TC39 process for ECMAScript features 解释了添加新功能的过程。
这就是 Babel 的用武之地。它允许您在任何浏览器开始实现它们之前使用这些功能（其中一些功能甚至可能没有纳入规范）。 Babel 将这些特性转换成语义等价的代码，可以在当今的 JavaScript 引擎中运行。除了 import/export 之外，还有很多功能可以用于 Babel（例如 Object Rest/Spread Properties for ECMAScript），特别是如果您想支持较旧（但仍在使用）的浏览器版本。
从 webpack 2 开始，ES 模块开箱即用，它们不需要由 Babel 转译，您应该将它们留给 webpack，因为它启用了Tree Shaking。如果您想使用尚不支持的 JavaScript 功能，您将需要 babel-loader 来转译它们。澄清一下，加载器是将给定的输入文件转换为有效 JavaScript 的模块，可以被 webpack 使用（这可以是任何东西，只要你有一个处理它的加载器，例如 css-loader 允许你导入 CSS 文件） .加载器是 webpack 特有的，但是 Babel 是一个独立的工具，在 webpack 之外被广泛使用，babel-loader 通过在底层使用 Babel 将它们组合起来，并以预期的形式将其提供给 webpack。你可以单独使用它们，首先运行 Babel，然后在生成的文件上运行 webpack，但是加载器弥补了差距，从而提供了更好的开发体验。
【讨论】：