问题标签 [webpack-plugin]

我刚刚开始尝试弄清楚如何使用 webpack.config.js 引用一些外部库。我需要在 Angular 8 应用程序中引用 SharePoint 库 SP.js、SP.Runtime.js 和 SP.Taxonomy.js。SP 脚本调用 Type.RegisterNamespace。“类型”是 MicrosoftAjax.js 中的一个类。我想了解如何将所有这些添加为插件，以便在 Angular 中编译并运行良好。如果我能做到这一点，它将打开一个完全独立的 Angular 应用程序可以用来直接与 SharePoint 对话的所有 SP 远程处理调用（基本上是 REST）。

我将脚本引用添加到我的 angular.json 文件中，但这还不足以让一切正常工作。此外，MicrosoftAjax.js 需要在 SP.js 文件开始运行之前加载和初始化。如果这在 Angular 8/9 中是可能的（召集所有 Angular 大师！）我会非常激动。

我使用@pnp/sp 库来完成我需要做的大部分事情，但该库不支持与 100% 的 SharePoint 环境交互。这是我真正需要使用的 SP.Taxonomy 命名空间，但如果没有 MicrosotAjax 库，我认为我无法让这些库正常运行。

在添加插件之前，一切正常，没有任何错误（优化器、最小化器等）。然后，我安装了 html-critical-webpack-plugin 以便在 html 中内联关键 css 并延迟非关键 css，终端中也没有错误。但是，输出是一个完全独立的 html 文件，仅包含关键/非关键 css，没有任何 index.js 导入。

有谁知道如何将此插件与其余设置结合使用？

webpack.prod.js

index.js

是否可以读取安装了我的 Webpack 插件的 repo 的内容？

本质上，我编写了一个特定的JS 库，它要求调用者在其应用程序代码中使用require.context在构建时读取一些文件并将它们传递给库：

我想减轻用户的负担，只需require.context在库中进行调用以将 API 简化为：

但是，它不起作用，因为库不知道应用程序代码的 Webpack 构建何时运行。

我尝试在库中编写一个 Webpack 插件：

但是，这只在构建库本身时调用，而不是在构建应用程序时调用。

如何将require.context调用移动到库中（这是 NPM 依赖项）并仍然让它读取调用者的文件？

就像这样，使用 DefinePluginECZN为我的应用程序定义全局变量webpack runtimeValue。

并且... WebpackModuleInfo 实际上来自我引用的文件ECZN，但我只是获取模块文件路径，而不是Entry...

那么，我可以获取 runtimeValue 上下文的条目信息，以便var value为我的多 html 页面应用程序设置不同的值吗？

文字代码：

我找到了一些解决方案：

1. 使应用程序具有多个 webpack 配置以创建多个实例，如下所示：https ://github.com/webpack/webpack/issues/5546 （性能警告）
2. 只需使用moduleResourceas 参考来定义var Eczn（并不精确）

我想根据生成的资产生成一个页面。所以我创建了一个 Webpack 插件。

它可以工作，但不会生成新资产index.html。日志的输出是：

我从官方教程中获取了大部分内容：https ://webpack.js.org/contribute/writing-a-plugin/#example

我的最后一个问题：为什么index.html不发出？

在升级我维护的插件以同时支持 Webpack 4 和 5 时，我遇到了下面的砖墙，我根本找不到任何信息，而且Gitter上的任何人似乎都无法提供帮助。

该插件添加了一个可以正常工作的资产（SVG spritemap）compilation.assets。插件中有一个功能允许用户保留创建的块，这是与其他一些插件互操作所需的。Webpack 4 的最小工作代码是这样的（我总是觉得有点 hacky，但它确实有效 ‍♂️）：

对 Webpack 5 使用相同的方法会引发以下错误：

它还显示了一个弃​​用警告Chunk.addModule，我可以compilation.chunkGraph.connectChunkAndModule(chunk, module);改用它来修复它，但这（显然）并没有消除代码生成条目错误。

我正在使用带有“clean-webpack-plugin”的最新版本的 webpack 5.3.2：“^3.0.0”。显然插件在我构建时不会清理 dist 文件夹。

这是我的 webpack 信息：

这是我的 webpack 配置：

即使我启用详细选项，我也看不到任何日志并且插件也没有清理。

我正在尝试将svg-chunk-webpack-pluginwebpack v4 更新到 v5。该插件使用了编译对象，并且需要一个按入口点过滤的文件依赖项的平面列表，以提取每个入口点的所有 SVG。

具有入口点的嵌套依赖树示例app-a

使用webpackv4，以下代码可以工作并返回每个入口点使用的所有 SVG 文件的数组

使用webpackv5，我尝试了以下代码，这些代码在开发和生产构建之间产生了不同的结果。

正在开发中

在生产中

在生产版本中找不到嵌套依赖项

使用需要转换每个文件的源代码并根据所有这些文件中的数据发出单个文件的 Webpack 加载器。查看 webpack 文档，我不太确定加载器是否可以/应该处理这样的事情，或者 webpack 插件是否更适合我的用例。

我this.emitFile在 webpack 加载器的 api 文档中看到，所以我想我可以this.data在加载器的音高阶段从对象中的每个文件收集数据，并在最终音高上发出文件。这感觉像是一种黑客行为。

有没有更好的方法来使用 webpack 加载器或者我应该创建一个 webpack 插件来代替？