概念
在团队中，每个人的代码风格都不尽相同。自然的，提交到代码库里的代码也就风格多样。
这不是一个好事，统一的代码风格有助于团队成员理解他人写的代码，也易于维护。
那么想要所有人的代码风格统一，我们就需要用到ESLint。
使用
首先得要安装eslint：
yarn add eslint
然后进行ESLint的初始化：
npx eslint --init
初始化过程会让我们根据实际情况做几个选择，例如我们用的模块引入方式、用了什么框架、有没有用TypeScript之类的。
接着在项目根目录下就会生成一个.eslintrc.js文件：
module.exports = {
env: {
browser: true,
es6: true,
},
extends: [
'airbnb',
],
globals: {
Atomics: 'readonly',
SharedArrayBuffer: 'readonly',
},
parserOptions: {
ecmaFeatures: {
jsx: true,
},
ecmaVersion: 2018,
sourceType: 'module',
},
plugins: [
'react',
],
rules: {
},
};
这个时候就可以通过npx eslint src(源码目录)来对代码进行一个检查了：
实际上，如果用的是VS Code这样的IDE，可以去安装一个ESLint的插件：
这样一旦代码出现什么不符合在ESLint中设置的代码风格的情况就会在对应代码下出现红色波浪线提醒。
说了这么久似乎跟Webpack也没什么关系。也确实，ESLint与Webpack的确是没什么关系的，不过如果我们想在Webpack打包过程中对代码进行一个风格检查就有关系了。
为了做到这一点，我们需要eslint-loader这个loader。
安装之后，对Webpack的配置文件进行配置：
{
...,
module: {
rules: [
{
test: /\.jsx$/,
exlcude: /node_modules/,
use: ['babel-loader', 'eslint-loader']
}
]
}
}
这样再次打包就可以在命令行中看见代码风格检测出的问题了。
不过这样有个问题，这跟通过npx eslint src没有区别。
解决这个问题可以通过将devServer.overlay设置为true解决。注意：模式要是在开发模式下。
那么这个配置项的作用就是将编译过程中出现的所有ERROR显示在网页中：
如果还想显示WARNING，则这样设置：
{
devServer: {
overlay: {
errors: true,
warnings: true
}
}
}