问题标签 [webpack-5]

我必须将我的 webpack 从 3 更新到 5，并且我有一个弹出的 CRA，并且在升级我的 webpack 后，我收到“无效配置对象。Webpack 已使用与 API 架构不匹配的配置对象进行初始化”的错误。下面是我来自 webpack.dev.config.js 的代码

任何人都可以帮助我进行配置并且无法找出解决方案。任何帮助或建议将不胜感激。

我最近刚决定尝试升级到 webpack 5 和 babel/polfill，因为我的 react 项目已弃用它，这导致了各种问题的开始。在我升级任何东西之前，一切都运行良好

这是我得到的错误

./src/index.js 中的错误 23:4 模块解析失败：意外令牌 (23:4) 您可能需要适当的加载程序来处理此文件类型，目前没有配置加载程序来处理此文件。见https://webpack.js.org/concepts#loaders|

webpack.config.common.js

包.json

使用 webpack 5 构建 vue 项目会抛出错误：“Error: module property was removed from Dependency”

我的理解是 webpack 已经删除了 vue 所依赖的猴子补丁。： https ://github.com/webpack/webpack/issues/8537

有哪些选项可以解决此错误？

我一直在玩这个模块联合示例，其中设置相对简单 - 主机正在使用具有共享反应依赖关系的远程模块。在本地运行时，我注意到尽管主机和远程具有相同的 react/react-dom 版本，但远程的版本始终是下载的版本。

根据我的研究，模块联合似乎会选择共享依赖项的“最佳”版本，但我很惊讶在两者具有相同版本的情况下会选择远程版本。这个决定是如何做出的？有没有办法强制在这种情况下使用主机的版本？

我正在尝试将 webpack4 迁移到 webpack5。我的项目既有反应文件又有打字稿文件。我遇到以下错误：

,

webpack.common.js

假设我有以下模块联合设置：

这让我与遥控器共享如下导入：

但是，如果我想共享一个深度导入，比如下面的呢？

使用上述设置执行此操作似乎会在主机和任何遥控器中创建模块的单独实例，这也许是可以理解的，因为我们在技术上并未共享深度导入。但是，有没有办法让模块联盟这样做？

我尝试将 HMR 添加到我的 webpack 5 配置中，但遇到了一个严重的错误。第一次正确编译，但在代码更改后重新编译时 - 它与HookWebpackError: Cannot read property 'updatedChunkIds' of undefined. 如果我删除hot: true选项 - 一切正常。

我的配置：

我试图删除target选项或将其更改为“浏览器列表” - 无效。我还尝试hot在插件部分中删除选项并初始化 HMR：

isEnvDevelopment && new webpack.HotModuleReplacementPlugin()

仍然存在相同的错误。

如果要重现错误，可以检查所有构建（开发分支） 。

所以我试图使用 Bulma 并得到一个 can't import _varibales.sass，我在我的 src 文件夹中。所以我以为是因为我没有配置 webpack 来支持 Sass。

因此，我按照本教程中的配置说明进行操作，但随后出现加载程序错误。这是我第一次使用原始 webpack 而不是 CRA。我这样做是因为我想更多地了解 Webpack 和 Babel。

我尝试过的另一件事是在配置中找到的 Webpackdart-sass配置。

我现在的错误是：

[webpack-cli] 配置对象无效。Webpack 已使用与 API 模式不匹配的配置对象进行初始化。

configuration.module.rules[2] 应该是以下之一： ["..." | 对象{编译器？，依赖？，descriptionData？，强制？，排除？，生成器？，包括？，发行者？，发行者层？，层？，加载器？，mimetype？，oneOf？，选项？，解析器？，realResource？，解析？，资源？，resourceFragment？，resourceQuery？，规则？，sideEffects？，测试？，类型？，使用？}, ...]

-> 一条规则。详细信息： * configuration.module.rules[2].loader 应该是一个非空字符串。

我的webpack.config.js样子是这样的：

I'm currently investigating the 'micro front end' solution provided by webpack 5 using the ModuleFederationPlugin. I have managed to get it working using React so essentially i have App1 that pulls a component from App2:

In App1 it is consumed like:

And this works fine.

What i'm trying to do now is inject some Angular in. Not sure if this is even possible but feel like i've come close. However all the example i have found with Angular hook into the router outlet.

Getting it to work the most basic i expose the module:

then import into App1 the same way as the App2:

(tried with and without .then(m => m.FlightsModule))

and then try to display it using

I've tried many combinations and googled lots of things but to no avail.

• Is the React and Angular combination even possible?
• Any fixes to display the Angular module?
• Is there an easier way to display an Angular component / module?

UPDATE

I've created the repo's to run, the readme has the build instructions.

https://github.com/dale-waterworth/micro-front-end-react - localhost:3001

https://github.com/dale-waterworth/micro-front-end-angular - localhost:4201 (ng serve mdmf-profile)

https://github.com/dale-waterworth/micro-front-end-container - localhost:3002

Ensure to run the micro-front-end-container last.

I'm trying to add the component into the container in App.tsx and this is where i've tried lots of this. Also in the dev tools network tab, you can see that the code is being picked up.

我正在尝试升级到最新的 webpack 版本，但现在使用时收到这些错误消息webpack serve --hot --mode development --port 3000

这是我的 webpack 配置文件：

这是我的 package.json：

我可能在做一些愚蠢的事情。关于我可能做错了什么的任何建议？

更新：如果我使用 devtool: 'eval-source-map' 而不是 'source-map' 似乎不再发生错误。