Webpack 与 ES6 模块

Question

我最近开始学习 Webpack。我所理解的是，它将各种 Assets (如 JavaScript、CSS 等)捆绑到捆绑包中。

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

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

Answer 1

对于大多数浏览器，是的，您只需使用 ES6 模块即可完成将所有需要的代码发送到浏览器，无需 Webpack。但是，您是否愿意这样做是另一回事，这取决于您的目标浏览器以及您的应用程序包含多少个模块(与您对大量网络请求的容忍度进行平衡)。

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

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

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

希望这可以帮助!这是一个很好且合理的问题；只是回答它让我想到了我以前没有真正考虑过的东西。