webpack file-loader加载文件夹中的所有文件

时间:2017-07-18 11:55:42

标签: webpack webpack-file-loader

我在文件夹中有一堆图像,webpack文件加载器只加载html或css文件中引用的那些图像。多数民众赞成没事。 但是我希望文件夹中的所有图像也可以加载到最终的dist / images文件夹中,而不是在html中解决它们。

关键是我想通过用户点击一个接一个地加载它们

Thanksssssssss

2 个答案:

答案 0 :(得分:2)

您可以强制Webpack要求某个文件夹中的每个资源。

将以下代码放入应用程序的入口点:

// load assets
function requireAll(r) { r.keys().forEach(r); }
requireAll(require.context('images/', true));

答案 1 :(得分:0)

我今天偶然发现了这个问题,经过一番搜索,我看到了很多不同的答案。

使用 require.context() 识别文件夹中图像的解决方案假定您在服务器上运行节点。在我们的例子中,我们只使用 webpack 为 .NET Core MVC 应用程序打包文件。

无论您的具体情况如何,对我来说,简单地在未使用的类声明中引用图像似乎是最简单和直观的方法。我们覆盖 background-image 属性完全没有关系。

.--webpack-detect-images {
    background-image: url('./assets/images/file1.png');
    background-image: url('./assets/images/file2.png');
    background-image: url('./assets/images/file3.png');
}