复习webpack4之EsLint配置

以前学习过webpack3的知识，可是webpack4升级后仍是有不少变更的，因此此次从新整理一下webpack4的知识点，方便之后复习。

此次学习webpack4不单单要会配置，记住核心API，最好还要理解一下webpack更深层次的知识，好比打包原理等等，因此可能会省略一些比较基础的内容，可是但愿我能够经过这次学习掌握webpack，更好地应对之后的工做。

1.使用EsLint约束代码

首先要安装EsLint。

cnpm install -D eslint
复制代码

而后生成一个配置文件。

npx eslint --init
复制代码

咱们能够经过这行命令来检测咱们src中代码是否符合规范。

npx eslint src
复制代码

若是有不少报错，咱们每一行都读报错，每个文件去修改，会变得很麻烦，因此咱们能够利用vscode装一个插件，eslint这个插件。这样编辑器就会自动帮咱们把不合规范的代码标红。

有时候咱们不想遵循某个规则，能够经过rules跳过这条规则。

编辑器会提示咱们，这是依据哪一条规则提示报错，咱们就能够拷贝这条规则，在rules配置一下。

这样就不会在报红了。

若是在某些规则中，不能使用document，须要在.eslintrc.js中增长一个配置。

2.webpack中配置EsLint

首先要安装一个loader。

cnpm install eslint-loader -D
复制代码

而后对js文件用eslint-loader

而后在devServer中增长一个配置项。

这样咱们在开发过程当中，若是有代码不符合规范，就会直接在浏览器上加一个蒙层，显示报错信息。

在检测过程当中，若是存在一些浅显的问题，咱们能够经过增长一个配置项自动修复。

eslint-loader必须在打包前执行，因此loader顺序是不能错的，若是怕顺序发生错误，能够加上force: 'pre'，保证eslint-loader加载顺序。

相似的配置项还有不少，能够对照文档再深刻了解。

3.git提交检测

在webpack中配置Eslint会影响打包速度，因此咱们还能够经过git提交代码时，触发钩子，进行eslint检测。

不过这种方式就没有办法在浏览器中“可视化”错误代码了，若是有须要能够查一下对应文档。