问题标签 [commonschunkplugin]

我需要帮助将以下代码从 webpack 3 迁移到 4。

我有两个入口文件，并且只希望第一个的依赖项包含在供应商块中。第二个条目的依赖项都应该保留在它自己的包中。

我正在尝试从 webpack 3 迁移到 webpack 4。

我遇到的问题是 CommonsChunkPlugin，当我尝试运行 webpack ( npm run webpack-dev-server -- --config config/webpack.dev.js) 时，出现以下错误：

是什么导致了这个问题？

我查看了webpack github上的更改日志，发现CommonsChunkPlugin已经被移除了

但是当我查看webpack 文档时，我可以找到 4.1.1 版的 CommonsChunkPlugin

我的直觉告诉我它CommonsChunkPlugin已被弃用，我们应该使用optimization.splitChunks.

有没有人遇到过这个问题并找到了从版本 3 迁移到 4 的好教程？

我正在尝试将项目拆分为公共块，使用旧的 commonChunks 插件很容易，因为该项目旨在拆分为各种库......使用新的 splitChunks 我无法获得相同的结果。所以我回到了一个基本的测试来试图理解新的 splitChunks，不幸的是我面临着同样的问题。这里是配置文件：

使用该配置，我可以实现此输出，这正是我想要做的：

这个例子很简单，一切正常！

• pageA 取决于 react 和 commonAB -> OK
• pageB 取决于 react 和 commonAB -> OK
• pageC 依赖于 react 和 commonCD -> OK
• pageD 取决于 react 和 commonCD -> OK

但是，当我修改ab_a.js的代码并添加

输出是：

如您所见， pageC 和 pageD 取决于 commonAB.js，但事实并非如此！这个例子很简单，一切正常！

• pageA 取决于 react 和 commonAB -> OK
• pageB 取决于 react 和 commonAB -> OK
• pageC 取决于 react 和 commonAB 和 commonCD -> 错误
• pageD 取决于 react 和 commonAB 和 commonCD -> 错误

此外，如果我从“react”导入 React；进入 cs_c.js （已经预期，但不是我想要的）我有输出：

• pageA 取决于 react 和 commonAB 和 commonCD -> 错误
• pageB 取决于 react 和 commonAB 和 commonCD -> 错误
• pageC 取决于 react 和 commonAB 和 commonCD -> 错误
• pageD 取决于 react 和 commonAB 和 commonCD -> 错误

感谢您的帮助 ！

我的供应商捆绑包变得非常大，我想分成两部分。（一部分包含所有与 react 相关的包，另一部分包含其余的包）。

我目前必须创建供应商捆绑包是：

我尝试在下面添加这些不同的方法，但到目前为止没有成功：

分裂发生了，但我无法在浏览器中运行。在我的控制台中，我得到：

我已经在我的 html 中加载了带有标签的新文件。

我正在处理一个包含大量代码的旧项目。这个项目使用 Webpack 3.8.1，我正在尝试更新到 4.4.1，这是一个真正的障碍课程！

主要的痛苦是项目使用 CommonsChunkPlugin：

我知道 Webpack 4 不再提供 CommonsChunkPlugin。非常感谢以下文章，他们节省了数小时的研究时间：

• https://gist.github.com/sokra/1522d586b8e5c0f5072d7565c2bee693
• https://medium.com/webpack/webpack-4-code-splitting-chunk-graph-and-the-splitchunks-optimization-be739a861366

感谢这些惊人的链接，我用这些行替换了 CommonsChunkPlugin：

由于此配置，应用程序正在正确构建，创建块并且应用程序按预期运行。但是构建时间真的很慢：7分钟多！

有趣的是，如果我完全删除整个optimization.splitChunks配置，应用程序仍然可以正常运行，并且构建时间仍然在 7 分钟左右：这完全就像我所做的那样optimization.splitChunks毫无用处。

我试图改变chunks属性：老实说，我并不真正理解它的作用......
如果我将它们设置为all，构建会更快：大约 1 分钟。

但不幸的是，从我的入口点生成的文件运行不佳：Webpack 似乎在执行我自己的代码之前等待加载块：

请告诉我我在这里没有错：Webpack 似乎在等待延迟模块被加载，但它并没有运行实际加载它们的代码......我想如何让它工作？

简单来说：

