问题标签 [webpack-splitchunks]

在使用 Webpack 时，当配置为生成运行时块和其他块（例如供应商块）时，运行时块相对于其他块包含在页面上的顺序是否重要，或者它可以按任何顺序排列？

假设以下运行时块配置：

或者

经过一些测试后，我发现无论顺序如何，它都能正常工作，但我找不到任何明确暗示需要特定排序或支持任何块排序的文档，并且这些信息可能对其他人有用。

我只想在我的 HTML 模板中插入供应商脚本。

这些脚本收集在src/vendor目录中。

我想在我的模板 HTML 文件中将它们导入为<script>.

例如：

当我运行 webpack 时，它会将 luxon 存储在dist/assets名为ba9f5c2186e41fc21fa3.js. HTML 文件无法导入脚本，因为由 webpack 创建的名称错误：

如何将我的供应商 js 文件插入到我的 HTML 中？

我的 webpack 配置：

我试图添加一个规则，以便导入的 js 文件的名称不会改变，但是我的加载器会抛出很多错误。

编辑： 尝试了 webpack 文档中的代码拆分示例（防止重复）。现在使用luxon.min.js. 不幸的是，它现在完全没用了，因为您不能再使用 luxon 的任何功能（luxon.DateTime在浏览器控制台中输入返回luxon is not defined）。

我正在使用 webpack 5，并为 main.js 文件使用 contenthash。但是我的 main.js 文件在每次构建时都会获得一个新的哈希值，即使我的应用程序没有任何变化。当我比较来自两个不同构建的两个 main.js 文件时，我发现“mini-css-extract-plugin”每次在每次构建时都会在 main.js 文件中注入一个新数字。这导致我的 main.js 的哈希数发生了变化。我不知道为什么 mini-css-extract-plugin 会更新我的 main.js 文件中的这些数字，以及如何阻止这些数字，以便我的 main.js 哈希值不会被不必要地更改。我附上了两个 main.js 文件的比较。

任何帮助都将不胜感激。谢谢。

目前我在反应应用程序中使用 webpack 包（4.8.1）。在 webpack 配置里面，我使用的是这个配置，

上面的配置是创建vendor.main.xxxxxxxxx.chunk.js文件，压缩后大约204KB。

现在，当我尝试将 webpack 包从 4.8.1 更新到 4.44.2/4.46.0 时，更新 wwbpack 后， vendor.main.xxxxxxxxxxx.chunk.js 的大小从204KB增加到280KB。请帮助我，为什么更新 wepback 包会导致 vendor.main.xxxxxxxxxxx.chunk.js 文件的大小。

我们正在尝试使用 webpack 的optimization.splitChunks.cacheGroups功能对特定文件进行分块，但是当我们执行时，我们在输出中定义的库总是未定义的。

如果我们删除我们能够访问的 cacheGroups 对象window.foo

在本地，我们使用 HTMLWebpackPlugin 将所有需要的块按顺序注入到 index.html 中，以便一切正常。

但是在生产中，我们使用动态页面，并且只将我们的捆绑client.js文件添加到页面中。该文件不会调用我们认为它应该调用的生成块。我们也有其他的缓存组，但为了简单起见，我认为我只是使用供应商。

我一直在尝试许多不同的优化配置，但没有任何进展，我还发现了其他一些有这个问题的人，但没有真正可行的解决方案或解决方法的例子，所以我在这里联系：

• https://github.com/webpack/webpack/issues/7506
• 编译后未定义 Webpack 自定义库

是否有我缺少的基本配置步骤window.foo不等于undefined？

如果这不可能，我是否需要以client.js某种方式将生成的块导入主文件？注意：我尝试从 dist put 引用它们永远无法解析路径？

感谢您的任何帮助，您可以提供。

我有一个多条目应用程序，其中在一个网页中加载了多个条目。在这里，我收到以下错误“未捕获的 TypeError：webpack_require .r不是函数”。我分析了 webpack 构建输出并得出以下结论。

