webpack配置haml

Question

所以我刚开始用webpack做我的项目。我正在使用webpack尝试编译我的haml模板到jsx来反应元素。为此，我使用了haml和babel装载机。

所以，当webpack去加载.haml模板时，我现在遇到的问题就出现了。我一直得到这个错误“模块解析失败:意外标记。您可能需要一个适当的加载程序来处理这个文件类型”。是什么阻止了haml加载程序正确工作，但正如我说的那样，我对webpack来说是个新手，所以如果这是我的webpack配置文件或者其他什么的话，我就无所事事了。所以我才来找你们！

下面是我的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

这个问题与haml本身没有任何关系。加载器是很好的，只是其中一个不能解析--因此也不能加载--给定的文件。

看看您的babel-加载程序配置，您使用的React是解决问题的关键。@babel/plugin-syntax-jsx是，而不是，是你要找的东西。您应该使用@babel/plugin-transform-react-jsx。

老实说，所有babel插件的文档实际上都很糟糕。