webpack+react问题汇总

1. class和for这两个属性，JSX语法最终是要被转换为纯Javascript的，所以要和在Javascript DOM中一样，用className和htmlFor。

2. 在创建HTML标准内的元素时，JSX转化器会丢弃那些非标准的属性，如果一定要添加自定义属性，那么需要在这些自定义属性之前添加data-前缀

3. 单标签需要封闭，如<img>要写成<img/>

【"JSX elements must be wrapped in an enclosing tag" 错误】

JSX语法规定，JSX必须要用一个enclosing tag包起来，注意，是一个，而且必须有闭合，比如<img />。

比如：

<div>

    ...这里写HTML语法

</div>

下面是错误的，因为是两个<div>了：

<div>123</div>

<div>234</div>

【想要把一些公共的JS放到modules文件夹外，供其他项目使用，但babel-loader只能对modules文件夹里的有效】

配置webpack.config.js的module.loaders时，添加exclude，如：

module: {
        loaders: [
            {
                test: /\.js$/, loader: 'babel-loader',
                exclude: /(node_modules|bower_components|ppaweb\\libs\\webpack)/
            },
            { test: /\.less$/, loader: 'style-loader!css-loader!less-loader' }, // use ! to chain loaders
            { test: /\.css$/, loader: 'style-loader!css-loader' },
            {test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'} // inline base64 URLs for <=8k images, direct URLs for the rest
        ]
    }

【JSX里，不能用if-else语句】

因为JSX只是语法调用和对象创建的语法糖，不能使用if-else等语句，需要改成三元运算符。

【JSX里style值是对象】

<div className="detail-header" style={{background: "#fff", "padding-top": 146, "padding-bottom": 5}}>