Как настроить относительный путь Webpack React Js?

Есть подобный импорт import avatar from "../../../../../../src/img/ava.jpg"; А хотелось бы настроить вебпак так, чтоб все картинки из любой директории проекта импортировались именно из папки img вот так: import avatar from "img/ava.jpg";" Знаю, что это настраивается в webpack.config.js но как???


Ответы (1 шт):

Автор решения: Михаил В

То, что Вам нужно, называется "алиасы". В документации вебпака есть описание как это сделать (см https://webpack.js.org/configuration/resolve/#resolvealias).

Вкратце, в webpack.config.js в секцию module.exports добавить параметр resolve (если его нет)

resolve: {
    alias: {
      Components: path.resolve(__dirname, 'src/components/'),
      Templates: path.resolve(__dirname, 'src/templates/'),
    },
  },

Дальше в модулях можете использовать обозначенные алиасы типа

import Component1 from 'Components/component1';
→ Ссылка