Question

有什么方法可以在Webpack中使用自定义的require函数吗？这样就不再需要模块的标准方式了

select famille_rejets, nbr_contrat_ko, nbr_siret_ecarte 
from (select famille_rejets, sum(nbr_contrat_ko) as nbr_contrat_ko from suivi_cycle where code_di = '01' group by famille_rejets )
cross join (select sum(nbr_siret_ecarte) as nbr_siret_ecarte
from suivi_cycle where code_di = '01' );

我可以这样写

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

其中const styles = loadStyles("styles.css");是不存在的函数，但webpack会以与loadStyles相同的方式处理它。

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

require

长话短说，我希望能够告诉webpack function loadStyles() { return "fake styles"; }（或任何其他功能）是新的loadStyles。

Answer 1

不，您不能-不使用装载机。 Resolve仅允许您更改路径的解析，而不能单独更改加载，这意味着您无法替换/更改加载的内容。

您可以使用Babel允许跳过此类导入。对于React，甚至存在一个完整的软件包来执行此操作：Babel-Plugin-React-CSS-Modules。该程序包允许包含和解析样式名称，但在测试/服务器端渲染时将样式表与脚本分开。

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

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

Babel和其他应用程序/库完全允许您这样做。他们使用scss或css来解析您的import或require样式表，并查看样式表中的哪些类将其映射到javascript内部的对象中。之后，他们不再关注样式表。这使它非常适合测试和服务器端渲染，因为可以解析类，但由其他Webpack加载器处理。

不再需要单独的loadStyles函数，该函数可以完全做到这一点，除非从远程加载样式。据我所知，webpack目前不支持此功能（但是加载程序在这里也可以提供帮助）。

如果您确实要对样式表进行很多非常规更改，请坚持使用require，为其编写自己的加载程序，然后根据ENV参数激活/停用加载程序（例如， production | test | development。

配置Webpack以使用自定义需求功能

1 个答案: