复习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检测。

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

转载于:https://juejin.im/post/5ce3dbd1e51d454f72302461