用于 haml 的 webpack 配置答案

【问题标题】：webpack config for haml用于 haml 的 webpack 配置
【发布时间】：2018-09-11 01:33:09
【问题描述】：

所以我刚刚开始在我的项目中使用 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

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

【问题讨论】：

请创建一个最小的 repo 来重现问题。
你使用的是什么版本的 webpack？您还可以发布错误的整个堆栈跟踪吗？
你能把loader:"haml-jsx-loader"换成loader:"haml-jsx"看看能不能用吗？

标签： javascript webpack webpack-loader

【解决方案1】：

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

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

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

【讨论】：