webpack+react+eslint

eslint目标是以可扩展，每条规则独立，不内置编码风格为理念的lint工具，用户可以定制自己的规则做成公共包

eslint主要有以下特点：

1）默认规则包含所有的jslint，jshint中存在的规则易迁移

2）规则可配置性高，可设置警告，错误两个error等级，也可以直接禁用

3）包含代码风格检测的规则

4）支持插件扩展，自定义规则

针对react开发者，eslint已经可以很好的支持jsx语法了。

我们从react应用中怎么配置开始说起，还是基于上一个博客的demo（http://blog.csdn.net/jasonzds/article/details/63326342）项目说起，首先npm安装必要的包

npm i eslint eslint-loader --save-dev

接着安装3个第三方配制好的插件，在这里使用airbnb开发配置合集eslint-config-airbnb这个配置有3个插件

npm i eslint-config-airbnb --save-dev

npm i eslint-plugin-import eslint-plugin-react eslint-plugin-jsx-a11y --save-dev

5）配置.eslintrc文件

{
    "extends":"airbnb",
    "rules":{
        "comma-dangle":["error","never"]
    }
}

意思就是直接继承airbnb的配置规则，同时也可以写入自己的特定规则，后面的内容会覆盖默认的规则，

把eslint加入web pack

preloaders: [
            {
                test: /\.js?$/,
                loaders: ['eslint'],
                include: APP_PATH
            }
        ],

最后的web pack.config.js文件是

var path = require('path');
var webpack = require('webpack');
var HtmlwebpackPlugin = require('html-webpack-plugin');
var ROOT_PATH = path.resolve(__dirname);
var BUILD_PATH = path.resolve(ROOT_PATH, 'build');
var APP_PATH = path.resolve(ROOT_PATH, 'app');

module.exports = {
    entry: {
        app: path.resolve(APP_PATH, 'app.js')
    },
    output: {
        path: BUILD_PATH,
        filename: '[name].bundle.js'
    },
    resolve: {
        extensions: ['', '.js', '.jsx'],
        root: APP_PATH
    },
    module: {
        preloaders: [
            {
                test: /\.js?$/,
                loaders: ['eslint'],
                include: APP_PATH
            }
        ],
        loaders: [
            {
                test: /\.js?$/,
                loaders: ['babel-loader'],
                include: APP_PATH
            }
        ]
    },
    plugins: [
        new HtmlwebpackPlugin({
            title: 'demo',
            filename: 'index.html'
        }),
    ]
}