ошибка с веб-пакетом - вам может понадобиться соответствующий загрузчик для обработки этого типа файла

Question

Я учусь реагировать и пытаюсь создать шаблон с помощью веб-пакета.Я проследил за уроком, проследив, что все в его видео работает, но на моем компьютере появляется сообщение об ошибке, что для обработки файлов определенного типа необходим соответствующий загрузчик.

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.export = {
    entry: './src/index.js',
    output: {
        path: path.join(__dirname, '/dist'),
        filename: 'index_bundle.js'
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader'
                }
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html'
        })
    ]
}

И это файл, в которомошибка от

import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App';

ReactDOM.render(<App />, document.getElementById('app'));

Вот сообщение об ошибке:

ОШИБКА в ./src/index.js 5:16 Ошибка синтаксического анализа модуля: неожиданный токен (5:16) Вам может понадобиться соответствующий загрузчик для обработки этого типа файлов.|импортировать приложение из «./components/App»;|

ReactDOM.render (, document.getElementById ('app'));@ multi (webpack) -dev-сервер / клиент? http://localhost:8080 (webpack) /hot/dev-server.js ./src main [2]

Answer 1

Прежде чем вы сможете использовать синтаксис JSX, вам нужно иметь список предустановок в файле .babelrc в корневой папке вашего приложения.

Вот пример

{ 
  "presets": [
    "flow", 
    "es2015",
    "react"
   ]
}

В этом примере babel будет отвечать за приложение JSX React с ссылками ES2015 и синтаксисом статической типизации потока.

Посмотрите на эту ссылку для получения дополнительной информации.