问题标签 [webpack-5]

我有一个弹出的 create-react-app 项目。将其更新到 webpack 5 后出现此错误。它在 webpack v4.41.5 上运行良好

操作系统：MacOS Catalina 10.15.7
节点：v10.23.0

错误：不应从默认导出模块导入命名导出“版本”（导入为“版本”）（仅默认导出很快可用）。

我正在尝试按照这个示例Module federation with angular 使用webpack5 模块联合以 Angular 实现微前端概念，但我遇到了这个错误

我尝试了这个答案中提供的解决方案inject() must be called from an injection context但它不起作用。

目前我在两个应用程序中都使用 Angular 版本 11。

正在导入的应用的 package.json（子）

应用程序的 package.json 导入另一个应用程序（父）

我有几个 webpack 5.9 构建警告，这让我难以解决。

我已经尽我所能在网上进行了研究，但无济于事。我确实找到了这个：

Webpack 5 发布文档：Arrays to Sets

但是，除了我理解这些概念外，我不知道如何更改我的配置设置来解决这个问题。如何将事物切换为“使用新的 ChunkGraph API”也是如此。

任何帮助表示赞赏。

（节点：90180）[DEP_WEBPACK_DEPRECATION_ARRAY_TO_SET] DeprecationWarning：chunk.files 已从 Array 更改为 Set（不推荐使用 Array 方法“includes”）（node --trace-deprecation ...用于显示警告的创建位置）（节点：90180）[DEP_WEBPACK_CHUNK_MODULES_ITERABLE] DeprecationWarning：Chunk .modulesIterable：使用新的 ChunkGraph API

更新：

我通过使用发现：

这两个弃用警告仅在使用 purge-css-webpack-plugin 时出现。我正在使用它（我从以下内容中了解到：https ://survivejs.com/webpack/styling/eliminating-unused-css/ ）：

仍然不确定如何解决警告，但至少越来越近了。此外，正在考虑删除未使用的 CSS 的其他选项......

最近更新

对于@Ashish 和我读过这篇文章的其他人：我确实解决了这个问题。但是，我必须为我在做 b/c 时没有更新这个主题而道歉，现在我不记得我是怎么做的了。我相信我将 package.json 中的一些包更新为最新的。另外，我目前使用 purge css webpack 插件，如下所示：

我的文件：

page1.js

page2.js

page3.js

我得到什么：

我想要的是：

Webpack 5配置：

我需要它来轻松地将所有相关文件添加到我的 .NET MVC 页面中的脚本标记中。

<script type="text/javascript" asp-src-include="~/dist/*page1_*.js"></script>

除非有另一种解决方案，只在页面的 script 标签中添加一个 js 文件。我真的不喜欢使用HtmlWebpackPlugin和处理模板文件，而不是直接使用.cshtml文件。

<script type="text/javascript" src="~/page1.js"></script>

因为每个页面的入口文件将保持不变，而块文件将不断更改名称和数量 - 不断。

我正在尝试升级到 yarn 2，但在“使用”基于数组的加载器和正确解析方面遇到了一些障碍。

这是之前工作的 webpack 配置的摘录。

运行yarn dlx @yarnpkg/doctor返回以下错误消息。

第 33 行第 14 列是“使用”键的左括号字符。

当我将加载器字符串包装在 a 中时require.resolve(...)，从 yarn doctor 命令中得到了相同的错误。

有谁知道为什么这里有问题解决？根据 webpack 的文档，这应该完全没问题，但我不确定哪个工具在这里遇到了困难。

https://webpack.js.org/configuration/module/#ruleuse

环境：OSX：10.15.7 (19H15) - Catalina

节点-v：v15.3.0

纱线--版本：2.4.0

网络包：~5.9.0

我在协调 i18n 语言环境的动态导入路径时遇到了一些麻烦。这是相关代码 -

我的目标是在单个 npm 包中管理所有相关的翻译，在构建时处理所有动态导入设置，然后消费者可以getTranslation在他们各自的应用程序中调用 getter（在这种情况下）以获取语言和命名空间他们选择在运行时获取有效负载。

