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'
}),
]
}