Конфигурация веб-пакета для хамла

Question

Так что я только начал использовать веб-пакет для своих проектов. Я использую webpack, чтобы попытаться скомпилировать мои шаблоны haml в jsx, чтобы реагировать на элементы. Для этого я использую загрузчики haml-jsx и babel-loader.

Итак, проблема, с которой я столкнулся сейчас, возникает, когда веб-пакет загружает шаблон.haml. Я продолжаю получать эту ошибку: "Ошибка синтаксического анализа модуля: неожиданный токен. Вам может понадобиться соответствующий загрузчик для обработки этого типа файлов". Я знаю, что мешает загрузчику haml-jsx работать правильно, но, как я уже сказал, я новичок в вебпаке, так что идите, если это мой конфигурационный файл вебпака или что-то вне этого. Вот почему я иду к вам, ребята!

Ниже приведен мой конфигурационный файл webpack:

const path = require('path');
module.exports = {
    entry:path.resolve(__dirname,"index.js"),
    module:{
        rules:[
            {
                test:/\.haml$/,
                use:[
                    {
                        loader:"babel-loader",
                        options:{
                            presets: ['@babel/preset-env'],
                            plugins: [require('@babel/plugin-syntax-jsx')]
                        }
                    },
                    {
                        loader:"haml-jsx-loader"
                    }
                ]   
            },
        ]
    },
    output: {
        filename:"bundle.js",
        path: path.resolve(__dirname,"/distro")
    },
};

также моя структура каталогов выглядит так

webpack
-sass(dir)
-distro(dir)
-haml(dir)
  -tamplate.haml
-node_modules
-webpack.config.js
-babel.config.js
-index.js
-package.json

любые предложения помогут! Спасибо!

Answer 1

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

Посмотрите на конфигурацию вашего babel-loader, тот факт, что вы используете React, является ключом к вашей проблеме. @babel/plugin-syntax-jsx это не то, что вы ищете. Вы должны использовать @babel/plugin-transform-react-jsx,

Честно говоря, документация по всем плагинам babel на самом деле довольно плохая.