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

【问题标题】：webpack file-loader load all files in a folderwebpack file-loader 加载文件夹中的所有文件
【发布时间】：2017-07-18 11:55:42
【问题描述】：

我在一个文件夹中有一堆图像，webpack 文件加载器只加载那些在 html 或 css 文件中引用的图像。没关系。但我希望文件夹中的所有图像也加载到最终的 dist/images 文件夹中，无论它们是否在 html 中寻址。

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

谢谢sssssss

【问题讨论】：

标签： webpack webpack-file-loader

【解决方案1】：

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

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

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

【讨论】：

require 是如何导入的？这是什么？

【解决方案2】：

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

使用 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');
}

【讨论】：