问题标签 [commonschunkplugin]

我正在构建一个组件库，我正在使用 Webpack 来捆绑它。有些组件只依赖于我编写的 html 模板、css 和 JavaScript，但有些组件需要外部库。

如果您要使用的组件需要它，我想要实现的vendor.js是可选的。

例如，如果用户只需要一个不依赖于供应商的组件，那么他们使用main.bundle.js只包含我自己的代码就足够了。

在我的index.js中，我有以下导入：

所有这些进口都是我自己的，期待bootstrap-table.

我已经像这样配置了 Webpack：

这会产生两个.js文件和一个.css. 但是，webpacks 常见的模块加载功能位于 中vendor.js，如果我不首先包含供应商，这会使我的 main 无法使用，并且并不总是需要它。

总而言之，如果用户只需要页脚（没有外部依赖项），这就足够了：
<script src="main.bundle.js"></script>

如果用户想要使用具有外部依赖关系的表，则需要同时包含以下内容：
<script src="vendor.js"></script>
<script src="main.bundle.js"></script>

现在，包括只main.bundle.js给我这个错误：
Uncaught ReferenceError: webpackJsonp is not defined.

我知道我可以通过在 Webpack 配置中创建供应商块后添加它来提取所有常见功能：

但是这种方法仍然需要用户包含两个.js文件。

我怎样才能实现这一目标？当我不像上面那样提取公共模块时，它似乎只有 2 kb 的差异，这对我来说很好。

不确定这是错误还是我的设置，我正在使用 CommonsChunkPlugin 为我的项目中的三个入口点获取单独的 common.js，并使用 extract-text-webpack-plugin 获取 css 文件。我的入口点是应用程序、登录和注册。我能够得到：

对于 CSS：

我似乎无法生成 common.css。所有的 css 都被塞进一个 app.css 文件中。

我的项目是基于 vuetify webpack 模板设置的： https ://github.com/vuetifyjs/webpack-advanced

这是我的配置：

3个入口点：

插件 - 每个入口点都有 HtmlWebpackPlugin（仅显示一个）：

常见的块：

完整配置：

任何帮助表示赞赏！

我有一个使用 webpack2 构建的 react 项目，但是构建的块文件都过大了，总大小超过了 10M！这是我的配置和日志输出的一部分。

我的一些组件块大小几乎是 1M ！！！

我有一个使用代码拆分的 webpack 构建的应用程序。我现在想将node_modules所有条目块和所有子块（通过代码拆分生成）中匹配特定条件（在本例中）的所有通用模块聚合到一个单独的通用块中。

如果我这样做：

Webpack 会将与minChunks函数匹配的所有模块聚合到一个单独的公共块中，但仅适用于子块中的模块——它不会将入口块中的模块聚合到公共块中。结果，我的条目块和公共块中都出现了重复的模块。

这怎么可能？

示例：https ://github.com/OliverJAsh/webpack-commons-vendor/blob/f524bfdb0e047161c453a6b84f89ab6d25d6c648/webpack.config.js

我正在构建一个多页应用程序并使用 webpack 来捆绑我的客户端 javascript。

我有以下内容：

webpack.config.js

page1.html

page1.js

和page2.html和page2.js一样......

这工作得很好

我想优化整个加载时间，并选择我的脚本的异步加载策略，但也要保持我的公共代码拆分以尽可能多地利用浏览器缓存。

理想情况下，我希望配置CommonsChunkPlugin能够做到这一点：

...让插件执行以下操作：

• 将 webpack 代码提取到一个我可以同步需要的小文件中（我将添加到一个<script>.
• 提取公共代码，从 webpack 中捆绑，@babel/polyfill但也从 node_module 或本地（我将添加到 async ）中的required 模块typed./myLib.js<script async>
• 提取特定于条目的代码（通过webPackJsonp要求前一个异步）

这在一个简单的动作中可能吗？

我是否正确，这就是我应该这样做的方式？

我一直在玩async,children和东西，但我无法让它工作

我已经成功地让 Webpack 和 CommonsChunkPlugin 将我的代码分成两部分 - 一个包含我的代码库，一个包含从 node_modules 导入的所有内容。那是相对容易的一点。

我试图在我的应用程序中实现的下一件事是动态导入一个“子应用程序”，它具有完全不同的供应商包要求（例如 React - 我的主应用程序不使用它，但我的子应用程序使用它） ，所有这些包都没有出现在主供应商文件中。

如果我添加了 import()，但我的 Webpack 配置相对保持不变，我最终会得到 4 个包

1. Webpack 运行时
2. 主应用程序代码库
3. 供应商捆绑包含在主应用程序代码库中导入的所有内容
4. 动态导入的包，也包含所有导入的 node_modules :(

这是不可取的。我也希望从我的子应用程序的主代码库中获得“我的代码与供应商代码”的相同好处。理想情况下，我最终会得到 5 个捆绑包，上面列表中的 #4 分为两个。当动态导入在运行时发生时，它会以某种方式神奇地加载到我的子应用程序代码包和随附的子应用程序供应商包中。理想情况下，子供应商捆绑包不包含主供应商捆绑包中存在的任何内容。

在尝试了我在各种博客文章中找到的很多东西之后，我遇到了一种情况，我手动选择了我想包含在单独的供应商包中的 node_modules 目录，但问题是它不会包含他们的自动依赖，所以我的子应用程序包中仍然会有很多 node_modules - 我没有专门导入的那些。

如果我能让它正常工作，那么我想将它复制到我的主应用程序的更多子应用程序中。

更新 1

我的 Webpack 配置分为 3 个文件 - common、dev 和 prod。只有 common 和 dev 与此相关，所以我将在这里分享它们。

webpack.common.js

webpack.dev.js

更新 2

我偶然发现了一个似乎有效的配置。它甚至在实际导入的同时自动加载到子应用的供应商块中。

我有一个 SPA，我想为其拆分非关键代码并在加载关键文件后立即异步加载它，但作为单个文件。

为此，我import('./module-name')将其用作代码拆分点。

问题是，在结果输出中，我有多个文件：

我尝试使用CommonsChunkPlugin此配置：

并得到了这个结果：

虽然aws-sdk不再被复制很好，但我们仍然在输出中看到多个文件。

同样，我的目标是拥有一个包含关键代码 (app.js) 的文件和一个包含所有已拆分代码 (0.js) 的文件

在上面的配置中，我想从 CommonsChunkPlugin 中排除 page1，因为 page1 没有任何公共模块。所以在 page1 中，我只包含了 page1.js，它会引发以下错误。

请帮助我。

我运行的命令：

这是我得到的结果。什么chunks意思？为什么它们有时会改变？如果我理解正确，那么块越多越好。

但我看不到相同数量的文件。如果我在每个入口点都有 0-1-2 个块，那么块的文件在哪里？我只有入口点

许多

单身的

我的 WP 配置：

WP GitHub https://github.com/webpack/webpack/issues/6387

插件选项中的这两个字段有什么区别？

它们是如何相互关联的？哪个先执行，哪个一秒？如何使用这些选项从块信息中选择一个单独的文件中的包？

chunks: string[]下面突出显示的文本对选项意味着什么？在这种情况下如何阅读child？

// 按块名称选择源块。该块必须是公共块的子块。 // 如果省略，则选择所有条目块。

Webpack 尤其是它的拆分特性是非常不友好的，很难理解和使用。