基于这个 GH 线程，我想dist通过package.json

例如，当我基于该exports配置发布包时，消费者将知道如何在调用 getter 时协调路径，无论是相对路径还是包名称前缀

由于一切都是动态的，我使用CopyWebpackPlugin将语言环境包含在dist文件夹中。

这在本地按预期工作，但是当我创建 时dist，我得到了错误Error: Module not found ./relative/path/to/the/json/I/want.json。

我的问题：

我错过了什么？有没有一种简单的方法来公开这些翻译，以便其他应用程序可以通过 npm 安装的包将它们包含在它们的包中？

这是我的 Webpack 配置，很高兴根据需要提供其他信息

我在将 cypress-dark（主题）插件添加到 Yarn 2 工作区的“测试”包的上下文中遇到了这个问题，但我认为这个问题很普遍。为了更好地说明原始问题，我想我需要知道的是：如何获得 Webpack 的 resolve.fallback 选项来使用 PnPWebpackPlugin？

为了将 Webpack 5 与 Cypress 一起使用，我一直在使用 cypress-webpack-preprocessor-v5。在 support/index.ts 中导入 cypress-dark 后，运行规范会在浏览器中产生以下错误：

因此，我补充说

到我的 plugins/index.ts 如下：

然后运行规范会产生以下错误：

Webpack 应该在来自 /.yarn/cache/cypress-dark-npm-1.7.14-295ea64c64-9b608eccac.zip 的 Yarn 2 虚拟包中寻找 dark.css，而不是在“test”包的根目录中（我正在运行赛普拉斯的工作区）。所以看起来像

在 webpackOptions 中回退到不了解 PnPWebpackPlugin 的解决方案。这就是我卡住的地方。任何指导将不胜感激:)

我想知道将路由从app_02导入到shell 应用程序app_01的最佳方法是什么。一种方法可能是添加子路由，但我想知道是否有另一种方法可以做到这一点，这样我们就可以做到这一点，这样我们就不必再次将组件导入 shell 应用程序。这样做的主要目的是能够将具有内部路由的不同包从数据库中的配置导入到 shell 中。

我正在尝试使用 webpack（v 5.6.0）将一些 JavaScript 捆绑到一个 ESM（又名 ES6 模块，ECMAScript 模块）中，它不能自行运行，而是可以用作另一个应用程序的库。我希望其他应用程序可以选择简单地包含这个库，<script src="..." type="module">而不必有自己的构建步骤并担心依赖关系。

在库的项目中，我已添加"type": "module"到 mypackage.json以使其知道它是 ESM，并且我有一个src文件夹，其中包含一个index.js和一个dist用于 webpack 输出的文件夹。

我的webpack.config.cjs文件看起来像：

我的简化版本index.js是：

最终这里会有实际的代码、许多不同的文件、依赖项等。

当我运行 webpack 时，会index.bundle.min.js创建一个文件，但它是完全空白的。对于这个简单的示例，我希望它看起来非常像源文件。似乎 Webpack 正在丢弃未运行的代码，这在某些情况下可能是有用的优化，但这不是我想要的。

如果我添加hello();到我的index.jsthen 我确实在我的构建文件中得到了一些代码，但我不想运行任何代码，并且它仍然没有像我想要的那样公开这些方法以供以后使用。

我正在设置 Webpack 5，目前正在配置静态图像的资产管理，我想将这些图像从我的 src 文件夹复制到我的 dist 文件夹。我想保留我的 /img 文件夹的文件结构，因为它复制到 dist 文件夹，但我遇到的问题是我试图删除部分路径占位符。我想要实现的目标是可能的吗？

我的规则如下：

但是，当文件被复制时，因为我将 [path] 占位符作为名称的一部分，所以文件将类似于 /src/img/[name].[extension]?[hash]。我想保持路径的其余部分完好无损，因为某些图像具有 /src/img/favicons/[name].[extension]?[hash] 之类的路径，我觉得 dist 文件夹应该保持这种结构。最终目标是让上面提到的 2 个文件在此路径中不包含文件名的 /src 部分。