问题标签 [splitchunksplugin]

鉴于以下情况。

一个 webpack 构建生成 3 个包，一个 CI 将它们发布到这样的 CDN（每个构建 ID 生成一个新文件夹）：

现在，考虑下一个构建产生：

其中一些文件可能是相同的，假设没有任何变化，但application.js. 我们有一个生成清单的脚本，它只是比较这两个构建并生成：

我们想要挂钩到 webpack 块加载器策略并从构建中加载块1，因为没有理由使任何客户端缓存无效。

更具体地说，我们希望对版本进行修补，以便我们可以在可能的情况下重用静态资产。

我们需要一个钩子来检索请求并返回一个 url，然后 webpack 将使用该 url 来加载资产，例如：

1. webpack 功能请求使用__webpack_public_path__

如何获取 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

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

这是我在 React 应用程序中使用的一些代码。我的路由是使用react-router-config编写的，这使我可以保持集中的方式，因此我总是知道去哪里以便修改或添加一些。

然后，假设 Child 组件是动态导入的：

我希望生成的块包括 Child、它的导入/依赖项和 GrandChild 及其导入/依赖项；但实际情况是，输出是一个很小的 ​​(1kb) 文件，其中仅包含该组件 (Child) 的行。

我怎样才能让 webpack 块对/child/:id路由很重要？

我正在使用从 4 捆绑的 JS 导入的 LESS 进行项目webpack。

我的问题是该项目有自己的设计系统，组件使用相同的组件，如“排版”

示例：
我有一个导入按钮typo.less。
因此，我使用该按钮的所有块都将生成typo.less.
我怎样才能防止这种重复？ splitChunks好像不能在这里操作。

我想通过以下方式使用 Webpack 拆分我的块：

每当我导入一个 NPM 包时，比如

我想要一个像这样的块：

这是我正在使用的配置：

webpack.config.js

现在，我将每个依赖项都styled-components视为不同的块。例如：下面的 3 个包都是需要的styled-components

理想情况下，我还希望有一个commons或shared块来避免多个模块需要的可能模块。

有人知道怎么做吗？

我想生成这样的 CSS：

在我的 Web 应用程序使用的普通块中。

• main.css 1.chunk.css 2.chunk.css ....等

和一个文件

• 服务器.css

因为我在后端使用 server.css

我尝试使用此https://webpack.js.org/plugins/mini-css-extract-plugin/#extracting-all-css-in-a-single-file但总是发出一个 css。

我正在将SplitChunksPluginwebpack 应用到我的服务中。

喜欢，

并且出现了一些问题。在讨论这些问题之前，我将介绍我的服务的缩小结构。

1. Web 服务带来了几个script. 例如，

（我正在使用menifest.json）

2. global.js就像_

3. main.js就像_

而已。实际结构更复杂。所以，现在是问题。

1. 当我不使用splitChunksor 设置splitChunks.chunks为async时，没有问题。但是当我将 设置为splitChunks.chunks时all，浏览器中会显示以下问题。

如果我_在浏览器的控制台中输入，则_存在。

2. 所以，为了找出发生了什么，我console.log插入global.js喜欢

何时显示console.log日志，splitChunks.chunks = 'async'但何时不显示splitChunks.chunks = 'all'。

3. 现在，我尝试导入所有供应商，例如

html 有上面的行，但是当我在 devtool 中看到网络选项卡时，没有供应商的 javascript 文件。

我很难申请，splitChunksPlugin但这并不容易......而且我找不到一点线索......

这对任何答案或想法都会有很大帮助！谢谢。

我通过 Rails + Webpacker 将 SplitChunksPlugin 与 Webpack 4 一起使用。

我有一个应用程序，我想将其拆分为多个块 - 除了一个面向公众的入口点，我想成为一个自包含的单个文件。

当我以前使用 CommonsChunkVendor 时，我可以这样做：

这将排除“应用程序”入口点被拆分。

如何使用 SplitChunksPlugin 实现这一点？

我想从某个捆绑包中制作多个块，并由服务器有条件地使用它。html中是否放置某些脚本的逻辑由另一个应用程序控制，这不是问题。我尝试了可加载组件，但对我不起作用，因为他生成了糟糕的树依赖。

然后，我有：

这会生成一个没有 Header 模块代码的 clients.js，以及 header-module-A 和 header-module-B 文件，很酷。

方案 1

我在一个页面中调用clients.js、header-module-A 和header-module-B。一切都很好。

方案 2

我调用clients.js，header-module-A，但在某个页面中没有header-module-B。clients.js 文件不起作用，因为他的 header-module-b 有一个依赖项（该文件使用 checkDeferredModules 函数检查所有模块）。

此时，我找到了带有 runtimeChunk: 'single' 选项的解决方案https://github.com/webpack/webpack/issues/9629 ，这些会生成一个新的运行时文件。我此时的配置是这样的：

我已将 runtime.js 文件放在页眉，将其余脚本放在页脚，但不起作用。

新场景1

我在一个页面中调用clients.js、header-module-A 和header-module-B。标题不起作用。

新场景2

我调用clients.js，header-module-A，但在某个页面中没有header-module-B。标题不起作用。

我在做什么错？

我正在构建一个反应应用程序并使用 webpack 来捆绑资产。我还拆分了所有 node_module 包，这样文件大小就不会膨胀。

目标是减少网络请求并减少包大小，所以我认为将 jsx 和 js 代码预转换为 commonjs 模块在服务器端使用 babel 是理想的，这样 babel 将不再需要发送到浏览器

到目前为止，这是我在 webpack 配置文件中的 optimization.splitChunks 代码。如果有什么解释不清楚，我是 webpack 和 babel 的新手，请原谅。

然后这是我在查看 chrome devtool 元素选项卡时得到的结果