如何在 React 上使用文件加载器导入每个图像答案

【问题标题】：How to import every image with file-loader on React如何在 React 上使用文件加载器导入每个图像
【发布时间】：2021-08-11 07:57:24
【问题描述】：

我和我的同事使用 React-boilerplate。

当我们想要添加图片时，我们需要做两个过程。

在assets文件夹中添加图片。
像这样在 app.js 上导入图片。
import '!file-loader?name=[name].[ext]!./assets/icon/icon_truck.svg';

所以，如果我想添加三个图像，我需要三个导入行。
import '!file-loader?name=[name].[ext]!./assets/icon/icon_truck1.svg';
import '!file-loader?name=[name].[ext]!./assets/icon/icon_truck2.png';
import '!file-loader?name=[name].[ext]!./assets/icon/icon_truck3.jpg';

我认为这是低效的。

但我不知道如何添加每个图像文件...

如何导入assets文件夹中的所有特定扩展名（png、jpg、svg...）文件？

我在我们的项目中找不到 webpack.config.js..

【问题讨论】：

标签： javascript reactjs webpack

【解决方案1】：

Webpack V5：

使用require.context() 动态加载目录中的所有模块。这意味着您可以动态加载所有.svg 模块。您不必一一import他们。
file-loader 是 v5 的 DEPRECATED，迁移到 Asset Modules 以允许使用资产文件（字体、图标等）而无需配置额外的加载器。

目录结构：

⚡  tree -L 5 -I 'node_modules'
.
├── dist
│   ├── app.js
│   ├── icon_truck1..svg
│   ├── icon_truck2..svg
│   └── icon_truck3..svg
├── package-lock.json
├── package.json
├── src
│   ├── app.js
│   └── assets
│       └── icon
│           ├── icon_truck1.svg
│           ├── icon_truck2.svg
│           └── icon_truck3.svg
└── webpack.config.js

4 directories, 11 files

src/app.js:

function importAll(images) {
  images.keys().forEach((image) => {
    console.log(image);
  });
}

const images = require.context("./assets/icon", true, /\.svg$/);
importAll(images);

webpack.config.js:

const path = require("path");

module.exports = {
  mode: "development",
  entry: "./src/app.js",
  output: {
    filename: "app.js",
    path: path.resolve(__dirname, "dist"),
    publicPath: "",
  },
  module: {
    rules: [
      {
        test: /\.(png|svg)$/i,
        type: "asset/resource",
        generator: {
          filename: "[name].[ext]",
        },
      },
    ],
  },
};

执行结果：

⚡  node dist/app.js
./icon_truck1.svg
./icon_truck2.svg
./icon_truck3.svg

由于您使用的是React-boilerplate，请尝试像上面一样直接使用require.context()。

【讨论】：