是webpack模块加载器还是捆绑器？

我有点像webpack.我发现webpack的一些地方是bundler意味着它只是创建了bundle.js文件.在某些地方,我发现webpack也充当模块加载器.它正在加载导入或要求es5语法没有任何加载器.如果webpack解析导入并需要Javascript语法,那么babel和babel loader需要什么？

Webpack是一个模块捆绑器,但这不仅仅需要将文件放在一起.来自webpack - 概念:

webpack是现代Javascript应用程序的模块捆绑器.当webpack处理您的应用程序时,它会递归地构建一个包含应用程序所需的每个模块的依赖关系图,然后将所有这些模块打包成少量的包 - 通常只有一个 - 由浏览器加载.

捆绑应用程序时,webpack需要弄清楚该捆绑包中必须包含的内容.Javascript中使用了不同类型的模块API,因此webpack使用它们来确定正在使用哪些模块(请参阅模块API -支持的API的方法).最着名的是CommonJS,这是Node.js使用的(require).

webpack的一大优点是它可以在浏览器中运行(因此称为web包).问题是浏览器不支持CommonJS(require不存在),这意味着您无法使用丰富的Node生态系统.为了使其工作,webpack将转换任何导入语法,包括它们所引用的所需源.

巴别塔做什么？该巴贝尔网站说:

Babel是一个Javascript编译器.
今天使用下一代Javascript.

Javascript不断发展,新功能正在添加到该语言中.问题是浏览器需要一些时间来实现这些功能,并且功能需要达到一定的成熟度,因为一旦它们符合规范,您就无法再显着地删除或更改它们.ECMAScript功能的TC39流程解释了包含新功能的过程.

这就是Babel的用武之地.它允许您在任何浏览器开始实现它们之前使用这些功能(其中一些功能甚至可能不符合规范).Babel将这些功能转换为语义上等效的代码,可以在今天的Javascript引擎中运行.除了import/之外export,还有很多功能,Babel可以用于(例如ECMAScript的Object Rest/Spread Properties),特别是如果你想支持更旧(但仍然使用)的浏览器版本.

从webpack 2开始,ES模块开箱即用,它们不需要由Babel进行转换,你应该将它们留给webpack,因为它可以实现Tree Shaking.如果要使用尚不支持的Javascript功能,则需要对其babel-loader进行转换.为了澄清,加载器是将给定输入文件转换为有效Javascript的模块,可以由webpack使用(只要您有一个处理它的加载器,这可以是任何东西,例如css-loader允许您导入CSS文件).装载程序特定于webpack,但Babel是一个独立的工具,广泛用于webpack之外,并babel-loader通过使用Babel引擎盖并将其以预期的形式提供给webpack来组合它们.你可以先通过运行Babel然后在生成的文件上运行webpack来单独使用它们,但是加载器可以弥补差距,从而提供更好的开发体验.