Webpack 与 ES6 模块

Question

最近开始学习Webpack。我的理解是，它将各种资源（如 JavaScript、CSS 等）捆绑到捆绑包中。

但是对于 JavaScript，我们不能用 ES6 模块实现相同的功能吗？例如，理想情况下，我们的登陆页面 .html 文件中只能包含一个 module 类型的脚本，并且该脚本模块将以 ES6 方式导入 require 依赖项。

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

Answer 1

对于大多数浏览器来说，是的，您只需使用 ES6 模块即可将所有需要的代码传输到浏览器，而无需使用 Webpack。不过，您是否愿意这样做是另一回事，并且取决于您的目标浏览器以及您的应用程序包含多少个模块（与您对大量网络请求的容忍度相平衡）。

目前，浏览器对 ES6 模块的支持几乎无处不在，但例如在 Android 上，export目前嵌入应用程序的浏览器尚不支持。因此，如果您想让脚本在 Android 上的 Facebook、LinkedIn 或 Twitter 应用内浏览器中运行，这将是一个问题。

一个潜在的更大问题是，如果不捆绑代码，您可能需要预期的网络请求数量。如果您的应用程序由两打模块组成（模块数量根本不是疯狂的），那么您的浏览器必须发出两打网络请求。您可能知道，通过两次请求加载（比如说）200K 的 JavaScript 比在一个请求中加载同样 200K 的 JavaScript 慢很多。

最后，即使您要在客户端加载两打模块，您可能也希望加载缩小的 JavaScript（即使您不进行转译，只是缩小）。这意味着您已经在进行一些服务器端代码操作。这意味着，将所有代码捆绑为最后一步仍然几乎总是有意义的。

希望这可以帮助！这是一个很好且合理的问题；只是回答这个问题让我思考了一些我以前没有真正思考过的事情。