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

时间:2017-07-21 18:08:30

标签: webpack babeljs

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

1 个答案:

答案 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来单独使用它们,但是加载器可以弥补差距,从而提供更好的开发体验。