# webpack4-vue2

**Repository Path**: hackTony/webpack4-vue2

## Basic Information

- **Project Name**: webpack4-vue2
- **Description**: webpack4+vue2配置脱坑指北
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2019-06-09
- **Last Updated**: 2021-04-24

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

>我们已经配置好了webpack的一些基础配置，但在开发过程中，并没有对代码做校验，这时就需要用到代码校验工具

## 代码校验 eslint

### 好处
1. 提前暴露错误
2. 统一编码风格

### 安装
```
yarn add eslint@5.6.1 eslint-loader eslint-plugin-vue -D

注意：
eslint-loader@2.1.2 的版本的前置依赖
eslint的版本号  > 1.6.0 < 6.0.0
```

### 添加一个loader
```
# build\webpack.config.base.js
// eslint
{
  test: /\.(vue|js)$/i,
  enforce: 'pre',
  exclude: /node_modules/,
  loader: 'eslint-loader'
},
```

### 生成.eslintrc.js配置文件
```
node .\node_modules\eslint\bin\eslint.js --init

初始化过程中，就根据提示选择自己需要的配置就好
在询问你是否安装依赖时，可以跳过，手动安装
```
生成好的.eslintrc.js如下：
```
module.exports = {
    "env": {
        "browser": true,
        "es6": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:vue/essential"
    ],
    "globals": {
        "Atomics": "readonly",
        "SharedArrayBuffer": "readonly"
    },
    "parserOptions": {
        "ecmaVersion": 2018,
        "sourceType": "module"
    },
    "plugins": [
        "vue"
    ],
    "rules": {
    }
};
```
### 自动校验
现在如果我们再次运行打包或者dev命令，webpack会自动帮我们去根据eslint的规则校验代码质量
```
yarn run build
#
yarn run dev
```

## 跨IDE统一格式 .editorconfig
我们每个IDE的代码格式风格都不统一，有的tab缩进，有的4个空格，有的行末有空格等等...，有了这个配置，它是优先于系统的格式的，配置如下：#.editorconfig
```
root = true

[*]
indent_style = space
indent_size = 2
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true
```
这里统一定义了2个空格缩进，末尾不要空格，编码utf-8，最后插入一个空行，我们在保存文件的时候它就自己帮我们完成了


让工具来帮我们带来更好的编码体验，同时也避免不必要的错误，有好的工具为什么不用呢。