问题标签 [webpack-5]

我正在为我的项目使用https://github.com/wbkd/webpack-starter

我确实有在我的 html 文件中引用的图像，svg例如png<img src="/public/image.png"/>

我不想使用 src 路径加载图像，而是将图像作为 base64 内容注入到我的 html 文件中，以提高页面性能并减少服务器请求的数量。

所以我想知道你会怎么做？

更新：

这是我所做的，但这不起作用

并将此配置添加到生产配置：

我试图玩弄limit价值观，但无济于事。有任何想法吗 ？

更新：

那是我当前的rules配置，但没有任何效果，我也安装了html-loader但没有效果：

我希望将 AngularJS(1.4.X) 项目中现有的基于 Ruby 的构建系统迁移到 Webpack。项目代码没有使用 JS 模块并且使用老式的 Angular 代码模式我不确定 Webpack 将如何找到项目中的所有控制器和工厂文件。

文件夹结构就像，

我在入口点使用 main.js，它被复制到构建文件夹中，但即使我使用 babel-loader 到 .js 规则，Webpack 处理的其他文件也没有。

我能想到的一个选择是使用 https://www.npmjs.com/package/webpack-merge-and-include-globally之类的东西将所有其他文件放入单独的捆绑文件中，但我想知道是否有一种更好的方法。

我当前的 webpack 配置如下。

可能 Webpack 对我来说不是正确的解决方案，因为我不想按照Webpack 插件和/或 AngularJS 策略中的建议更改源代码

我有一个 Angular 11 应用程序，我通过 angulararchitects 的组件使用 Webpack 5 和 Module Federation 来创建微前端应用程序。为了按照我想要的方式制作动画，我需要一些 scss 和一些 angular。为了能够在一个地方（scss 变量）对这些动画进行配置，我想导出它们并通过在我的角度组件中导入来使用它们。我已经阅读了几篇关于如何实现这一点的文章，但是由于在 Angular 11 中处理 css 模块的方式已经改变，并且通过使用 angulararchitects 拥有 webpack.config 和自定义构建器，我有点卡住了如何完成这个。

到目前为止，我所做的：

• 在 scss 文件中导出我的变量
• 为变量创建一个类型文件

我被困在哪里：

• 在哪里包含 ngx-builder-plus 的输入文件（我看到包含所有 .d.ts 文件，但我不确定这是否足够）
• 如何使用 Angular 11 设置 webpack，以便正确导出变量

有什么想法或方向吗？谢谢马库斯

尝试使用所有最新版本设置 react-app。

Github 回购链接

尝试使用导入的 sass 文件运行故事书将导致以下错误。尝试在不导入样式的情况下运行，故事书有效。

相同的代码在运行时可以正常工作npm start run，没有警告和错误。

我已经使用@dr.pogodin/babel-plugin-react-css-modules和 sass、webpack 5、react 17 和最新包配置了 css 模块。

babel.config.js

用于 css 的webpack.config.js（包含部分代码）

故事书/webpack.config.js文件

不幸的是，我对此的复制是在一个复杂的专有项目中，所以我会尽力解释发生了什么。

与我的用例最接近的示例项目是这个：https ://github.com/module-federation/module-federation-examples/tree/master/dynamic-system-host 本质上，我有一个全方位的设置，其中一个Shell App 使用一组远程应用程序。远程应用程序是在运行时发现的，因此没有在 Webpack 配置中指定。

Shell 以及所有 Remote 都依赖于共享库 my-shared-lib：

Shell 在其 Webpack 配置中将此库公开为一个渴望的单例：

遥控器在他们的配置中也将其共享，但并不急切：

问题是这样的：我已经通过运行时调试和检查 Webpack 生成的包验证了这个库被多次包含和实例化——一次用于 shell，一次用于每个远程。lib 的代码甚至存在于 Webpack 在获取暴露的 ./app.js 时加载的 Remote 的捆绑包中。

我不知道这里发生了什么。我也尝试共享 my-shared-lib 的每一个依赖项，但这无济于事。

