如何设置 webpack.config 以在 Reactjs 中使用 jsx-html-class答案

【问题标题】：How to setup webpack.config to use jsx-html-class in Reactjs如何设置 webpack.config 以在 Reactjs 中使用 jsx-html-class
【发布时间】：2016-12-13 20:27:37
【问题描述】：

我已经通过npm 安装了jsx-html-class 包，但我不确定如何修改我的 webpack.config.js 文件以使用它。

var webpack = require("webpack");
var path = require("path");

module.exports = {
    context: path.join(__dirname, "src"),
    entry: "./js/index.js",
    module: { 
        loaders: [
            {
                test:/\.jsx?$/,
                exclude: "node_modules",
                loader: "babel-loader",
                query: {
                            presets:["react", "es2015", "stage-0"],
                            plugins:["transform-decorators-legacy", "jsx-html-class"]
                }
            }
     ]
    },
    output: {
        path: __dirname + "/src/",
        filename: "bundle.js"
    }
};

【问题讨论】：

你不是说jsx-html-class 吗？ npmjs.com/package/jsx-html-class 。还有..你真的真的需要这个吗？写className
我的错，我的意思是jsx-html-class，这实际上是我下载的包。我不是绝对需要它，但为了更容易阅读，我更愿意拥有它，现在我只想知道如何只是为了知道。
你尝试运行 webpack 时遇到什么错误？
如果我在我的plugins 中包含jsx-html-class，我会得到错误：Module build failed: TypeError: babel.Transformer is not a contstructor at module.exports (C:\Users\owner\Desktop\Reduxstagram\node_modules\jsx-html-class\index.js:2:10 如果我从plugins 中删除jsx-html-class，我会得到错误：Warning: Unknown DOM property class. Did you mean className? 或

标签： reactjs npm webpack

【解决方案1】：

我用这个解决了同样的问题：

npm install --save-dev babel-plugin-react-html-attrs

然后将其添加到您的 webpack 配置中：

loaders: [{
    test: /\.js?$/,
    loader: 'babel-loader',
    query: {
        presets: ['react', 'es2015'],
        plugins: ['react-html-attrs']
    }
}]

或通过 .babelrc

{
  "plugins": [
    "react-html-attrs"
  ]
}

【讨论】：