问题标签 [webpack-5]

似乎在 webpack 中找不到任何调试选项或插件来显示块中的确切内容。

为什么我需要这个？我注意到代码拆分实际上使所有内容都变得更大然后只是将所有内容粘贴在单个文件中的情况。这有点违反直觉，因为我不相信 webpack 的引导代码有那么重要；我怀疑这可能是缩小/重复数据删除，但是在不知道哪些模块实际上被分块在一起的情况下，很难进行一些孤立的测试来确认。

我的构建过程使用 gulp；如果这有什么不同的话。

从 Webpack 4 迁移到 Webpack 5 时，使用devtool空值时出现错误（仅在生产模式下）。

控制台中的消息：

任何想法如何在生产模式下避免源映射？在那里输入什么？

使用 Webpack，有可能避免重复代码。此功能已存在很长时间，SplitChunksPlugin甚至在此之前CommonsChunkPlugin（已弃用）。

查看防止重复部分中的 Webpack 5 文档，添加了一个名为的新选项dependOn。此选项允许在块之间共享模块。

但是，仍然有选择splitChunksPlugin，我想知道两者之间有什么区别？

我正在尝试将弹出的 create-react-app 迁移到 Webpack 5 并遇到此错误：

我认为错误来自output.path默认情况下 CRA 在开发中未定义，我试图将其设置为空字符串 - 或绝对路径，但无法解决。我已经能够成功地让 Webpack 5 在非 cra 应用程序上工作，而路径未定义，所以我认为它与 CRA 配置有关。我也按照本指南没有成功https://webpack.js.org/migrate/5/

代码沙箱：https ://codesandbox.io/s/musing-buck-shu04

感谢任何帮助！

背景

我刚刚将一个项目从 Webpack 4 升级到 Webpack 5。在新版本中，似乎任何性能提示（警告）都会使 Webpack CLI在退出进程时返回非零错误代码 1 。

这破坏了我npm run --silent用来执行 webpack 脚本的生产版本。

解决方法

如果我删除配置文件中的性能提示，则不会返回错误代码。

问题

在 Webpack 4 中，这些提示没有返回任何错误代码。

如何在 Webpack 5 中启用性能提示作为警告 - 而不会获得非零退出代码？

使用 webpack 5 设置一个简单的中间人应用程序，但得到这个无效的配置对象错误：

此处列出的devtool 选项似乎都没有给出除上述错误之外的任何其他错误，也没有遗漏 devtool 或明确将其设为 false。

这是我使用 webpack 4 的设置，但如果能深入了解什么可以解除无效配置错误，我将不胜感激。

我的 package.json

我的 webpack.config.js

我的 config.rb 与 webpack 相关

升级到 webpack 5 后，无法通过 SourceMapDevToolPlugin 排除 vendor.js 文件进行源映射。

SourceMapDevToolPlugin 排除我迄今为止尝试过的配置：

github 问题链接提到了 UglifyJsPlugin的问题，但我们没有使用它，所以我排除了它。

虽然如果我设置config.devtool为false，则SourceDevToolPlugin配置有效。

我的配置有问题吗？

更新：我想我现在明白了。看起来我真的必须根据这个例子将 devtool 设置为 false：https ://webpack.js.org/plugins/source-map-dev-tool-plugin/#basic-use-case

由于这个注释，我只是认为devtool应该只设置为开发模式：false

如果您想在开发模式下为此插件使用自定义配置，请确保禁用默认配置。即设置devtool：假。

我对吗？

更新1：是的！看起来我是对的。我应该阅读关于 github 问题的其他评论：https ://github.com/webpack/webpack/issues/2431#issuecomment-245547872 抱歉浪费了任何人的时间。

我在 React JS 中使用 webpack。这是我的错误，

错误中的错误：/Users/prakash/Desktop/projects/limitscale/goal.ly/goaly-react/src:58758 var theme = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)')。匹配 ^ ReferenceError: 未定义窗口

• src:58758 Object../node_modules/react-axe/dist/index.js /Users/prakash/Desktop/projects/limitscale/goal.ly/goaly-react/src:58758:13

• src:113496 webpack_require /Users/prakash/Desktop/projects/limitscale/goal.ly/goaly-react/src:113496:42

• src:38954 模块../node_modules/html-webpack-plugin/lib/loader.js!./src/index.js /Users/prakash/Desktop/projects/limitscale/goal.ly/goaly-react/src:38954 :13

• src:113496 webpack_require /Users/prakash/Desktop/projects/limitscale/goal.ly/goaly-react/src:113496:42

• src:113646 /Users/prakash/Desktop/projects/limitscale/goal.ly/goaly-react/src:113646:18

• src:113647 /Users/prakash/Desktop/projects/limitscale/goal.ly/goaly-react/src:113647:12

• index.js:321 HtmlWebpackPlugin.evaluateCompilationResult [goaly-react]/[html-webpack-plugin]/index.js:321:28

• index.js:237 [goaly-react]/[html-webpack-plugin]/index.js:237:22

• task_queues.js:93 processTicksAndRejections internal/process/task_queues.js:93:5

和我的 webpack 配置文件，

我应该怎么做才能避免这个错误？有一段时间面对这个问题。想不通。我的代码有什么错误吗？ webpack 的新手。

我是external-svg-sprite-loader的维护者，我注意到将它与 webpack 5 一起使用时，我收到以下警告：

构建通过，但我希望能够修复此弃用警告。但是，我找不到任何关于modulesIterableChunkGraph API 的文档。我应该在哪里寻找它，这个问题的潜在解决方案是什么？

我正在使用单水疗中心来创建我的应用程序。我在加载微前端app的时候，没有使用SystemJS，如下：

所以，我libraryTarget:'window' 在 app1 的 webpack 配置中使用。

当我使用 webpack4 时它工作正常。

但是当我将 webpack 更新到 webpack-5 时，似乎出现了问题，webpack 生成的输出代码无法为 window 对象设置正确的值。

webpack-4： 在 webpack-4 上运行良好

webpack-5： 对象中没有任何内容

这是 webpack-5 的问题吗？