Question

因此，我刚刚开始将webpack用于我的项目。我正在使用webpack尝试将haml模板编译为jsx以响应元素。为此，我使用了haml-jsx和babel-loader加载程序。

所以，当webpack加载.haml模板时，我现在遇到的问题出现了。我不断收到此错误“模块解析失败：意外的令牌。您可能需要适当的加载程序来处理此文件类型”。 idk是阻止haml-jsx加载程序正常工作的原因，但是正如我所说的，我是webpack的新手，所以idk是它是我的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-loader配置时，您正在使用React的事实是问题的关键。 @babel/plugin-syntax-jsx不是您要的内容。您应该使用@babel/plugin-transform-react-jsx。

说实话，实际上所有babel插件的文档都非常糟糕。

用于haml的webpack配置

1 个答案: