问题标签 [splitchunksplugin]

我们有一个传统的服务器渲染应用程序（非 SPA），其中每个页面都使用 vuejs 进行扩充

我们现有的 webpack 3 配置是

webpack.config.js

shared.js

pageA.js

shared.css

index.html

有了这个设置

1)runtime.js包含 webpack 加载器，因此任何更改shared.js都不会导致pageA.js缓存被破坏，反之亦然

2)shared.js包含任何共享依赖项（在这种情况下vue）以及每个页面的任何共享全局初始化（设置vue默认值等）。这也是我们导入共享的全局 css 文件的重点。

3)pageA.js不包含任何导入的依赖项shared.js（vue在这种情况下），但确实包含它导入的依赖项（axios在这种情况下）。

我们无法使用SplitChunksPlugin

1)SplitChunksPlugin似乎不允许将入口点作为分割点。

2) 所有示例都将所有节点模块依赖项拆分为供应商块。这对我们不起作用，因为我们有 100 个页面，但只有少数导入图形库或时刻等...我们不希望包含此图形库或时刻，shared.js因为它将被加载到所有页面.

3) 也不清楚如何将运行时拆分为自己的文件

SplitChunksPlugin似乎针对可以按需加载javascript的SPA。我们正在追踪的场景是否仍然受支持？

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

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

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

// main.js

// 模块A.js

// 模块B.js

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

我正在尝试通过以下方式使用 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 4 设置，我试图将我的所有 css 放入一个包中，包括 .vue 文件中的作用域 css。我正在使用 MiniCssExtractPlugin 从文件中提取 css，并使用 SplitChunksPlugin 将所有 css 捆绑到一个文件中。问题是我的 .vue 文件中的作用域 css 被放入单独的 css 文件中。

我的 webpack 配置：

输出：

我在理解 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，它将以正确的顺序动态加载其他块。那是一回事吗？

随着 webpack 4 的引入，splitChunks.name用于定义拆分块的名称。在这里，文档说可以将键映射到自定义命名的函数：

https://webpack.js.org/plugins/split-chunks-plugin/#splitchunksname

它接受参数module, chunks, cacheGroupKey. 这些参数的文档有点缺乏，但我可以使用一些直觉。即，cacheGroupKey与中定义的键有关splitChunks.cacheGroups。我认为chunks是共享公共代码的块，这些代码是cacheGroupKey块的一部分，但在任何地方都没有关于它的官方文档。

所以，我的问题是，是否有人对这三个参数所指的有任何见解？

我正在尝试使用代码拆分，这样我就可以在不复制模块的情况下对生产代码进行单元测试。我希望 webpack 能够识别出我的 *.test.ts 文件依赖于与源代码本身相同的模块，并输出包含这些共享依赖项的包。但是，webpack 只输出入口点对应的包，并没有将共享代码提取到自己的包中。

我正在为我的用例（https://webpack.js.org/guides/code-splitting#prevent-duplication）使用官方文档中提供的基本配置，但没有运气。我能看到的唯一实质性区别是我使用加载器来转译我的代码，而官方示例不是。

git 仓库

文件夹结构

网络服务器.ts

myLib.test.ts

webServer.test.ts

webpack.config.js

我希望 webpack 发出 3 个文件：webServer.js、webServer.test.js和第三个捆绑myLib. 但是，我只得到 2 个文件：webServer.js和webServer.test.js

我已经在拆分块中设置了块：“全部”。但是我的 js 已编译但未渲染。我应该在哪里包含块文件。没有 HTMLWebpackPlugin 可以实现吗？