Недавно я увлекся разработкой Webpack-конфигов для своих проектов. До этого использовал готовые решения, типа CRA или из других бойлеров. В процессе изучения, наткнулся на очень интересное свойство, как — resolve.alias. Хотел бы коротко рассказать, почему эту штуку стоит использовать в своих конфигах.
Мне лень писать длинную статью о самых элементарных вещах, как и вам лень читать много лишней информации.
Алиас (с англ. Alias - псевдоним) — Позволяет указывать псевдонимы, которые могут быть использованы в ваших проектах.
Псевдоним использовать необязательно, но желательно. Когда вы импортируете (import) какой-то компонент из вашего проекта и он находится в какой-нибудь «чёрной дыре», откуда получить доступ к корневому файлу, подобно поиску иглы в стоге сена, псевдоним избавляет вас от этого гемора.
Есть компонент Button и вам нужно импортить из корня какой-то js-файл, который лежит в папке src/utils/upload.js.
Без псевдонима:
_10import upload from '../../../utils/upload';
С настроенным псевдонимом:
_10import upload from 'utils/upload';
Открываем ваш конфигурации Webpack, находим примерно такой код:
_10resolve: {_10 modules: ['node_modules', paths.appNodeModules].concat(_10 process.env.NODE_PATH.split(path.delimiter).filter(Boolean),_10 ),_10 ...
В массив modules, добавляем в начало или в конце такое значение path.resolve('./src').
В итоге должно получиться это:
_10modules: ['node_modules', paths.appNodeModules, path.resolve('./src')]
Теперь вы можете обращаться к своим файлам начиная с корневой папки. Меняем пути в своём проекте. Перезапускаем сборку, если у вас она была ранее запущена. Готово!
В конфигах Webpack у Storybook отсутствует resolve и вам нужно добавить такой код в module.exports:
_10 resolve: {_10 extensions: ['.js', '.jsx'],_10 alias: {_10 app: path.resolve(__dirname, '../src/app')_10 }_10 }
Если у вас отсутствует папка app и ваше приложение в src, просто убираем /app.