使用 webpack 的困惑答案

【问题标题】：Confusion on the use of webpack使用 webpack 的困惑
【发布时间】：2023-03-29 06:32:01
【问题描述】：

我是 JS 新手，正在学习 Webpack，想问一些关于它的问题。 第一个问题，如果我们可以使用 ES6 import&export 并使用一个脚本，那么为什么要使用 Webpack 从多个 JS 文件中创建一个 bundle，也就是说，最初我们有三个 JS 文件：一个。 js、two.js 和three.js。在 HTML 中我们使用三个脚本：

<script src="./one.js">
<script src="./two.js">
<script src="./three.js">

然后，我们使用导入和导出，这使我们能够在 HTML 中使用像 <script src="./one.js"> 这样的脚本。 第二个问题，为什么Webpack也叫transpiler？它究竟转译了什么？

【问题讨论】：

如果你已经将你的应用分成了数百个单独的文件（这对于任何重要的页面来说都是完全合理的），并且它们都是import彼此，那么浏览器必须制作数百个单独的文件HTTP 请求来获取它们。这是相当大的开销，并且会显着减慢加载过程。
@deceze，嘿伙计，谢谢你的好心 cmets，你的意思是即使我们在 HTML 中只包含一个脚本，并且在那个 JS 文件中我们使用导入。无论如何都会下载其他脚本对吗？
他们必须成为。否则浏览器无法执行。
@deceze，好吧，我有最后一个问题，为什么 Webpack 也叫 transpiler？它究竟转译了什么？只将 ES6 模块转译成 CommonJS？
至少它将多个单独的文件转换为一个捆绑文件。通过附加插件，它可以将 Typescript 转换为 ES，或将 ES6 转换为 ES5，或者进行各种源代码转换。存在将一些源代码转换为其他一些源代码，即transpiling。

标签： javascript

【解决方案1】：

webpack 做了很多任务，捆绑、转译是其中的几个。

捆绑：我们将 javascript 代码分成多个组件/类/小部件，并在整个项目中重用它们。您可以将它们全部包含到 index.html 中，这很好，但 HTTP 协议一次只能下载 2 个文件，因此您的初始加载时间会增加。然而，现在人们倾向于创建 2 个捆绑文件以减少初始加载时间。
Transpiler： Transpiler 将某种形式的代码转换为其他形式。正如我们所知，所有浏览器都理解 ES5，但在大多数框架中，我们使用像 ES^/7 这样的高级语法，因此有必要将它们转换为低级语法。 Webpack 使用 babel 包来做到这一点。这也是我们称其为 transpilar 的原因。

【讨论】：

所以如果我理解正确的话，人们永远不会使用 Babel 来让 ES6 模块在 ES5 浏览器中运行，因为 webpack 正在这样做？我的意思是 Webpack 只处理在没有 Babel 的 ES5 浏览器中运行的 ES6 模块。你怎么看？
webpack 是任务运行器。对于需要包的任务。对于转译器，它使用一个名为 babel 的包。