问题标签 [webpack-splitchunks]

有没有办法将依赖模块中动态导入创建的块文件作为主应用程序中的块文件包含在内。

这是我正在尝试的 -

我有两个 npm 模块，比如 M1、M2。

M2 使用 import() 运算符动态导入 M1。在捆绑 M2 时，我使用 webpackChunkName 创建 vendor~M1.js

然后有一个静态导入 M2 的反应应用程序 A1。

在捆绑 A1 时，我使用 splitChunks 为 M2 创建 M2bundle.js

webpack.config.js 看起来像这样 -

此输出为 A1.js 创建 main.js，为 M2 模块创建 M2bundle.js，但它不包括 node_module/M2 目录中的 vendor~M1.js。

webpack 配置中有没有办法实现这一点？

感谢帮助！

我处于一种独特的情况，我需要将我的捆绑包分成单独的文件，但我没有奢侈的文件总数或这些文件的名称随着应用程序的增长和新的变化而变化已安装依赖项等。

以下配置是错误的，但我认为它最能说明我想要完成的工作。我已经阅读了所有文档，但似乎找不到任何内容。

目的是我们最终会得到以下 4 个捆绑包：

有没有办法做到这一点？

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

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

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

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

我想为生产设置一个 webpack 4 配置，它使用 html-webpack-plugin 创建多个 html 文件。同时，我想将我的供应商库提取为单独的块，并通过使用 html-webpack-plugin 手动设置哪个 html 文件使用哪个供应商块。

我刚刚开始这个项目，所以目前我唯一的供应商库是 vue.js，但随着时间的推移，它会增长。

我想通过以下配置实现的只是将 vue js 作为单个供应商库包含在我指定的所有 html 文件中：HtmlWebpackPlugin 中的块：['vendor']。

不幸的是，我的供应商捆绑包仅包含在第一个 html 文件中，之后它被忽略了。

我还发现，我无法通过以下方式控制供应商库的包含：块：['vendor'，'app']。'vendor' 只是被忽略了，可能是因为它只检查条目配置中的内容。

这里的预期行为是每个 html 文件都从输出中接收供应商及其自己的包。实际发生的情况是，只有第一个 html 文件才能获得供应商。

能够配置这样的页面会很棒：chunks: ['vue','loadash','appCompose') 并且 html-webpack-plugin 将它们注入到文件中。

我一直在研究 webpack 捆绑策略，并在这里找到了一个很好的指南：https ://hackernoon.com/the-100-correct-way-to-split-your-chunks-with-webpack-f8a9df5b7758

它似乎提倡大量单独的文件（通常）是最好的方法。我跟随并创建了一个简单的包，其中包含一个导入 flexslider 的 js 文件：

显然 flexslider 位于 node_modules 文件夹中，我的 webpack 配置设置为拆分 npm 包：

现在对于这个相当简单的场景，这里是 webpack 生成的

忽略 core 和 main ，因为它们是其他捆绑包。

homeUS 是导入 flexslider 的文件 - 就我的 HomeUS.html 而言，我是要引用所有这些 js 文件吗？或者是 webpack 内部的一些东西，我只是引用 HomeUs.js 和 flexslider.js，而这一切都只是“工作”？

我假设其中一些是 flexslider 依赖项 你可能会说我不是 webpack 专家 - 这个想法似乎是回访者只需下载单个 npm 包（如果它们已更改）而不是巨大的“供应商” ' 捆。

谢谢

我正在尝试将代码分成几块，但我遇到了一个问题。我有一个像

上面的 window.myComponent 语句正常执行，当我不使用 splitChunks 时，对象是全局可访问的。如果在 webpack 上添加以下配置

window.myComponent 语句永远不会执行，如果我检查创建的捆绑包，代码就在那里但从未执行过。为什么 ？我做错了什么？

我正在尝试使用 Webpack 4 Split Chunks Plugin 创建多个供应商捆绑包。在这种情况下，我想为 react/react-dom 创建一个块，为 react-router/react-router-dom 创建一个块。

当cacheGroups仅包含reactandvendor时，构建按预期工作。捆绑输出是：

同样，如果我只有 cacheGroupsrouter并且vendor它按预期工作。输出是：

在任何一种情况下，当创建块时，检查都会显示正确的代码react或router在它们各自的情况下。

但是......当我同时包含两者时它不起作用 - 在这种情况下，只有router块被创建，并且react代码被推送到索引（src）包中。

我怀疑正则表达式模式中有问题导致先前的缓存组失效？任何帮助表示赞赏。

这是我的 splitChunks 的 webpack 配置：

Webpack 4+ 已经optimisation开箱即用。

对我来说还有一件不清楚的事情：

重复数据删除是否跨依赖项发生？

例子：

但是也

foobar当我将两者都导入我的主包时，webpack 是否会删除依赖项？

我会说它没有，因为这些软件包已经捆绑在一起，但我找不到任何关于它的官方文档......

我有两个 Webpack 包集成到站点中。我在两个项目中都添加了块：'initial' 来优化，并且每个包都是独立的。但是，两个项目中的块似乎覆盖了全局函数，如果我同时加载两个包，这会导致诸如“n 不是函数”之类的错误。如果我切换顺序，错误可能会改变。

是否有可能在公共块中命名函数和变量？

谢谢

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