webpack配置用于haml

Question

所以我刚开始使用webpack来处理我的项目。我正在尝试使用webpack将我的haml模板编译为jsx到react元素。为此，我使用了haml-jsx和babel-loader加载器。

现在出现的问题是，当webpack加载.haml模板时，我一直收到这个错误：“模块解析失败：意外的标记。您可能需要一个适当的加载器来处理此文件类型”。我不知道是什么阻止了haml-jsx加载器的正常工作，但正如我所说，我对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

任何建议都将有所帮助！谢谢！

涉及IT技术相关内容。

- Leviathan_the_Great

---

请创建一个最小化的仓库以重现问题。 - Alexandre Borela

你使用的webpack版本是什么？另外，你能否发布完整的错误堆栈跟踪信息？ - Dipen Shah

你能否将 loader:"haml-jsx-loader" 替换为 loader:"haml-jsx"，看看是否可行？ - Dipen Shah

Answer 1

这个问题与 haml 本身无关。加载器都没问题，除了其中一个无法解析 - 因此无法加载 - 给定的文件。

查看您的 babel-loader 配置，您使用 React 是导致问题的关键。@babel/plugin-syntax-jsx 不是您要寻找的东西。您应该使用 @babel/plugin-transform-react-jsx。

说实话，所有 babel 插件的文档都相当糟糕。

- naeramarth7