问题标签 [commonschunkplugin]

我一直在遵循使 Webpack 与 React.NET 一起工作的指南（位于https://reactjs.net/guides/webpack.html），我的要求之一是将第三方库放在一个单独的包中。为此，我使用了位于https://webpack.js.org/guides/code-splitting-libraries/的 CommonsChunkPlugin 。

尝试使用客户端渲染进行此设置似乎可以正常工作，但仍然无法弄清楚如何为服务器端渲染做同样的事情。我总是会看到错误Error while loading "~/Scripts/build/bundle.js": ReferenceError: webpackJsonp is not defined。

我对这个 Webpack 世界还很陌生，但设法意识到该webpackJsonp变量是在window级别注册的，我猜服务器端渲染引擎无法访问。是这样吗？这个问题有什么解决方法吗？

提前非常感谢！

想象一下，我有一个丰富的应用程序，它使用了很多 3rd 方模块，包括lodash、moment、axios、react。

如果我最后将所有内容捆绑在一个捆绑包中，则大小将高于 1MB。

我希望 webpack 以它存储的方式打包我的库：

1. 分开写
2. 分别的时刻
3. 所有其他node_modules都存储在供应商捆绑包下
4. 应用程序的代码存储在单独的文件中

我尝试以不同的方式使用CommonsChunkPlugin，但从未收到我想要的结果。

我准备了示例存储库来说明我的问题： https ://github.com/PavelPolyakov/webpack-react-bundles

Webpack 入口部分（conf/webpack.base.config.js）：

这是生产配置（conf/webpack.production.config.js），试图分离模块：

在这种情况下，moment 和 lodash 仍然会出现在 vendor bundle 中。我想把它们放在两个单独的包中。

任何想法表示赞赏。

我已经按照一些指南来设置 CommonsChunkPlugin，但它似乎不起作用。我也在这里搜索并阅读了其他帖子，但没有运气。

我有三个文件（TypeScript），它们正在导入一些相同的库（fancybox、moment 和 pikaday）。它们是使用 ES 模块语法导入的：

Mytsconfig.json设置为输出 ES6 语法和模块：

我的webpack.config.js：

据我所见，应该找到任何使用过两次或更多（共有三个）的块并将其移入，commons-bundle.js但是当我运行webpack并查看输出文件时，我可以看到 pikaday、moment 和 fancybox 都是被包含在每个文件中，而不是被移动到commons-bundle.js

任何帮助将非常感激。

我的应用程序如何拆分成块

我的应用程序主要且唯一的入口块包含一些在整个应用程序中重用的通用逻辑，例如布局或辅助方法以及与身份验证相关的组件，例如登录/注册对话框。这个块在其依赖树的目录中具有react、react-dom、和其他一些库，redux因为它们正在被身份验证组件使用。react-routernode_modules

所有这些依赖项都捆绑到一个app.js始终初始加载的文件中。每当用户开始使用需要登录用户的应用程序的某些部分时——例如仪表板、表单和其他应用程序功能，就会加载包含该功能的附加 javascript 块。webpack由于import()分布在整个应用程序代码中的调用，这些额外的块是自动生成的。

当新用户加载应用程序但未登录时，app.js将加载该应用程序并为用户提供登录掩码。用户成功登录并重定向到主仪表板后，仪表板的代码将异步加载。该代码由 自动构建到dashboard.js块中webpack，还依赖于许多已经嵌入到app.js块中的库（例如react等react-dom）。因为该dashboard.js块不复制那些库，所以与app.js.

为了充分利用浏览器缓存，所有这些块（在这个简化的示例中：入口块app.js和动态块dashboard.js） [chunkhash]的名称中都有一个。与来自 的库代码相比，node_modules动态块的代码和app.js实际应用程序代码的部分都发生了很大变化。

我想做什么

我想以webpack一种方式进行配置，以检测哪些库 node_modules在超过 2 个（或任何可配置数量）的块中使用，并自动将它们拆分为一个额外的块，vendor.js.

app.js该块应包含当前不经常更改的库部分，因此用户不会经常重新下载库代码。

据我了解， CommonsChunkPlugin在手动添加大量条目块时可以完成类似的操作。我也可以通过import()调用执行的动态代码拆分来做到这一点吗？

