eslint 配置_WebPack基础入门(三)：配置eslint

前言

代码规范对于个人开发和团队开发来说都是非常重要的一个环节，在开发之前团队就应该定义完项目中开发时需要遵守的规范。对于前端开发来说eslint 是专门来解决团队开发中每个人随心所欲的编写代码产生的问题。也强制我们必须遵守那些规则。

ESLint最初是由Nicholas C. Zakas 于2013年6月创建的开源项目。它的目标是提供一个插件化的javascript代码检测工具。

简单的说，eslint就是一个能够帮我们检查我们代码的格式、语法，从而来规范前端开发团队在开发流程中的代码。

正文

Eslint

1. 安装 eslint

npm i -D eslint

2.初始化eslint 配置文件

npx eslint --init # 如果不知道 npx 是什么可以看第一章
# 之后， 根据提示选择相应的选项

在使用 eslint --init 后，会出现很多用户配置项，具体可以参考：eslint cli 部分的源码。

经过一系列一问一答的环节后，你会发现在你文件夹的根目录生成了一个 .eslintrc.js 文件。

配置的话这里就不写了，可以查看eslint 配置

mode

在webpack的配置中，其他配置都可以没有！但是mode是必备的，如果不加mode，官方虽然会打包，但同时也会给你一个警告：

mode 一共有三个参数 production, development, none。当不写mode 的时候 也就是 none的情况，系统就会给一个默认的production模式。
development：开发模式
production: 生产模式
如何在打包的时候区分这两个模式，下一节再说，这节说一下区分这两个模式的必要性devtool

此选项控制是否生成，以及如何生成 source map。

配置如下:

devtool:'',

这个配置时可以对打包后的代码进行映射，找到出错的地方。根据上图可以看出配置devtool 会对打包的速度有影响。

当我们运行yarn run dev 的时候，执行的命令是webpack-dev-serve，这个命令也对我们源代码进行打包，只不过没有生产dist，存在于内存中，属于开发环境，这时候配置devtool，在开发的过程中很容易找到出错的地方。但是在生产环境下，这个功能就显得有些多余，而且会影响到打包速度。所以在打包的时候要区分mode， 根据不同的 mode 进行配置打包。

resolve

这些选项能设置模块如何被解析。webpack 提供合理的默认值，但是还是可能会修改一些解析的细节。关于 resolver 具体如何工作的更多解释说明，请查看模块解析。

这里只说三个参数

# 配置
resolve:{
  # 自动解析确定的扩展,能够使用户在引入模块时不带扩展
 extensions: [".js", ".jsx"]
  # 解析目录时要使用的文件名。
  mainFiles:['index']
  # 创建别名以更容易地导入或要求某些模块
  alisa:{
    # 在项目中使用 @ 表示 src 路径
    '@':path.resolve(__dirname, 'src')
  }
}
# 根据上面的配置，下面表示 从 src 路径下 component/temp 的目录里面引入 index.js 如果没有 就查找 index.jsx 如果都没有就报错。
import TempComponent from '@/component/temp'

作者：编程琐事
链接： https:// juejin.im/post/68874802 79155769351
来源：掘金