Webpack vs ES6模块

Question

我最近开始学习Webpack。我所理解的是，它将各种资产捆绑在一起，如JavaScript、CSS等。

但是关于JavaScript，我们不能用ES6模块实现同样的功能吗？例如，理想情况下，我们可以在登录页面.html文件中只有一个模块类型的脚本，该脚本模块将以ES6方式导入所需的依赖项。

我认为几乎所有现代浏览器都支持ES6模块。在这种情况下，Webpack不是多余的吗？

Answer 1

对于大多数浏览器来说，是的，你可以只使用ES6模块就可以完成将所有需要的代码放到浏览器中，而不需要使用Webpack。但是，您是否愿意这样做则是另一回事，取决于您的目标浏览器和您的应用程序包含多少模块(与您对大量网络请求的容忍度相平衡)。

浏览器对ES6模块的支持现在几乎无处不在，但是，例如，在安卓系统上，嵌入式应用浏览器目前还不支持export。所以，如果你想让你的脚本在Facebook或LinkedIn或Twitter的Android应用内浏览器中工作，那将是一个问题。

一个潜在的更大的问题是，如果你不捆绑你的代码，你可能需要预计网络请求的数量。如果您的应用程序由24个模块组成(根本不是非常多的模块)，那么您的浏览器必须发出20多个网络请求。正如您可能知道的，在二十几个请求中加载(比方说) 200K的JavaScript比在一个请求中加载200K的JavaScript要慢得多。

最后，即使你打算在客户端加载24个模块，你大概也会想要加载精简的JavaScript (即使你不是在转译，只是在压缩)。这意味着您已经在进行一些服务器端代码操作了。这意味着，将所有这些代码捆绑在一起作为最后一步，几乎总是有意义的。

希望这能有所帮助！这是一个很好也很合理的问题；仅仅回答这个问题就让我思考了一些我以前没有真正想过的事情。

Answer 2

我认为当es6导入在浏览器中成为标准时，Webpack将继续作为功能上的有用工具。

有很多事情是由Webpack管理的:插件、加载器等等。此外，捆绑的需求将一直很大。

此外，出现了Webpack版本5，它提供了模块联合功能，您可以将一个捆绑包中的部分代码用于另一个捆绑包中。这真的是一个很好的特性，特别是在微前端。

所以，我认为Webpack真的是一个很棒的工具，它将永远是有用的…