Webpack：如何编译项目中所有较少的文件

Question

我使用webpack for JS，现在我想将它用于样式。我在不同的文件夹中有很多样式，我想将它们全部编译而不需要每个文件夹。问题是如何收集文件夹中的所有.less文件并通过less-loader进行编译？

Answer 1

这不是webpack的工作方式，真的。如果你真的想这样做，grunt / gulp将是一个更好的选择。

Webpack的require机制确保您只为任何给定的入口点构建所需的CSS，并为您提供依赖项管理。如果您确实想使用webpack，但又不想使用样式加载器将它们插入到DOM等中，则可以使用Extract Text plugin将已编译的CSS构建到单独的文件中。

Answer 2

我使用require.context找到了一些解决方法。

首先，你需要在styles文件夹的根目录中创建一个js文件，如果你没有。

如果您使用css或更少，请使用此代码并始终提取

require.context('./', true, /(\.less$)|(\.css$)/);

第一个参数是文件夹的相对路径，其中webpack应该搜索文件，第二个参数告诉它应该搜索子文件夹，最后一个是webpack应该需要的文件扩展名的regexp。然后，您需要请求此文件或将其用作入口点。如果您使用extract-text-webpack-plugin但无法正常工作，则此方法有效。

使用样式而不提取样式以设置单独文件的样式

如果你不提取它们，上面的例子是行不通的，因为webpack生成带有样式的模块但不执行它们。这是完整的示例，适用于两种情况：

(function (requireContext) {
    return requireContext.keys().map(requireContext);
} (require.context('../', true, /(\.less$)|(\.css$)/)));