【问题标题】: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 脚本中包含一次就足够了吗?为什么是图表?

非常感谢

【问题讨论】:

    标签: javascript import webpack require


    【解决方案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 底部附加所有其他入口点图.无论哪种方式,您不认为多个入口点的目的是拼接彼此无关的脚本吗?
    猜你喜欢
    • 2016-06-19
    • 1970-01-01
    • 2014-08-03
    • 1970-01-01
    • 2017-01-28
    • 2017-07-12
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多