我对webpack感到困惑。我发现webpack的一些地方是bundler意味着它只是创建了bundle.js文件。在某些地方，我发现webpack也充当模块加载器。它正在加载导入或要求es5语法没有任何加载器。如果webpack解析导入并需要javascript语法，那么babel和babel loader需要什么？
答案 0 :(得分：7)
Webpack是一个模块捆绑器，但这不仅仅需要将文件放在一起。来自webpack - Concepts：
webpack 是适用于现代JavaScript应用程序的模块捆绑器。当webpack处理您的应用程序时，它会递归地构建一个依赖关系图，其中包含您的应用程序所需的每个模块，然后将所有这些模块打包成少量的包 - 通常只有一个 - 由浏览器加载。
捆绑应用程序时，webpack需要弄清楚该捆绑包中必须包含的内容。 JavaScript中使用了不同类型的模块API，因此webpack使用它们来确定正在使用哪些模块（有关支持的API，请参阅Module API - Methods）。最着名的是CommonJS，这是Node.js使用的（require）。
webpack的一大优点是它可以在浏览器中运行（因此名称为 web 包）。问题是浏览器不支持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来单独使用它们，但是加载器可以弥补差距，从而提供更好的开发体验。