条目 A 和 B 都需要模块 C。A 和 B 的输出都加载在一页中。对于条目 B，webpack 为 C 创建了一个单独的块，其中还包含一些其他模块。但是对于 B，webpack 将 C 包含在与 B 的输出相同的文件中。当从 B 调用模块 C 时，它使用的是单独的块文件而不是 B 的输出文件中包含的模块。

现在的问题是来自单独块的模块 C 正在调用

而包含在 B 的输出文件中的模块 C 没有。在 B webpack 的上下文中，不知何故没有定义 r。

我在这里看到两个问题。

1. 为什么 webpack 使用来自单独块的模块 C 而不是文件 B 的输出？
2. 为什么文件 B 的输出中没有定义 r？

根据 webpack 的评论，r 是“在导出上定义 __esModule”。我可以以某种方式强制为给定条目定义 r ，因为这可能会解决这个错误？

我正在使用 webpack 5.28.0

我们有一个使用从 Create React App 创建的 React 的 Web 应用程序（前端）。该应用在 Google Cloud Platform App Engine Standard 上运行。我们的 Web 应用程序是代码拆分的。然后在用户导航中加载每个页面。

它工作得非常好。我们遇到的问题是，例如用户 A 在应用主页上。我们部署了一个更改块文件名的修复程序。用户 A 然后尝试访问另一个页面，然后得到错误Loading chunk * failed。获取文件的 url 现在返回 404，因为该文件已被一些新的块文件替换。

这是我在研究过程中看到的一个常见问题，但我没有找到适用于 Google App Engine 的解决方案。

这是一篇解释问题/解决方案的文章：https ://mitchgavan.com/code-splitting-react-safely/

我想使用解决方案“解决方案 1：部署后将旧文件保留在您的服务器上”，但我看不到如何使用 GCP 执行此操作......

这是 app.yaml 文件

我们有以下调度文件（* 表示屏蔽 url）

我以前的 tsconfig.json 有以下选项：

为了让延迟加载 React 组件正常工作，我必须将其更改为：

这适用于延迟加载，但我正在开发的应用程序的其他部分损坏了，因为这些部分使用require语法。有没有办法让那些使用新的 tsconfig 值的人工作？

或者一种为每个项目定义多个配置的方法，这样我可以保留原始配置并在需要延迟加载的地方定义一个额外的 tsconfig？

我正在使用 webpack splitChunks 代码拆分我的 reactjs 应用程序。有两个组件<MassCommEmail />，<MassCommModule />它们是使用 React.lazy 惰性加载的。下面是我从 webpack 构建的

在使用 webpack 分析器进一步分析块时，我可以看到Filter 这两个块都使用了报告 我的期望是为共享文件有一个单独的块，例如 MassCommEmial~MassCommModule.[hash].js，它包含来自两个组件的共享代码。下面是我的 splitChunks 代码

请提出建议。

我有一个 webpack 库，其中包含一个 webworker（通过 'magic' worker 处理程序导入），我正在尝试从另一个项目（在本例中为 angular 项目）运行这个库。

我已正确地将工作程序（和工作程序块）文件复制到我的角度项目的输出中，因为如果我在托管它的同一域中运行我的角度项目，webworker 将正确运行。

这是用于运行工作程序的代码（然后将其添加到 webpack）

我已经用处理跨域故障转移的存根替换了默认工作程序。

我的问题是我的项目通常不会运行相同的域上下文，而是在不同的域上运行。我可以__webpack_public_path__在非工作人员代码中设置，以便正确解析网络工作人员 url - 但是网络工作人员只加载一个块加载存根，该存根具有来自 webpack 配置的嵌入式公共路径（如果已设置），但无法更改它在运行时。

我的问题是-有没有一种方法可以编辑该块加载存根以在运行时具有不同的公共路径，或者，有没有一种方法可以更改库与 Angular 项目的 webpacker 的交互方式，以便用于 deploypath 的值被复制到被复制的工作 js 库（通过 angular.json 中的附加资产）？