问题标签 [webpack-splitchunks]

我已经在构建一个工作网络应用程序，其配置已停用 gzip 压缩。

我使用HtmlWebpackPlugin将 Vue 的东西和生成的块（js 和 css）注入到 mainindex.html中。

这些块是由splitChunksWebpack 4 的指令创建的。

我现在想要的是激活CompressionWebpackPlugin以使我的大输出文件更小。

如果没有块，压缩插件会做得很好。它为每个块创建一个*.js.gz文件，但是，它不会将每个块中的引用更新到其他块。

因此，浏览器将无法找到所有需要的文件。

例如，index.html有一个或两个对chunk1.js.gzand的引用chunk2.js.gz，但在chunk1and内部chunk2有许多对其他块的引用，这些引用是找不到的，因为引用有结尾.js，而真实文件有结尾.js.gz。

如何CompressionWebpackPlugin正确配置（或任何其他整个 webpack 设置和插件），以便它们相应地更新文件引用？

这怎么可能是完全动态的，以至于我什至可以使用最小比率或最小文件大小的压缩功能？（然后一些输出块将是.js，一些将是.js.gz，所以一些引用必须是第一个选项，一些引用必须是第二个选项）。

类似问题的其他答案说，应该压缩服务器端而不是使用 webpack。但是，为什么会存在压缩插件呢？

设置是 Vue、Webpack（单页应用程序）、nginx、Django、Docker。

这是我当前的 Webpack 配置：

我需要使用 webpack 4 执行以下操作：

在哪里：

common.js：包含常用功能

one.js：依赖于 common.js

two.js：依赖 one.js 和 common.js

早些时候我使用了 webpack 3，这是生成此类包的默认行为。现在我使用 webpack 4 我无法让它运行

当我使用默认的 webpack 4 配置运行它时，我得到的是：

common.bundle.js -（好的）

one.bundle.js：包含common.bundle.js的代码（错误，应该只引用common.bundle.js）

two.js：包含 common.bundle.js 和 one.bundle.js 的代码（错误，应该只有 common.bundle.js 和 one.bundle.js 的引用）

我们有一个相当简单的 app/webpack 设置，如下所示：

babel.config.js

index.js

polyfill.js

webpack.config.js

我们最终得到的是两个块，bundle并且vendors. 奇怪的是whatwg-fetch(and core-js) 并没有以一个块的形式结束。当我创建一个构建并输出一个 stats.json 文件并使用Webpack Analyze对其进行分析时，我在模块列表 (./node_modules/whatwg-fetch/fetch.js) 中看到了该模块，但它的块列是空的。我已经通过搜索捆绑代码验证了它不会在任何一个块/捆绑中结束。

如果我将 polyfill 添加到entry.bundle数组的开头，这个问题就得到了解决，但我想知道为什么它不首先包含在包中，因为它是一个正常的应用程序导入？我希望它出现在vendors包中，因为它是一个 node_module。

如何获取 webpack4 生成的 chunkhash 值，以便我可以在我的内部使用它index.html来正确设置脚本 src？

简要背景：希望这不是一个愚蠢的问题，因为我是 webpack 的新手，今天开始学习。我知道如何配置、提取 js、css、缩小它们，也许还有所有非常基本的操作。

这是我的webpack.config.js：

相关部分filename: '[chunkhash].bundle.js'将产生一个文件名，如6f9e5dd33686783a5ff8.bundle.js.

我可以在我的 html 中使用该名称，<script src="dist/6f9e5dd33686783a5ff8.bundle.js"></script>但每次更新/重新生成代码时我都必须更改它。

我可以使用filename: '[name].bundle.js'，chunkhash但它不适合缓存 porpouses。

那么，有什么方法可以让我在每次构建项目时自动获取该chunkhash值并使用它来设置我的脚本 src 文件名？index.html

任何有效的建议都会受到欢迎！

例如，当将 maxSize 设置为 100000 时，我得到的初始块多于 maxInitialRequests 的值。我得到 7 个（引导程序，主要 + 5 个供应商块），其中我的 maxInitialRequests 设置为 3。我的期望是总初始块应该限制在 3。我在这里遗漏了什么吗？

这是我的优化配置：

我的 webpack 输出：

index.html 模板：

现在的问题是当 publicPath 设置为 时path.join(basename, '/assets')， index.html 被解析为：

没关系，但是因为我没有在 bundle.[hash].js 文件中的公共路径中添加斜杠，块

被解析为assets[id].[hash].js没有斜线并且没有找到它们。但是，如果我在 publicPath( path.join(basename, '/assets/')) 中添加尾随逗号，那么 index.html 将被解析为

然后找不到 bundle.[hash].js 文件。

我在配置中缺少什么？

splitChunks 在 Production 和 Development 模式下输出不同的文件是否正常？是否可以确保输出文件的数量/名称在模式之间相同？

这是我的配置：

谁能向我解释一下 webpack 的 SplitChunksPlugin 中 splitChunks.chunks 设置和 splitChunks.cacheGroups.{cacheGroup}.test 设置之间的区别？特别是如果它们都用于单个缓存组中。

该文档在这方面不是很有帮助，因此感谢您的帮助

我有一个配置文件（config.js），它依赖于两个文件：local.js（用于开发环境）和 deploy.js（用于生产环境）。在run serveor之后run build，它会创建一些依赖环境的配置。我像下面这样使用它：

我的 config.js：

但是在构建之后，这些配置将被插入到块通用脚本中。
我的目标是：
将此配置文件从我的公共块中拆分为一个（假设它的名称是 config.[hash].js），它将成为 HTML 时插入的脚本标记run build。之后，我可以更改服务器中的一些配置，并且当我设置一些错误的配置时不需要重新构建我的项目

更多细节：我的项目是一个多条目项目，每个条目中几乎都导入了config.js。我尝试了@Arunmozhi所说的动态导入，尽管配置块被拆分，但由于返回，我无法获取data函数中的配置。我试图用它来解决我的问题，但它没有用。PromisesplitChunks

只是分享一个我花了几个小时调试的问题和解决方案：

我有一个代码库，我想用 webpack 将它构建为一个库，并包含在另一个项目中。但是，当我在另一个库中导入输出文件时，它会返回undefined.

这是（简化的）webpack 配置：

从另一个项目中，我将按如下方式导入库：

页面上没有任何错误，控制台只会显示undefined.