你真的了解babel-loader，eslint-loader，.eslintrc吗

webpack+react项目引入了eslint和eslint-loader，编译后发现报错如下

WARNING in ./src/scripts/app/head/index.js
Module Warning: Module Warning (from ./node_modules/eslint-loader/index.js):

/Users/wr/Documents/workspace/sharetome-adminv3.0/src/scripts/app/head/index.js
41:26 warning Unexpected trailing comma comma-dangle

✖ 1 problem (0 errors, 1 warning)
0 errors, 1 warning potentially fixable with the `--fix` option.

.eslintrc配置如下

{
    "parser": "babel-eslint",
        "rules": {
        "comma-dangle": ["error", "only-multiline"]
    }
}

按照报错提示对src/scripts/app/head/index.js进行修改后发现无效，仍报错如图一。

修改.eslintrc的配置："comma-dangle": 0，禁用comma-dangle规则，发现仍然无效，甚至是删除.eslintrc配置文件，仍然顽固不化的报错。

于是仔细梳理了babel-loader，eslint-loader，.eslintrc之间的关联

因为在项目中使用了Es6语法，所以我们引入了babel-loader，在webpack中对js文件增加了相关规则：

module: {
    rules: [{
        test: /\.(js|jsx)$/,
        exclude: [/node_modules/],
        use: {
            loader: 'babel-loader',
            options: {
                sourceMap: true,
                plugins: [
                    "add-module-exports",
                    ['import', { libraryName: "antd", style: 'css' }]
                ]
            }
        }
    }]
}

随后增加了对js文件的eslint校验规则：

npm install eslint-loader eslint --save-dev

{
    test: /\.js$/,
    use: ['eslint-loader'],
    exclude: [/node_modules/]
}

在项目根目录下创建.eslintrc文件，配置如上，此时运行项目发现.eslintrc配置并未生效，如文章开头所述。

这里解释下"parser": "babel-eslint"配置的含义:
eslint允许常规解析器，有一些babel语法没有被eslint支持。当使用这些插件时，你的代码要转换成eslint能够支持解析的代码格式

.eslintrc不起作用的关键原因是因为规则配置的顺序问题

划重点：eslint-loader规则必须要先于babel-loader规则

我们使用eslint-loader是为了对编译前的ES6语法进行检查，而不是对使用了babel编译后的语法进行检查。所以在webpack中，eslint-loader规则要优先于babel-loader规则：

module: {
    rules: [{
        test: /\.js$/,
        use: ['eslint-loader'],
        exclude: [/node_modules/]
    },
    {
        test: /\.(js|jsx)$/,
        exclude: [/node_modules/],
        use: {
            loader: 'babel-loader',
            options: {
                sourceMap: true,
                plugins: [
                    "add-module-exports",
                    ['import', { libraryName: "antd", style: 'css' }]
                ]
            }
        }
    }]
}

或者对eslint-loader规则增加enforce: 'pre'配置：

module: {
    rules: [{
        test: /\.(js|jsx)$/,
        exclude: [/node_modules/],
        use: {
            loader: 'babel-loader',
            options: {
                sourceMap: true,
                plugins: [
                    "add-module-exports",
                    ['import', { libraryName: "antd", style: 'css' }]
                ]
            }
        }
    },
    {
        test: /\.js$/,
        use: ['eslint-loader'],
        exclude: [/node_modules/],
        enforce: 'pre'
    }]
}

顾名思义，预处理eslint-loader规则

附ESLint中文文档：http://eslint.cn/docs/rules/comma-dangle