Как поправить даный конфиг чтоб срабатывал на js and jsx?

Для того чтобы настроить конфигурацию Webpack таким образом, чтобы она поддерживала не только файлы JavaScript (.js), но и файлы JavaScript с расширением JSX (.jsx), вам необходимо внести изменения в файл конфигурации Webpack, обычно называемый webpack.config.js.

1. Установите необходимые пакеты:
Для начала установите пакеты, которые помогут Webpack обрабатывать файлы JSX. Они включают в себя: babel-loader, @babel/core и @babel/preset-react. Вы можете установить их с помощью пакетного менеджера npm или yarn с помощью следующей команды:

npm install --save-dev babel-loader @babel/core @babel/preset-react

или

yarn add --dev babel-loader @babel/core @babel/preset-react

2. Настройка webpack.config.js:
Откройте файл webpack.config.js и внесите следующие изменения:

module.exports = {
  entry: './src/index.js',
  output: {
    path: __dirname + '/dist',
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-react']
          }
        }
      }
    ]
  },
  resolve: {
    extensions: ['.js', '.jsx']
  }
};

Здесь мы добавляем новое правило в поле module.rules, где test: /.(js|jsx)$/, означает, что Webpack будет обрабатывать файлы с расширениями .js и .jsx. Также мы добавляем babel-loader в качестве загрузчика (loader), который будет использоваться для транспиляции файлов JSX и применяем пресет @babel/preset-react для поддержки синтаксиса JSX.

3. Настройка Babel:
Вам также нужно убедиться, что у вас есть файл .babelrc в корневой папке вашего проекта. Откройте этот файл и добавьте пресет @babel/preset-react в массив presets:

{
  "presets": ["@babel/preset-react"]
}

4. Запуск сборки:
Теперь у вас есть настроенная конфигурация Webpack для обработки файлов JavaScript и файлов JavaScript с расширением JSX. Вы можете запустить сборку проекта, используя команду:

npm run build

или

yarn build

Webpack будет собирать проект и создавать файлы JavaScript и JSX в папке dist с заданным в конфигурации именем файла (в данном случае bundle.js).

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