11-webpack生成环境 js语法检查eslint

eslint 是一个开源的 js 代码检查工具，初衷是为了让程序员可以创建自己的检测规则。实际生产中，团队内往往会制订一套统一的标准，让整个团队的编码风格达到一致。
eslint 其实与 webpack 没有任何关系，两者并不互相依赖，甚至一般情况下我们并不会在 webpack 中进行 eslint 的配置，可以单独使用。
语法检查使用eslint-loader， 并基于eslint包，只用来检查js语法。
注意只检查自己写的js源代码， 第三方库是不用检查的， 可以在npmjs.com中查看规则。
需要使用js来的规则库来检查代码 “airbnb”， 需要eslint-config-airbnb-base和eslint-plugin-import 两个包

1. 下载
   npm i eslint-loader eslint eslint-config-airbnb-base eslint -plugin-import -D

2. package.json加入

  "eslintConfig": {
    "extends": "airbnb-base"
  }

3. webpack.config.js加入

module: {
  //eslint只检查js语法，不检查第三方包
   test: /\.js$/,
   exclude: /node_module/,               //只要node_module目录下的js都排除，这里面都是第三方库
   loader: "eslint-loader"
}

4.执行webpack
检查语法错误

一个个修改比较麻烦，可设置自动修复

module: {
   //eslint只检查js语法，不检查第三方包
      test: /\.js$/,
      exclude: /node_module/,               //只要node_module目录下的js都排除，这里面都是第三方库
      loader: "eslint-loader",
      options: {
          fix: true         //自动修复
      }
}

再执行webpack
大部分非逻辑性的错误都可被修改

有些还可以在js文件中加入

// 下一行eslint所有规则失效
// eslint-disable-next-line
console.log('这是入口文件,11111')