问题标签 [webpack-config]

所以今天我一直在尝试将 postcss-loader 从版本 3.0.0 迁移到 4.0.2

我注意到自版本 4.0.0 以来，他们添加了 postCSS 作为对等依赖项，因此我添加了 postcss 版本 7.0.27。我没有选择 8，因为我也使用“postcss-import”，这依赖于版本 7。这应该没问题，因为 postcss-loader 可以同时使用版本 7 和 8。

但是现在在运行时，我收到所有 scss 文件的相同错误消息：

Error: [object Object] is not a PostCSS plugin

由于消息不是真正的描述性，因此解决问题已成为一种真正的试错方法。到目前为止没有成功。

这是我的 webpack.config.ts：

我在 postcss-loader 的选项中尝试了几件事：

• 设置执行为真
• 将 sourceMap 设置为 true
• 将两者都设置为 false

要完整，这里是我使用的依赖项版本：

您是否在这里看到了问题或知道在哪里寻找？这将是一个帮助。

提前致谢

我希望能够为我的 webpack 配置中的每个条目都有一个特定的路径和文件名。具体来说， webpack“输出文件名”文档中的这个例子就是我想要的：

这是我对该示例的实现：

我知道这种入口点配置是有效的，因为它在Webpack 文档的“输出文件名”部分

但是，我收到一条错误消息，指出我的配置无效。具体来说，我的错误是这样的：

我正在使用webpack v4.44.2and webpack-cli v3.3.12，我认为它们分别是最新版本。

此外，我已经测试了我的配置中的这些path.join(somePathHere, someOtherPathHere)表达式是否正确地评估为字符串的有效路径。他们做到了。

我究竟做错了什么？尽管我的代码与文档匹配，为什么我会收到此错误？任何和所有的帮助或输入将不胜感激:)。

我在项目文件夹中新安装了 npm 后，npm run serve 不起作用。我正在使用最新的 webpack。还尝试全局卸载和安装 npm。虽然这是在 npm install 之前运行的。package.json 从一开始就没有任何变化。我不知道这里出了什么问题。下面给出错误

在 checkResourceSource (E:\projects\project-emr\emr\node_modules@vue\cli-service\node_modules\webpack\lib\RuleSet.js:167:11)

我正在使用带有rescripts的 CRA +

我想对 Moment.js 语言环境进行 tree-shake，与ignorePlugin Webpack 文档中所示的方式完全相同：

我知道我可以使用脚本轻松转换 webpack 配置：

但是我怎样才能获得webpack对象来调用该IgnorePlugin方法 - 或达到相同的结果？

react-app-rewired如有必要，我愿意从 rescripts 切换到替代方案，例如。

我今天一直在使用 webpack，突然之间它开始向我抛出错误，它无法解析常见的节点模块，例如fs和inspect. 我发现这个 github 问题通过 webpack 的配置将模块设置为 none 提供了一种解决方法。之后，我在浏览器中收到此错误：

我相信这与在解决方法中模块被空占位符替换的事实有关。我已经尝试重新安装所有模块。希望有人可以帮助解决这个问题！

有没有办法为 Webpack 定义一个“回退”规则，这样如果没有其他匹配 from .module.rules，则应用此规则？

我尝试在最后一个位置指定一个规则，并且非常宽松test:，但是无论它的位置如何，它似乎都具有优先权（第一个，最后一个，也在 内部尝试oneOf）。

例子：

我本来希望所有不是 a.ts或.ttf要通过 加载的东西file-loader，但实际上它似乎适用.ts于例如文件。

我使用的 SVGrequire不会显示。

在我的终端中，发出了 svg 资产，并且在我的html.

但是，当 jpg 或 png 等其他格式有效时，SVG 不会显示。我尝试打开原始 svg 文件，它确实有效。当我检查发出的 svg 资产并将其加载到浏览器中时，如下所示：localhost:8080/images/brand-illustration.f20767e375d3094978f5cc5c9726d0a6.svg，我得到了parse error：

这就是我在pug文件中使用 svg 的方式

网络包配置

开发依赖

使用 Webpack 捆绑模块很新，但尝试一下。我有一个非常简单的项目，我试图将其捆绑起来以显示它。运行构建脚本给了我一个神秘的错误：

下面是我的Webpack配置：

奇怪的是，如果我template从HtmlWebpackPlugin' 的参数中删除 ，构建工作正常（但显然它不会将index.html我想要的文件添加到构建目录中）。

对于上下文，这个想法非常简单：在我的 src 目录中，我有一个index.html文件，其中包含一个带有 id 的 div，我将一些 React 代码注入其中。在构建它时，我想将它捆绑index.html到构建目录中并让它链接到生成的bundle.js文件，以便 React 代码立即运行。我知道我可以使用CopyWebpackPlugin来实现这一点，但必须手动将其包含bundle.js在其中，这对于这个玩具项目来说很好，但不想对更复杂的项目这样做。

有人有想法吗？

我的项目是一个由多个 JSON 文件组成的 JSON 模式：

我想要做的就是version用来自package.json. 即a.json包含一个${version}（实际语法是任意的，我没有任何偏好）占位符$id：

并且version，假设我想处理这个 JSON 并得到：package.json1.0.0

就是这样。它可以通过这样的脚本来实现（in package.json）：

但是我该如何使用 Webpack 呢？

我知道复制和定义插件，但似乎我需要项目中的实际源代码作为 Webpack 的入口点。像这样的配置：

将文件复制到dist（或我想要的任何地方），但给出错误：

这里的另一个问题是如何复制和处理这些文件（替换占位符）。

如何仅使用 Webpack 复制和处理这些 JSON？

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

更新过时的选项

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

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

我的意思是说：

webpack.config.js

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