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

【问题标题】：Configure webpack to use custom require function配置 webpack 以使用自定义 require 函数
【发布时间】：2019-07-04 09:14:45
【问题描述】：

有没有办法在 webpack 中使用自定义的 require 函数？这样就可以代替要求模块的标准方法

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

我可以写这样的东西

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

其中 loadStyles 是一个不存在的函数，但 webpack 会以与 require 相同的方式处理它。

这对于在 node.js 中运行单元测试非常方便。由于显而易见的原因，节点无法使用 require 加载 CSS 或任何其他资源文件，因为 require 仅适用于 javascript 模块。但是模拟一个自定义全局函数只是为了单元测试非常简单：

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

长话短说，我希望能够告诉 webpack loadStyles（或任何其他函数）是新的 require。

【问题讨论】：

也许别名会起作用，比如const loadSomething = require;，然后是const something = loadSomething('module_ref')。
嗯，不。不管你怎么命名它，它都是同一个旧的require函数，所以在节点中调用它来加载一个CSS文件仍然会失败。我希望能够告诉 webpack loadStyles 是新的 require。
啊，我误解了你的问题。

标签： webpack

【解决方案1】：

不，你不能——不使用装载机就不行。 Resolve 只允许您更改路径的解析，而不是加载本身，这意味着您无法替换/更改加载的内容。

您可以使用允许跳过此类导入的 Babel。对于 React，甚至有一个完整的包可以做到这一点：Babel-Plugin-React-CSS-Modules。这个包允许包含和解析样式名，但在测试/服务器端渲染时将样式表与脚本分开。

如果您使用的是 Jest，它在 Handling Static Assets 上有一个单独的部分。

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

Babel 和其他应用程序/库正是允许您这样做。他们通过使用import 或require 解析您的scss 或css 样式表，并查看样式表中的哪些类以将其映射到javascript 中的对象中。之后他们不注意样式表。这使得它非常适合测试和服务器端渲染，因为类被解析但由不同的 webpack 加载器处理。

不再需要单独的loadStyles 函数，它可能会做到这一点，除非您从远程加载样式。据我所知，webpack 目前不支持这一点（但加载器也可能在这里提供帮助）。

如果你真的想对你的样式表做很多不常见的改变，坚持require，为它编写你自己的加载器并根据ENV参数激活/停用加载器（例如production | test | development） .

【讨论】：

所以我需要编写一个 JS 加载器来获取原始文件内容，对其进行解析，找到 'loadStyles' 的出现，用 'require' 替换它们，然后将结果返回给 webpack？还是做同样的事情的 Babel 插件？
我相应地更新了我的答案。如果您有 webpack 加载器的可用性作为后盾，请不要创建与 require 完全相同的新函数。这会使您的代码难以维护。
loadStyles 用于测试的最直接的实现是返回一个 Proxy 对象，它只返回被调用方法的名称，或者类似的东西，所以我不需要任何 webpack 加载器来使测试工作。事实上，我想避免在测试中使用 webpack。我不知道如何从节点覆盖标准的require 函数，使其能够加载图像、样式等而不是 javascript 模块。