问题标签 [webpack-splitchunks]

我有大型应用程序，我想拆分它。目前我有这个结构：

是否可以将其拆分为相同的块？我的意思是，我需要得到

目前我制作了这个 webpack 配置文件：

我得到了所有的捆绑包 - 但结果并不好。我有这样的文件：

我试图在我的文件中拆分我的构建文件webpack.config.js，但我的vendors 文件根本没有被创建。其余的node_modules，不是react或moment文件最终在main.js. 进入的文件的一个示例main.js是./node_modules/es-abstract. 我将我的正则表达式和文件名放入正则表达式检查器中，它通过了测试。我不确定发生了什么；任何帮助将不胜感激。

我正在通过动态导入拆分我的单页应用程序。我希望所有这些都捆绑在一个额外的文件中，而不是主捆绑包。这意味着，我最终会得到类似的东西：

• app.e82eb13a2342391fab679.js - 主包
• 0.c399423423532432c1da433.js - 单个包中的所有代码拆分块

在我的 Webpack 2 配置中，我使用以下配置来完成它：

在 Webpack 4 中，我尝试使用以下配置将额外的块限制为 1：

但我仍然会得到不需要的额外块：

我想用 webapack4 为每个条目制作 vendor.bundle。
例子。

建成后。

如何配置拆分块？
当前配置。

我尝试使用函数而不是字符串来处理名称，但它不起作用。

谢谢你。

根据文档，我正在将动态导入与 Webpack 一起使用： https ://webpack.js.org/guides/code-splitting/#dynamic-imports

非常基本的示例（不是实际代码）：

// main.js

// 模块A.js

// 模块B.js

问题是实用程序模块包含在 moduleA 和 moduleB 块中，因此它是重复的。我找不到让 Webpack 像标准导入那样将这些类型的依赖项拆分为单独的公共块的方法。SplitChunksPlugin 似乎没有捆绑moduleA和moduleB之间的任何常见依赖项，因为它们是动态导入的。请问有什么想法吗？

我有一个带有adminandfrontend模块的应用程序。管理环境只有一个 react-router 入口点，我不太关心这里的分块。前端需要分块。我看到的每种方法都使用基于 node_modules 的供应商块。如何确保该供应商块仅包含前端相关模块，而不包含管理模块？

理想情况下，我希望能够通过管理员和前端的 react-router 起点对其进行过滤。

我正在尝试通过以下方式使用 splitChunks 插件拆分我的 React 代码（使用 create-react-app 创建）：

我有以下组件（JSX）结构：

• 服务
  • 服务A
    • 组件A1
    • 组分A2
    • 子文件夹
      • 组分A3
    • ...
  • 服务B
    • 组件B1
    • 组分B2
    • ...
  • 服务C
    • 组件B1
    • 组分B2
    • ...
  • ...

我想有以下输出（构建）：

• 静态/js
  • 服务A
    • serviceA.bundle.chunkhash.js
  • 服务B
    • serviceB.bundle.chunkhash.js
  • 服务C
    • serviceC.bundle.chunkhash.js

（其他运行时/mains 位于 /static/js 的根目录）

另一个限制是组件是动态加载的

“componentPath”是动态确定的（当用户单击图标时，它会打开给定的服务）。

这样做的原因是我想将每个捆绑包包含到运行后端的单独 Docker 映像中。然后由于应用程序路由，每个 Docker 映像都可以访问：

到目前为止，我试图：

• 将 output.chunkFilename 设置为 [name]/[name].[chunkhash].js

• 将 webpackChunkName 与 [name] 和 [request] 一起使用：

  • [name] 似乎不起作用（只是将“[name]”作为我的目录名称的一部分）。

  • [请求] 展平目录名称：

    serviceA-ComponentA1 serviceA-ComponentA2 serviceA-subFolder-ComponentA3 serviceB-componentB1 serviceB-componentB2 ...

然后我尝试使用以下 splitChunks 插件：

这种方法看起来很有效，因为我所有的服务都在它们自己的目录中。但是我仍然有一些额外的目录作为数字（可能是捆绑 ID），我希望它们被包含在默认值中。

所以问题是：我的方法正确吗？

我在理解 Webpack splitChunks 插件的行为时遇到了问题。我正在做的是将现有站点上的旧脚本重写为组件并使用 Webpack 进行捆绑。捆绑包只是 JS，大部分是在正文的末尾加载的。但是一个小脚本需要在页面的页眉中，因为它还创建了一些稍后在页眉和正文中使用的全局方法，主要作为内联脚本。由于它用于 GA 跟踪，因此不会更改，必须尽快发送事件。

以下配置对我有用，但问题是为什么它只能以这种方式工作？

确切的问题在下面代码的注释中，但我也把它放在这里：我不明白为什么还需要包含!isUsedInAppHeader在common块的条件中。如果没有!isUsedInAppHeaderin 条件，则不会common.header创建块。然后，当我尝试通过为common.header块添加更高优先级来修复它时，它会导致app.header.js.

异步行为是我完全不理解的，因为它从未发生在app.js.

实际上，我还有另一个子问题。是否可以导出一个也立即初始化自身的公共块？或者您会完全提出另一种解决方案吗？标头中的脚本不能移动，还必须同步初始化，因为它的主要作用是为 GA 跟踪创建全局方法，这些方法必须立即在以下代码中使用。

谢谢！

网络包配置：

这是脚本在页面中加载的方式：

我正在尝试设置 Webpack，目前不使用 dev-server，并且我的应用程序由具有 index.html 的 python 后端提供服务。

我正在尝试使用 SplitChunksPlugin 以便我可以拥有多个块（应用程序、供应商、运行时等）。但是，为了简化它从 python 后端加载的方式，我想知道是否有一种方法可以告诉 Webpack 创建一个额外的文件，比如 main.js，它将以正确的顺序动态加载其他块。那是一回事吗？

我们正在构建一个相当大的应用程序，有很多页面。这些页面可以分为几个不同的页面组，它们之间共享许多公共依赖项，其他组中的页面不使用这些依赖项。

如果我要绘制一个粗略的简化依赖树，它会是这样的：

因此，基本上，两个“类”的页面PA和PB，我想通过以下方式将依赖项拆分为包：所有页面之间共享的依赖项（D-3在这种情况下），我希望在commons包中拥有它；

• PA仅在页面（D-1和）之间共享的依赖项，D-2我希望将其包含在PA捆绑包中；
• PB仅在页面（D-4和）之间共享的依赖项，D-5我希望将其包含在PB捆绑包中；
• 仅由单个页面 ( D-6) 使用的依赖项，它应该是该页面捆绑包的一部分

在当前设置下，因为D-3和D-4被D-5应用程序中超过一半的页面使用，它们被捆绑到commons包中，因此也按PA页面类型加载。

有没有办法扩展 next.Js 的 webpack 配置next.config.js以使用这种方式生成捆绑包optimization.splitChunks？