Блог

Главная - Вопросы по программированию - Создание более умного автозагрузчика Webpack для компонентов React (вложенного в их каталоги)

Создание более умного автозагрузчика Webpack для компонентов React (вложенного в их каталоги)

#reactjs #webpack #naming #directory-structure

#reactjs #webpack #присвоение имен #структура каталогов

Вопрос:

Мне действительно не помешал бы гуру webpack, который помог бы объяснить, возможно ли это.

Вот мой список каталогов:

 components/
   Editor/
      Editor.jsx
      style.module.scss
   UIListing/
      UIListing.jsx
      style.module.scss

В дополнение к псевдониму webpack для разрешения в каталоге компонентов:

 resolve: {
    alias: {
      ['~']: `${path}/components/`
    },
    extensions: ['.js', '.jsx']

Итак, когда я в данный момент импортирую Editor :

 import Editor from '~/Editor/Editor

Для меня это нормально. Но есть ли какой-либо способ (без перемещения компонентов из их каталога, чтобы я мог решить это таким образом?

 import Editor from '~/Editor

Комментарии:

1. Я должен добавить, что я проверил webpack.js.org/configuration/resolve для документации, но я изо всех сил пытаюсь найти здесь решение о том, как это сделать

Ответ №1:

Нашел решение:

 containers/
   Editor.jsx

components/
   Editor/
      Editor.jsx
      style.module.scss
   UIListing/
      UIListing.jsx
      style.module.scss

Editor.jsx:

 import Editor from '../components/Editor/Editor'
export default Editor

webpack.config.js:

 resolve: {
    alias: {
      ['~']: `${path}/containers/`
    },
    extensions: ['.js', '.jsx']

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

 import Editor from '~/Editor'