例子

我可能会lodash.partialRight在dashboard.js. 只要它只在那里使用，我希望它与dashboard.js. 当我还在登录/注册过程中使用它时，它不应该像 app.js现在这样捆绑，而是应该自动捆绑到vendor.js跨块重用的其他库中。

简洁版本

当我在 IE11 中运行我的应用程序时，我Promise is undefined在 manifest.js 文件中收到一条错误消息。

我如何添加babel-polyfill或类似的东西，使其在清单执行之前运行？

长版

我正在尝试将 CommonsChunkPlugin 添加到我的 webpack 配置中，以便将第三方（npm 包）脚本拆分为单独的包。根据 Webpack 2 文档，我设置了“组合隐式通用供应商块和清单文件”，这在现代浏览器中运行良好。

我编写了一个函数来确保这些块以正确的顺序包含在我的索引文件中（见下文）。

关于我的两个显式入口点的一些背景知识：

• legacy_libs - 放置在全局命名空间中的旧库，带有script-loader. 我希望随着时间的推移逐步淘汰这些
• main - 我的主要应用程序入口点

其他两个（供应商和清单）是隐式的，由 CommonsChunkPlugin 创建。

当我用 IE11 运行它时，我得到一个错误：Promise is undefined. 这似乎是因为 webpack 清单本身正在调用new Promise().

在我的主要入口点，我有import 'babel-polyfill';. 在我添加供应商和清单分块之前，这让我能够克服 IE 缺乏 Promise 的问题。但是现在我首先加载了 manifest.js，我不知道如何以正确的顺序包含它。

我的配置如下所示：

对象的构造

我想将“vue”提取到一个块，将“jquery”提取到一个块以及与“vue”相关的东西，例如“vuex”、“vue-router”到另一个块。CommonChunkPlugin 应该怎么做？

这些代码是我的配置，它将 vue 和 jquery 与其他代码结合在一起

非常感谢！

我正在使用CommonsChunkPlugin拆分我的供应商捆绑包。我还必须ExtractTextPlugin将 CSS 提取到一个文件中。但是，出于某种原因，我也得到vendor.css了。

这是我的 webpack 配置：

我按照文档进行了所有操作，但无法弄清楚配置中有什么问题？我正在使用webpack 2和extract-text-webpack-plugin: 2.1.0

webpack 的输出看起来像这样，它vendor.css在输出中是不期望的。

我试图用 webpack 实现的是为稳定的依赖关系（反应等）提供 1 个核心供应商捆绑包，为其他员工提供更多供应商捆绑包。

我可以通过 minChunks 过滤创建一个巨大的供应商捆绑包。

```

```

但是当涉及到使用相同策略（通过 minChunks 过滤模块）创建多个供应商包时，webpack 要么跨包重复 deps 要么 throws While running in normal mode it's not allowed to use a non-entry chunk。

我知道可以列出条目中的所有 deps 并用于所有这些，minChunks: Infinity但是仍然有一些来自 node_modules 的库出现在应用程序代码中。

至少知道如何从应用程序条目中排除模块会非常有用

我正在通过CommonsChunkPlugin. 当我构建两次时，我希望供应商块保持不变，但它会改变:(

复制步骤：

1. 克隆https://github.com/mattcolman/webpack-vendor-chunk-test
2. 运行yarn，然后yarn analyzeBundle，然后yarn analyzeBundle再运行。
3. 请注意，供应商块哈希已更改。

两个捆绑包之间的差异表明TIME_STAMP我通过 提供的DefinePlugin最终在供应商块中，但是此代码始终位于检查 的代码块内"development" === 'test'，因此我原以为此代码会在生产中被删除。

我实际上希望注入的代码TIME_STAMP最终会出现在应用程序包中，这很好，但事实并非如此。

任何帮助，将不胜感激！提前致谢！

我有类似于官方文档的代码拆分配置， 并且一切正常 - 我的所有节点模块都在“供应商”块中（包括“babel-polyfill”）。但是现在我需要移动 babel-polyfill 和它的所有依赖项来分离块（“polyfills”），以便能够在我的供应商包之前加载它。任何想法如何做到这一点？

我的配置：