配置webpack以使用自定义require函数

有没有办法在webpack中使用自定义的require函数？因此，我们需要一个模块来代替标准方法

const styles = require("styles.css");
import styles from "styles.css";

我可以写这样的东西

const styles = loadStyles("styles.css");

其中，

loadStyles

是一个不存在的函数，但webpack将以与

require

相同的方式处理它

这对于在节点中运行单元测试来说非常方便。由于显而易见的原因，node无法加载带有

require

的CSS或任何其他资源文件，因为

require

仅用于javascript模块。但是，仅为单元测试模拟自定义全局函数非常简单：

function loadStyles() { return "fake styles"; }

---

长话短说，我想告诉webpack，

loadStyles

（或任何其他功能）是新的

require

不，你不能-不使用加载器是不行的。仅允许您更改路径的解析，而不是加载本身，这意味着您无法替换/更改加载的内容

您可以使用Babel，它允许跳过此类导入。对于React，甚至存在一个完整的包来执行此操作：。此包允许包含和解析样式名，但在测试/服务器端呈现时，将样式表与脚本分开

如果您使用的是Jest，那么它有一个单独的章节介绍

---

一般来说，这取决于你想要实现什么。许多框架——或者至少是webpack/babel配置——依赖于导入的样式名称（通常是散列的或类似的）。这意味着您需要在脚本中解析样式表的类名。否则，您将无法在其上运行条件和其他算法

Babel和其他应用程序/库恰恰允许您这样做。它们通过使用

import

或

require

解析

scs

或

css

样式表，并查看样式表中的类以将其映射到javascript中的对象。之后他们不会注意样式表。这使得它非常适合测试和服务器端呈现，因为类是解析的，但由不同的Web包加载程序处理

不再需要单独的

loadStyles

函数，除非从远程加载样式。据我所知，webpack目前不支持这一点（但加载程序可能也有帮助）

---

如果您真的想对样式表进行大量非常见的更改，请坚持使用

require

，为其编写您自己的加载程序，并根据

ENV

参数（例如

production | test | development

）激活/停用加载程序。

也许可以使用别名，如

const loadSomething=require

，然后

const something=loadSomething（'module_ref'）

。嗯，不。不管你如何命名，它都是相同的旧

require

函数，因此在节点中调用它来加载CSS文件仍然会失败。我想告诉webpack，

loadStyles

是新的

require

。啊，我误解了你的问题。所以我需要编写一个JS加载程序，它接收原始文件内容，解析它，找到“loadStyles”的出现，用“require”替换它们，并将结果返回给webpack？或者一个巴别塔插件也有同样的功能？我相应地更新了我的答案。如果您有可用的网页包加载程序支持，请不要创建与

require

功能完全相同的新功能。这将使您的代码很难维护。测试的

loadStyles

最直接的实现是返回一个

Proxy

对象，该对象只返回被调用方法的名称，或者类似的内容，因此我不需要任何网页包加载程序来进行测试。事实上，我想避免在测试中使用webpack。我不知道如何从节点重写标准的

require

函数，使其能够加载图像、样式等，而不是javascript模块。