问题标签 [webpack-5]

我有一个具有这种结构的应用程序：

样式表正在尝试像这样使用 PNG 文件：

现在我想尽可能避免使用url-loader，只需将 PNG 文件复制到dist文件夹进行生产，但也让它与开发服务器一起使用。

我试过使用这个规则：

我阅读了有关内置加载程序的信息，asset/resource但是我不明白如何将其设置为从static文件夹中读取 PNG 文件。

我收到错误：

我使用这些规则来处理 CSS：

我删除了 webpack.config.js 以创建 3 个不同的 webpack 配置文件，即 webpack.common.js、webpack.prod.js、webpack.dev.js。使用 webpack.config.js 后，项目运行良好npm run start。但是在将配置分离为 3 个不同的文件后，构建失败并出现此错误

npm run build 也因同样的错误而失败。

webpack.common.js

webpack.dev.js

webpack.prod.js

包.json

这是我的webpack.config.js，现在已删除

我无法在这里解决问题。请帮忙。

我在代码中使用“静态”并出现此错误。

您可能需要适当的加载程序来处理此文件类型，目前没有配置加载程序来处理此文件。

安装了@babel/plugin-proposal-class-properties，但没有帮助。

网络包配置：

我的图像文件夹有以下内容：

这就是我的 CSS 的输出：background-image: url(../images/assets/images/doctor-results/g-map-location.png);

我需要的是路径：background-image: url(../images/doctor-results/g-map-location.png);

基本上从路径中删除前 2 个目录，同时保持相对。

我在执行命令时使用的是 Webpack 5 和 Angular 11 ng build --prod && ng run test-app:server:production

在控制台中，它给了我一条错误消息：

并且目录没有被构建：dist/test-app/server/main.js 它只创建自己：dist/test-app/browser/

我不知道我在哪里配置了错误的文件。请帮忙。我不知道我做错了什么。

包.json：

角.json：

服务器.ts：

注释掉这行代码：

并执行命令 ng build --prod && ng run test-app: server: production 不显示错误。

TestRoute 类包含对库的引用并连接到数据库：

tsconfig.app.json

tsconfig.json

tsconfig.server.json

webpack.server.config.js

文档https://www.npmjs.com/package/msnodesqlv8说我添加了一行：

但错误仍然存​​在：

我不知道我还应该改进什么。

谢谢您的帮助

应用示例基于： https ://www.ganatan.com/tutorials/server-side-rendering-with-angular-universal

我的动态导入有什么问题？为什么它会添加错误的路径？

这行代码在 Webpack 3 中有效，现在在 5 中不起作用：

@storage是以下的别名：'@storage': path.join(__dirname, 'storage/app/public'),

问题是，不知何故，动态 JSON 的路径是错误的。

错误说：

如果你注意到它应该是https://example.com/js/而不是https://example.com/letscook/js/。

甚至源映射看起来也正确：

知道为什么要放置子路径吗？（顺便说一句，错误发生在子页面上https://example.com/letscook）

编辑：

这是 webpack 中设置的一个选项：

我正在现有项目中配置 Webpack，并且避免更改项目结构。在 scss 文件中，我包含以 / 开头的文件（例如 url('/fonts/mem.woff2'))，我相信这是我的问题的原因。

样式.scss

和错误：

错误：在finishWithoutResolve (D:\Programming\Demos\webpack-compact\node_modules\enhanced-resolve\lib) 处无法解析“D:\Programming\Demos\webpack-compact\src”中的“/fonts/mem.woff2” \Resolver.js:293:18) 在 D:\Programming\Demos\webpack-compact\node_modules\enhanced-resolve\lib\Resolver.js:362:15 在 D:\Programming\Demos\webpack-compact\node_modules\增强解析\lib\Resolver.js:410:5 at eval (eval at create (D:\Programming\Demos\webpack-compact\node_modules\enhanced-resolve\node_modules\tapable\lib\Hoo at D:\Programming\ Demos\webpack-compact\node_modules\enhanced-resolve\lib\Resolver.js:410:5 at eval (eval at create (D:\Programming\Demos\webpack-compact\node_modules\enhanced-resolve\node_modules\tapable\lib \Hoo 在 D:\Programming\Demos\webpack-compact\node_modules\enhanced-resolve\lib\Descriptio 在 D:\Programming\Demos\webpack-compact\node_modules\enhanced-resolve\lib\Resolver.j at eval（eval at create (D:\Programming\Demos\webpack-compact\node_modules\enhanced- at D:\Programming\Demos\ webpack-compact\node_modules\enhanced-resolve\lib\Resolver.j

我的 webpack 文件如下所示：

我知道如果我使用 ./ 将字体路径更改为该路径，它将起作用。我的问题是，是否可以仅更改 webpack 配置而不是转到所有 scss 文件并更改 url('/fonts/mem.woff2') 上的路径？

来自 webpack 的官方迁移教程：https ://webpack.js.org/migrate/5/

更新过时的选项

将以下选项更新为新版本（如果使用）：

这是否意味着这些插件将不再作为实际插件存在？

我的意思是说：

webpack.config.js

应该转换成下面的配置吗？

我刚刚更新到webpack 5.

这是我的webpack.config.ts：

这是相当标准的。

这是捆绑输出：

一切都说得通。这就是我们所拥有的：

• 一块runtime。从runtimeChunk: "single"选项
• 一块vendors。从defaultVendors缓存组
• 一个app块，来自app: "./src/index.tsx"入口点

但是还有其他一些我不明白的日志：

孤儿模块

为什么将webpack这么多模块检测为孤儿？我文件src夹中的文件总数约为 500 个。那里可能有一些丢失的文件，但我很确定它们中的大多数不应该被视为孤儿，因为它们在应用程序代码中使用。

这是他们对孤儿模块的定义：

而且我很确定我的大部分src文件都包含在app块中。那么他们怎么能被认为是孤儿呢？我可以检查或记录哪些模块被视为孤立模块吗？

我不确定这是否从 webpack 5 开始。不记得 webpack 4 日志是否也有这个。我应该担心这个吗？它没有触发任何warnings，但它会像这样记录。

尝试导入 MP3 文件时，如下所示：

我收到以下错误：

但是，这有效：

以下是重现此问题所需的所有文件。请注意，我正在使用 Webpack 5ts-loader将 Typescript 编译成 Javascript，并且Webpack 文档说file-loader已弃用，而应使用资产模块。

所以，我有两个问题：

1. 为什么导入 MP3 文件适用于 CommonJS 语法而不适用于 ES6？
2. 如果可能的话，我如何使用 ES6 语法导入 MP3 文件？