3

所以我刚刚开始在我的项目中使用 webpack。我正在使用 webpack 尝试将我的 haml 模板编译为 jsx 以响应元素。为此，我使用了 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

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

4

1 回答 1

0

这个问题与haml本身没有任何关系。加载器很好，除了其中一个无法解析 - 因此加载 - 给定文件。

看看你的 babel-loader 配置，你使用 React 的事实是你问题的关键。@babel/plugin-syntax-jsx不是你要找的。你应该使用@babel/plugin-transform-react-jsx.

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

于 2018-10-06T10:30:56.580 回答