• 设置chunks为async：一切运行良好，但构建时间不可行（超过 7 分钟）
• 设置chunks为all：构建时间正确（大约 1 分钟），但我的代码没有运行¯\_(ツ)_/¯

很抱歉这篇长篇文章，但如果有人可以帮助我在正确的构建时间下完成所有这些工作，那将是完美的。

或者至少帮助我了解所有这些应该如何工作，官方文档不是很有帮助:(

提前致谢！

编辑：尽管有 700 万的构建时间，我仍尝试继续chunks设置为。 我有 20 个入口点，如果我在其中一个中添加导入 jQuery 和 jQuery-UI 的指令，构建时间会加倍。 如果我将它添加到 5 个文件中，构建会崩溃：async
import

<--- 最近几次 GC --->

[15623:0x103000000] 222145 ms: 标记扫描 1405.0 (1717.4) -> 1405.2 (1717.4) MB, 671.3 / 0.0 ms 分配失败 GC 在旧空间请求 [15623:0x103000000] 222807 毫秒 (1717.4) -405.2。 > 1405.0 (1667.9) MB, 662.4 / 0.0 ms 最后手段 GC 在旧空间请求 [15623:0x103000000] 223475 ms: 标记扫描 1405.0 (1667.9) -> 1405.1 (1645.4) MB, 667.1 / 0.0 ms 最后手段 GC 在旧要求的空间

<--- JS 堆栈跟踪 --->

==== JS 堆栈跟踪 ==========================================

安全上下文：0x1b6415c25ee1 1：fromString(aka fromString) [buffer.js:~298] [pc=0x1973a88756aa](this=0x1b6462b82311 ,string=0x1b642d3fe779 ,encoding=0x1b6462b82311 ) 3: from [buffer.js:177] [bytecode= 0x1b6488c3b7c1 offset=11](this=0x1b644b936599,value=0x1b642d3fe779,encodingOrOffset=0x1b6462b82311

>> 致命错误：CALL_AND_RETRY_LAST 分配失败 - JavaScript 堆内存不足

内存不足...我认为设置chunks为async不是解决此问题的正确方法：/

我正在使用 splitChunks 来优化我的应用程序，但是在一个块更新之后，浏览器会拉下所有资产，因为 clean-webpack-plugin 删除了整个 dist 文件夹，从而更改了请求的 If-Modified-Since。有没有办法只清理更改块的先前版本？

谢谢。

我正在使用 CommonsChunkplugin 来拆分我的代码。现在我正在尝试将我的项目迁移到 webpack 4。

这是旧的配置代码：

这是 webpack 4 的配置代码：

新的配置代码从项目中使用的节点模块中获取所有代码。但我只希望拆分供应商库（我在进入配置部分定义）。不是来自 node_modules 的所有代码。

在这种情况下：'babel-polyfill','react','react-dom',"jquery","bootstrap"

还有我的其他问题：

2) 我需要 HashedModuleIdsPlugin 了吗？

3）我需要拆分运行时代码吗？

我需要创建一个具有 10 个页面和 3 个入口点的多个 Web 应用程序。我是否应该创建 11 个HtmlWebpackPlugin并编写我想在每个 HTML 文件中使用的块。

我的文件树：

结果，我想看到类似的东西：

webpack 的版本 - 4.5.0

我也对在这种情况下如何使用webpack-dev-server和python3(tornado)服务器感兴趣？

我知道这并不难，但实际上（wp 4.5.0）我找不到信息，而且对于刚开始使用 webpack 的人来说，文档很难阅读。

要使用 importScripts 在 web worker 中加载特定于 worker 的包，我需要告诉 Webpack 将所有 Webpack 的客户端特定代码放入该 worker 包（webpackJsonp、_webpack_require__ 等）。

这是入口捆绑配置：

这是我的插件配置：

工人代码是这样的：

我试过添加

但得到了While running in normal mode it's not allowed to use a non-entry chunk (worker_bundle)

如何告诉 webpack 我想要两个完全独立的自加载包？

我在 Webpack 2.x 配置文件中有这些设置，我正在迁移到 Webpack 4。我知道CommonsChunkPlugin已弃用，我应该使用optimization.splitChunks，但我在文档中找不到关于如何转换两个CommonsChunkPlugin实例的任何地方。

如何从上述设置中获得相同的结果optimization.splitChunks？