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

Для настройки Webpack5 с возможностью импортирования файлов без указания явного расширения .js .jsx нужно внести следующие изменения в конфигурационный файл webpack.config.js.

Первым шагом нужно добавить resolve.extensions опцию, которая будет указывать на расширения файлов, которые Webpack будет пытаться разрешить при импорте. Добавьте следующую строку в ваш webpack.config.js:

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

После этого Webpack будет автоматически разрешать импорты с указанными расширениями.

Вторым шагом нужно настроить resolve.alias опцию в том случае, если необходимо обрабатывать импорты без указания пути до файла. Добавьте следующий код в ваш webpack.config.js:

resolve: {
  extensions: ['.js', '.jsx'],
  alias: {
    '@': path.resolve(__dirname, 'src'),
  },
},

Этот код добавляет псевдоним @, который указывает на путь до вашей папки с исходным кодом (src). Теперь вы можете импортировать файлы из вашей папки src без указания пути до файла:

import MyComponent from '@/components/MyComponent';
import utils from '@/utils';

Важно помнить, что файлы все равно должны иметь одно из указанных расширений (.js или .jsx), только у вас больше не требуется явно указывать их.

С помощью этих настроек вы сможете настроить Webpack5 так, чтобы импортировать файлы без явного указания расширения .js .jsx.