импортировать все ресурсы в один файл images.js, а затем экспортировать как один объект

Question

в моем приложении реакции, в настоящее время, в каждом компоненте я импортирую изображение / значок или просто: const someIcon = '../../images/icon_car.png' а затем использовать его. Я попытался сконцентрировать все ресурсы в одном файле images.js, который в настоящее время находится в той же папке, что и / assets. Однако всякий раз, когда я пытаюсь использовать ресурс в другом файле, я получаю «ошибка файла не найдена». и, очевидно, URL становится «/ fonts /» (из-за того, что веб-пакет нацеливает все изображения в эту папку, очевидно).

so I've got images.js which is something like that:

import carIcon from './icon_car.png';
import manIcon from './icon_man.png';

const IMAGES = {
  carIcon,
  manIcon,
};

export default IMAGES;
// and in myComponent.jsx:
import IMAGES from '../../assets/images';
.
.
.
and then <img src={IMAGES.carIcon} /> for example for accessing the icon.

всякий раз, когда я пытаюсь получить доступ к импортированному значку из другого компонента, я получаю файл, не найденный в консоли.

мой webpack.config.js:

const path = require('path');
const glob = require('glob');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = (env, options) => ({
  optimization: {
    minimizer: [
      new UglifyJsPlugin({ cache: true, parallel: true, sourceMap: false }),
      new OptimizeCSSAssetsPlugin({}),
    ],
  },
  entry: {
    './js/app.js': ['./js/app.js'].concat(glob.sync('./vendor/**/*.js')),

  },
  output: {
    filename: 'app.js',
    path: path.resolve(__dirname, '../priv/static/js'),
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        resolve: { extensions: [".js", ".jsx"] },
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
        },
      },
      {
        test: /\.html$/,
        use: [
          {
            loader: 'html-loader',
            options: { minimize: true },
          },
        ],
      },
      {
        test: /\.(css|scss)$/,
        use: [
          "style-loader", // creates style nodes from JS strings
          "css-loader", // translates CSS into CommonJS
          "sass-loader", // compiles Sass to CSS, using Node Sass by default
        ],
      },
      {
        test: /\.(woff(2)?|ttf|eot|svg|png|gif)(\?v=\d+\.\d+\.\d+)?$/,
        use: [{
          loader: 'file-loader',
          options: {
            name: '[name].[ext]',
            outputPath: 'fonts/',
          },
        }],
      },
    ],
  },
  plugins: [
    new MiniCssExtractPlugin({ filename: '../css/app.css' }),
    new CopyWebpackPlugin([{ from: 'static/', to: '../' }]),
  ],
});

ОБНОВЛЕНИЕ:

Я только что заметил еще одно странное / тревожное поведение в моем проекте: когда я захожу внутрь myComponent.jsx и импортирую свой актив: import { vehicleIcon } from'../../../static/images/icon_car.png'; VehicleIcon не отображается на экране, когда я пытаюсь сделать это !!! также: console.log (vehicleIcon) ==> undefined!

ДРУГОЕ ОБНОВЛЕНИЕ: еще одна вещь, которую я заметил: всякий раз, когда я использую в любом компоненте в моем приложении: оно работает. но также и я могу сохранять ../../../../images столько, сколько я хочу, и актив все еще распознается и отображается на экране. но когда я импортирую someIcon из '../../path_to_assets ..', то someIcon не определен! (хотя мой линтер одобрил это правильная папка)

Answer 1

Вы можете сделать это,

const IMAGES = {
  carIcon:'icon_car.png',
  manIcon:'icon_man.png',
};

export default IMAGES;

// и в myComponent.jsx:

import IMAGES from '../../assets/images';
//Usage
<img src={"path to image folder/"+IMAGES.carIcon} />