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