Как настроить Webpack 5 для возможности импорта файлов без указания явного расширения .js .jsx?

У меня возникла проблема при создании приложения React с использованием Webpack. Не могу настроить импорт файлов без указания расширения при импорте. Как это исправить?
  • 16 ноября 2023 г. 18:18
Ответы на вопрос 1
Для настройки Webpack 5 для возможности импорта файлов без указания явного расширения `.js` или `.jsx`, вы можете использовать расширение резолвера `resolve.extensions`.

В вашем конфигурационном файле Webpack (обычно `webpack.config.js`), в разделе `resolve` добавьте следующую настройку:

```javascript
resolve: {
  extensions: ['.js', '.jsx']
},
```

Это позволит Webpack автоматически находить и импортировать файлы без необходимости указывать их расширения.

Теперь вы можете использовать импорты без указания явного расширения:

```javascript
import Component from './Component';
```

Webpack будет искать файл с именем `Component.js` или `Component.jsx` и импортировать его соответствующим образом.

Обратите внимание, что если у вас есть файлы с одинаковым базовым именем (например, `Component.js` и `Component.jsx`), Webpack выберет файл с наиболее подходящим расширением согласно порядку, указанному в `resolve.extensions`. В данном примере, если оба файла существуют, Webpack выберет `Component.jsx`.
Похожие вопросы