file-loader webpack 2加载目录

Question

我已在此配置中添加：

{
    test: /assets\/(\.png|\.jpg)$/,
    use: ['file-loader?name=[name].[ext]&publicPath=assets/&outputPath=assets/']
} 

我在assets目录中有一堆图像，我希望它同时输出web-dev-server和dist相同的文件夹。

我认为我的测试会获取该文件夹中的每个png或jpg，并将公开路径和输出路径都设置为assets。

然而，webpack输出表明情况并非如此。

Answer 1

您正在使用的正则表达式实际上与您的文件不匹配。唯一的匹配是：

assets/.png
assets/.jpg

您需要添加.*以匹配assets/与扩展名之间的任何内容。正确的正则表达式是：

/assets\/.*(\.png|\.jpg)$/

如果您不想与assets/.png匹配，则可以使用.+，但这不应该是一个问题。

您可以在RegExr中尝试。

只是为了确保没有额外的混淆：webpack配置中的规则不包含任何内容，它们只是应用于通过测试的导入（在这种情况下匹配正则表达式）。您仍然需要在代码中导入它们，这将为您提供输出文件的路径，因此您的引用将是正确的。