webpack 可以在不需要或导入的情况下捆绑 js 文件吗？ Q2：为啥需要图表？

Posted 2023-02-24

【中文标题】webpack 可以在不需要或导入的情况下捆绑 js 文件吗？ Q2：为啥需要图表？

【英文标题】：Can webpack bundle js files without require or import? Q2: Why is a graph needed?webpack 可以在不需要或导入的情况下捆绑 js 文件吗？ Q2：为什么需要图表？

【发布时间】：2018-04-22 14:31:05

【问题描述】：

我是 webpack 的新手，据我了解，它将创建一个从入口点开始并基于之后每个脚本中指定的 require 命令的图表。

问题 1： 我想知道 webpack 是否有办法以某种方式捆绑一堆指定的文件（比如文件夹中的所有文件及其所有子文件夹）。

问题 2 我不知道为什么它需要创建一个图表开始。保留每个所需库的记录并且只在最终的 bundle.js 脚本中包含一次就足够了吗？为什么是图表？

非常感谢

【参考方案1】：

问题 1

这可能有助于您使用 glob npm 包将入口点定义为目录

var glob = require("glob");
// ...
entry: glob.sync("./test/**/*Spec.js")

要对此进行更多跟进，请查看此 github 问题 https://github.com/webpack/webpack/issues/370

然而，entry 也需要一个数组，其中第一个文件将用于捆绑，其余文件附加到 bundle.js 的末尾

entry: ['index.js', 'otherEntry.js', ...]

查看这篇 Medium 文章，了解更多关于多个条目的信息。 https://medium.com/@rajaraodv/webpack-the-confusing-parts-58712f8fcad9

3. “entry” — String Vs Array Vs Object部分

问题 2

免责声明：纯属个人观点

我不完全确定为什么要采用图形方法，但我开始接受这个决定，因为你的整个应用程序，无论它有多复杂，都会从一个起点开始执行。无论是一个入口点还是多个入口点，您的所有代码都将从一个特定的功能/模块开始。就像在许多编程语言中从main 执行所有操作一样。我可能完全错了，但这只是一个想法。

对Webpack 进行过更多研究或者是贡献者的人，请编辑此答案。我也想知道具体原因。

【讨论】：

没错，有一个起点很有意义。显然需要一个图表，因为做出这个的人非常聪明，不会武断地做出这个决定，但我仍然不知道为什么。我想我有一个可能的解释。有些事情可能在其他事情之前需要，因此将它们放在一个文件中可能还不够，将它们按正确的顺序排列也可能有助于工作，因此图表是跟踪它的一种方法。

嗯，在使用它时，我意识到添加多个入口点并不意味着它们在同一个范围内。因此，如果一个入口点是 A 类，另一个是 B 类，则它们无法看到彼此的类。似乎每个入口点都定义了一个“包”。

您可以直接将类添加到窗口对象，但是当您在 webpack 中定义一个类时，它似乎根本不是它所做的。如果您在浏览器中执行脚本，就会发生这种情况，但看起来 webpack 将上下文包装在某种块周围。因此，使用 glob 将多个 js 文件捆绑在一起是有效的。只有当它们彼此不相关时。跨度>

哦，是吗，我认为多个入口点就像使用第一个入口点生成 bundle.js 并在生成的 bundle.js 底部附加所有其他入口点图.无论哪种方式，您不认为多个入口点的目的是拼接彼此无关的脚本吗？