问题标签 [webpack-config]

我的webpack.config.dev.js文件中有以下配置

下面还给出了webpack版本

当我这样做时，我会yarn install出错。但是模块正在安装并且yarn serve可以正常工作

如果有人可以提供帮助，我们将不胜感激。提前致谢

在webpack.config.js确定模块时，我们可以使用 3 个不同的属性：

文档没有对它们进行解释：

Rule.test
包括所有通过测试断言的模块。如果您提供Rule.test选项，则不能同时提供Rule.resource. 有关详细信息，请参见Rule.resource和Condition.test。

Rule.include
包括匹配任何这些条件的所有模块。如果您提供Rule.include选项，则不能同时提供Rule.resource. 有关详细信息，请参见Rule.resource和Condition.include。

Rule.resource
ACondition与资源匹配。请参阅Rule条件中的详细信息。

他们每个人都是Condition类型。其中一些是相互排斥的。但是每个的目的是什么？我们什么时候应该使用每个？

如果只有test一切就会清楚。

这来自https://www.npmjs.com/package/pug-plain-loader文档

我不清楚为什么pug-plain-loader在<template lang="pug">

我认为，当前加载程序仅适用于 .pug 文件。

在 webpack 配置中使用“source-map”作为 devtool 选项的值时出现此错误，但在使用“eval”时它可以工作（但我不想要“eval”）。资产可能是未定义的或不是数组的机会。我是 webpack 的新手，谁能帮我提出一些建议，比如这里有什么可能性？

这可能是一个微不足道的问题，但我是 webpack 的新手。我有一个项目，其中包含路径似乎搞砸了。项目结构如下（简化）：

请注意，每个模块都有自己的子文件夹。main.js看起来像这样：

模块可以导入其他模块：

我有一个webpack.config.js看起来像这样的基本设置：

出于某种原因，所有导入都不考虑模块的子文件夹。当我运行时webpack，我得到了很多Module not found: Error: Can't resolve ...错误。错误输出如下所示：

我可以将 webpack 配置为在导入模块时使用某种映射吗？

我在 React 中构建了一个简单的计算器。它包含两个用于输入数字的输入，一个在单击时添加数字的按钮和一个带有结果的顶部标题，该标题具有一个onClick动态显示结果的处理程序。

这是一个工作演示：https ://codepen.io/wawrzyniec/pen/gOmOdev

但是，当我在本地服务器上启动此项目时，代码不起作用。DOM 元素正确加载，但单击处理程序不会更改结果。我怀疑这可能与我的 Webpack 配置有关（输出不正确），但我不确定，因为我尝试了许多不同的修复程序但没有成功。

项目文件结构

包.json

webpack.config.js

.babelrc

./src/app.jsx

./src/calculator.jsx

./src/index.html

我正在使用这个反应样板代码 - https://github.com/react-boilerplate/react-boilerplate和 webpack - https://webpack.js.org/configuration/ 我面临的问题是每当我在做 npm run构建并将构建文件夹推送到 prod，用户必须手动执行 ctr+shift+r 才能查看最新更改。我尝试了许多哈希脚本等方法，以清除新版本的缓存，但没有一个有效。我尝试的一种方法是 - https://dev.to/ammartinwala52/clear-cache-on-build-for-react-apps-1k8j 但事情在我的构建文件夹中没有任何公用文件夹或任何元.json。任何帮助将不胜感激

我正在学习 Webpack 并尝试使用插件webpack-dev-server。我正在通过尝试更改其设置来学习webpack.config.js.

更改前：

更改后：

结果：

• 该dist/文件夹未在我的项目文件夹中生成。
• 当浏览器仍处于打开状态并提供应用了 .js 的页面时。

所以看起来该dist文件夹是在其他地方生成的？我也在考虑这是因为我的output { path: ... }or设置错误devServer: { contentBase: ... }。

顺便说一句，html-webpack-plugin如果这两个路径设置错误，会在临时文件夹中生成输出吗？

我刚刚从 webpack 4 升级到 webpack 5，但是现在当我尝试构建我的解决方案时，它会抛出以下错误：

TypeError: chunks.some 不是函数

这是我的 webpack.config 中的行：

有谁知道这已被替换或我如何更改上述内容以使其正常工作？

在我的配置中，我目前正在使用一个 shell 应用程序和一个遥控器，两者都是用 angular 12.2.0 编写的，我遇到了一个我不知道如何解决的问题。

外壳 webpack.config.js

远程 webpack.config.js

当我在 shell 应用程序中使用对远程模块的引用时，一切正常，如下所示：

当远程模块的组件在其代码中实例化一个新的 Web Worker 时，就会出现问题，如下所示：

上面的代码，在 Webpack 5 中，已经在我的应用程序中生成了一个名为 my-worker.js 的单独包，它既不是组件的一部分，也不是模块的包。因此，将模块暴露给模块联合，也不会暴露到 remoteEntry.js 以及工作人员的代码。然后尝试使用 shell 应用程序导航到加载我的遥控器的路线，将出错并通知：

错误错误：未捕获（承诺）：SecurityError：无法构造“Worker”：无法从源“http://localhost:5000”访问“http://localhost:4250/my-worker.js”处的脚本。错误：无法构造“Worker”：无法从源“http://localhost:5000”访问“http://localhost:4250/my-worker.js”处的脚本。

所以问题是，如果我想要一个遥控器并公开它的模块以在 shell 应用程序中使用，并且它的一个模块使用 Web Worker，我如何确保由 Webpack 创建的单独的工作包也被公开为了让shell应用程序能够实例化它？