问题标签 [webpack-splitchunks]

我正在使用 webpack 4 splitchunk 导出 js 文件，我的应用程序有 4 个条目：

我想将popup和content条目打包到common1.js. 然后我像这样配置splitchunk：

但是当我运行这个配置时，显示如下错误：

我从互联网上搜索似乎没有人面临这个问题。我该怎么做才能解决它？

我的网站是一个带有 SSR 的 Angular SPA，运行良好。为了根据路径延迟加载组件，我使用了延迟加载模块。

由于我使用的库，我的 main.js 文件大约为 3MB，这增加了 pagespeed 洞察力的总阻塞时间 (TBT)。我必须将main.js分成多个文件以减少 TBT。可以捆绑文件angular-core.bundle.js, angular-material.bundle.js, and chart-js.bundle.js吗？

我听说这可以使用 splitchunksplugin来完成，但我不知道该怎么做。请帮助我实现这一目标。

我是 webpack 的新手，并且正在尝试代码拆分。我想创建多个自定义块，因此使用这样的 cacheGroups：

dom7 and ssr-window如您所见，在用于 swiper 和 fancybox 的第一个块上，我还添加了swiper's dependencies. 我想知道：有没有办法告诉 webpack 遵循所有包的依赖项？我的意思是，一种告诉 webpack '只需选择 swiper 包并将其所有依赖项自动包含在块中的方法，而无需手动指定它们'？

Browserify 可以创建一个包，但是它会随着时间的推移而增长 => 包（script.js）的加载时间会增加。因此，在这种情况下需要对包进行代码拆分（仅在需要时加载特定的部分/数据）。

我正在使用gulp.js、browserify、PHP（这也是我不使用 CRA 或 Next.js 的原因）。

CRA 可以使用React.lazy+来处理这个问题Suspense。但是我想通过使用 gulp 来创建我自己的代码分割。如何将道具传递script.js给component.about.js并渲染component.about.js？

我想将 testD 文件导出到 2 个单独的文件中。一个文件被立即调用，另一个文件被称为异步。

从我的 webpack 配置中，我的设置允许将 testD 拆分为 2 个文件。

但从下图中我看到 asyncVendors 配置被覆盖。Lodash 异步文件不应该有 asyncVendors 名称而不是 asyncCommon 名称？

网络包配置

测试A.js

testB.js

testD.js

Im trying to understand how reuseExistingChunk from SplitChunksPlugin works and i came across with this example https://github.com/webpack/webpack.js.org/issues/2122.

This example is very arbitrary and i cant figure out how the original modules created in the first place.

Can you provide me with a real example containing simple modules?

Thank you.

我正在创建一个 FireFox 插件，它使用分块将单个文件大小降低到插件中 js 文件的限制以下。这很好用，除了“初始”文件，我理解它是我指定的入口点文件。我理解这样做的原因，但希望能够以某种方式定义这些入口点文件如何拆分，以便我可以控制它们的名称。然后，我可以在我的扩展的其他地方需要添加对这些的引用。

如何控制初始文件的分块，理想情况下指定将其拆分为多少个文件以及名称是什么。或者至少有可预测的名字？

我正在使用 React 开发 WordPress 插件。我从https://github.com/robicse11127/wp-react-kickoff作为基础开始，一切正常，除了它为整个 React 应用程序生成一个包的部分。由于我的插件包含用于仪表板不同部分的多个单独的应用程序和另一个用于前端的不同应用程序，因此使用单个捆绑文件没有多大意义；我宁愿将每个部分单独捆绑并在需要的地方加载：仪表板中的仪表板应用程序、编辑帖子页面中的编辑器应用程序、公共页面上的公共应用程序等。

我尝试使用此处描述的 webpack 块，但无法使其正常工作。它实际上在我创建的专用 React 应用程序中有点工作，用于create-react-app在迁移到 WordPress 之前构建我的组件，但wp-react-kickoff似乎工作方式完全不同（没有public文件夹，没有index.html，这实际上是我想要的）而且我无法让它工作。

这是我想要的：

目前，我src/index.js用来加载我的单独应用程序（dashboard、和editor，最后一个是公共部分），所有这些应用程序都捆绑在一个由 WordPress 在管理员和前端加载的应用程序中。我怎样才能使我的不同应用程序最终成为上面的单独文件？额外的问题，我目前正在使用手动编辑的外部 CSS，我正在考虑使用相同的单独文件逻辑转移到 SASS 以与 webpack 以及 React 应用程序捆绑在一起。这可以做到吗？settingsappdist/bundle.jspublic/jsadmin/js

我从 create-react-app 的新副本开始。然后我运行了弹出，并想添加代码拆分。但是，每当我添加

该应用程序卡在正在启动开发服务器...

如果我删除chunks: all该应用程序再次开始工作。

注意：我根本没有更改任何其他内容。

1. npx create-react-app my-app --template typescript
2. cd 我的应用程序
3. npm 运行弹出
4. 编辑 webpack.config.js
5. npm 开始
6. 卡在启动开发服务器....

对于如何找出问题所在，我没有收到任何错误或任何有用的信息。它只是卡住了，有什么想法可能是错误的，或者我可以做些什么来获得更多关于问题卡住的调试信息？

webpack.config.js