问题标签 [webpack-5]

我正在开发一个 laravel reactjs 项目，当我运行该命令时npm run dev，编译停留在 95% 并给出以下错误。我检查了整个项目，没有使用区分大小写名称的文件调用所有图像都使用小写字母调用。

反应：17.0.1

网络包：5.21.2

节点：14.15.2

我正在升级到 Webpack 5，我对需要 Buffer的包 jsonwebtoken ( https://github.com/auth0/node-jsonwebtoken ) 有疑问（在https://github.com/auth0/node-jsonwebtoken/blob /master/sign.js#L91）由于 nodejs 函数不包含 Webpack 5 polyfill，并且我尝试使用signjsonwebtoken 中的函数，因此会引发以下错误：

为了解决我安装https://github.com/feross/buffer的问题

在我的 webpack 配置中我添加了

或者

我也试过

但是最后一个会产生一个 Webpack 模式错误：

尽管我进行了试验，但它无法正常工作并且错误仍然存​​在。

有人在与 Webpack 捆绑的应用程序中成功添加了 Buffer 的 polyfill 吗？任何帮助将非常感激。

最近遇到了 webpack 5 Module Federation Plugin，但我想到了，

那就是在不托管它的情况下联合模块。

这个问题的原因是因为为每个要联合的模块运行一个 webpack 开发服务器似乎在开发过程中消耗了相当多的资源。

了解我们可以将构建部署到远程服务器可能会解决问题

还有其他可能的选择吗？

使用 Webpack 5，在一个条目文件中，我有多个动态导入设置，如下所示：import(/* webpackExports: ["moduleName"] */ 'package name');每个导入都是在不同的条件下完成的。可能在页面加载时，实际上应该调用大约 5 个导入中的一个。这些导入分布在多个不同的包中。

问题是由于某种原因，Webpack 将所有这些导入设置为一个更大的块，而不是像我期望的那样单独的块。

只是为了确保没有一些交叉依赖冲突或我尝试清除导入的模块以用于测试目的实际上没有任何东西。我也尝试过使用 webpackChunkName。没有任何效果。

为什么 webpack 会制作这些块而不是多个块？我怎样才能解决这个问题？

谢谢。

我查看了迁移指南https://webpack.js.org/migrate/5/，但很难理解我需要更改什么。以下是我得到的错误

我在用

webpack v 5.x

webpack-cli 4.x

我的 webpack 文件

在 Electron-React-Typescript 应用程序中，我收到此错误：

Automatic publicPath is not supported in this browser

package.json 中的 devDependencies ：

按照此处的指示：此浏览器不支持 Webpack5 Automatic publicPath

webpack.rules.config.js ：

我尝试将 publicPath 设置为空并填充 outputPath 的值。还删除了 mini-css-extract-plugin。但这些都不起作用。

有什么建议么？

剧透：我倾向于 Webpack 问题而不是 React（因为使用普通的 React 应用程序，直接形式的create-react-app东西可以工作）。但是，它只发生在 React...

主要问题是一个简单的事件（例如onClick，永远不会被执行），这延伸到不使用 js（手风琴、复杂的导航行为等）。所以以下不起作用：

使用库的组件时也不会这样做，Button例如react-bootstrapor semantic-ui-react（在两者中都经过测试）。

webpack 配置如下所示：

package.json是：

您可以在此处的代码和框中找到最小的示例。只需单击按钮并查看没有显示警报。此外，还有一些Accordion组件的注释代码，这显然是行不通的。

我想知道...关于为什么会发生这种情况的任何提示？我的一些想法是函数的绑定，代码的注入（但alert出现在bundle.js文件中）......提前致谢！

[编辑] 解决方案

删除主 html 中的捆绑包。由于它是自动添加的，因此被添加了两次并导致问题。

我正在开发一个动态仪表板的架构，其中使用 webpack 5 模块联合从不同的远程反应包中提取组件。我确实有一些在这些远程包中共享的不同库。这些包是可摇树的。因此，每个远程包将具有来自同一包的不同代码。如果我将这些包作为单例共享，当两个具有相同依赖关系的组件在运行时加载到 DOM 时，webpack 是否可以从两个包合并中获取 lib 代码？或者我们是否有必要在此类共享库中禁用摇树？（通过共享库我指的是 npm 包）

错误来自 webpack-spritesmith 插件生成的 LESS 文件：

出于某种原因，该spritesheet-sprites变量似乎是在没有值的情况下定义的。在我将 Webpack 版本从 1.13 升级到 5.22（连同它的加载器）后，我遇到了这个错误。我尝试降级一些依赖项，例如 less、less-loader 和 webpack-spritesmith 插件本身，但似乎没有用。还检查了较新版本的 Webpack 及其加载器是否以不同的方式处理路径，没有结果。

我按照他们的官方文档编写了配置（用于 webpack 和插件），一切似乎都已到位，但通过在线检查资源，我找不到我的配置是否错误或包中是否存在不匹配的版本。

我的 webpack 配置：

包.json：

我正试图让我相当复杂的单体应用程序与模块联盟一起工作。我的 webpack 配置看起来像这样

在微前端方面共享是相同的。当我尝试运行应用程序时，我得到：

错误：共享单例模块 @angular/common 的 11.2.1 版本不满意（需要 ^7.2.0）

在此之前，我收到了类似的错误消息，但针对 angular/core。我通过重新运行纱线并根据不同的角度/核心版本修复库产生的所有警告来解决这个问题。

但是由于 fpr angular/common 错误，我被卡住了。我不知道如何找出哪个库可能会产生该错误。