我的期望是 Remotes 使用由 Shell 共享的 my-shared-lib 实例，而不是创建自己的实例。

我是否完全误解了依赖共享的工作原理，还是我做错了什么？

应该注意的是，Shell 和 Remots 都有单一的入口点。

使用 Webpack 5 模块联合，如果远程条目被修改，您不需要重新部署主模块/应用程序，并且当浏览器请求时将加载最新版本的模块。

我想知道：由于远程 URL 保持不变（例如http://localhost:8081/remoteEntry.js），浏览器可能会在每次加载主模块时缓存文件和缓存版本。另一方面，如果您为远程条目添加缓存清除，您将没有缓存。

让我们假设有一个使用 Webpack 5 模块联合的微前端架构的应用程序。有一个远程微前端，其配置如下：

然后是主模块配置：

这两个模块都部署在生产环境中。

然后我更改Component1并app1部署app1模块。

如何处理远程模块缓存？

更新：

在我的情况下，浏览器似乎使用启发式缓存（https://www.rfc-editor.org/rfc/rfc7234#section-4.2.2），remoteEntry.js因为服务器没有提供明确的到期时间。

因此，当remoteEntry.js更新时，主应用程序仍会从可能缓存数周的缓存中加载此文件。对于块，这不是问题，因为 webpack 可以配置为在文件名中包含哈希。

因为remoteEntry.js我看到了 2 个选项：

• 缓存清除
• 显式指定缓存控制

你认为这是一条路吗？

我正在将一个使用 webpack 的项目从 v4 升级到 v5，虽然现在所有编译都没有错误（经过一些最小的调整），但我注意到输出格式完全不同。在 v4 下，它的外部结构如下：

而现在在 v5 中，它的结构如下：

我认为这对我们项目中使用输出的特定方式造成了问题（具体来说，后者似乎被调用，但前者似乎没有被调用）。

是否有更改 v5 中默认输出的设置？

我尝试查看output.iife文档中的（无效果）和其他内容，但没有看到适合我的内容。我确定我遗漏了一些明显的东西。

更新：

有了@felixmosh 的回答，我就成功了。现在使用函数语法而不是 lambda 语法是一致的，但仍然存在一个问题，即 v5 变体似乎是自执行的，而 v4 不是。

我根据 webpack 入门示例在 GitHub 上添加了一个 repro： https ://github.com/tlmii/webpack-v4-to-v5-example

我正在尝试为文件夹webpack中的 javascript 和 css 文件配置具有相同名称的构建。build但无法得到它。有人帮我解决这个问题吗？

这是我的配置：

"webpack": "^5.11.0", "webpack-cli": "^4.2.0", - 我现在的版本

目前我得到的文件名如下：

我正在将我的个人插件升级到 Webpack5，虽然事情进展顺利；我一直在努力思考如何正确更改资产中期构建的来源。

我知道 Webpack5 对资产挂钩的更改，并且需要在 processAssets 挂钩/适当的阶段进行更改。

然而，我不明白的是实际资产的源道具、函数或缓存字符串？

例如，要更改未缩小的 JS 资产的来源，我只能通过以下方式获得成功：

但是，如果该资产被缩小，我只能通过以下方式获得成功：

这有点奇怪，但我想我们可以解决这个问题..

但随后进入 HTML 资产，无论是否缩小，只有在以下情况下才有效：

所以，我越来越觉得我错过了一些明显的 API 方法，用于一致地更改资产的来源，并且我正在添加故障点而不是解决方案。谁能指出我正确的方向或给我一个更好的方法的想法？

谢谢！

开发一个插件来获取特定的资产类型并将它们合并到一个文件中。我希望能够根据哪个条目将资产整合到文件中。

期望的结果是一个文件具有 a/b 资产，另一个文件具有 c/d 资产。

有没有办法确定资产来自哪个条目？

似乎 Webpackcompilation.processAssets并compliation.getAsset()没有真正为您提供关于哪些条目带来了哪些资产的上下文。

我需要从另一个挂钩位置查看资产吗？也许从块或模块来确定这一点？任何方向都会有所帮助。

谢谢！