webpack学习：配置es6+，react，typescript，eslint

本文内容如下

配置es6+，react，typescript，eslint

如果你都有了答案，可以忽略本文章，或去webpack学习导图寻找更多答案

---

配置打包ES6+

部分浏览器只认识es5的语法，如果要使用es6以上的语法，需要配置

注意：在根目录新建 .babelrc，用于配置es6以上的语法兼容§，webpack会自动检测有没有 .babelrc 文件，如果有则按里面的配置加载，和写在module里的效果是一样的

yarn add @babel/runtime
yarn add -D babel-loader @babel-core @babel/preset-env @babel/plugin-transform-runtime @babel/runtime-corejs3

//基本兼容性处理
babel-loader //将webpack和babel连接
@babel-core  //babel核心库
@babel/preset-env  //babel语法转换规则

//polyfill补丁，兼容promise，generator等语法
@babel/runtime
@babel/runtime-corejs3
@babel/plugin-transform-runtime


{
    test: /\.js$/,
    exclude: /node_modules/, // 要排除的模块
    use: ['babel-loader'],
},


//.babelrc
{
    "presets": [
        [
            "@babel/preset-env"
        ]
    ],
    "plugins": [
        [
            "@babel/plugin-transform-runtime",
            {
                "sbsoleteRuntime": false,
                "corejs": 3,
                "helpers": true,
                "regenerator": true,
                "useESModules": false
            }
        ]
    ]
}

---

配置打包react

稍微修改配置打包ES6+中的代码即可

yarn add -D @babel/preset-react
yarn add react react-dom


//同样使用babel-loader处理
{
    test: /\.js?x$/,
    exclude: /node_modules/, // 要排除的模块
    use: ['babel-loader'],
},



//.babelrc
{
    "presets": [
        [
            "@babel/preset-env"
        ],
        [
            "@babel/preset-react" //react处理
        ]
    ],
    "plugins": [
        [
            "@babel/plugin-transform-runtime",
            {
                "sbsoleteRuntime": false,
                "corejs": 3,
                "helpers": true,
                "regenerator": true,
                "useESModules": false
            }
        ]
    ]
}

---

配置打包typescript

两种做法：

1. ts-loader，使用ts-loader无法识别高阶语法
2. 使用babel-loader，使用编辑器帮助检测ts语法，个人感觉都不是很好的解决方案

yarn add 

{
    test: /\.(t|j)sx?$/,
    exclude: /node_modules/,
    use: ['babel-loader'],
},

//.babelrc
{
    "presets": [
        [
            "@babel/preset-env"
        ],
        [
            "@babel/preset-react"
        ],
        [
            "@babel/preset-typescript" //typescript
        ]
    ],
    "plugins": [
        [
            "@babel/plugin-transform-runtime",
            {
                "sbsoleteRuntime": false,
                "corejs": 3,
                "helpers": true,
                "regenerator": true,
                "useESModules": false
            }
        ]
    ]
}

---

配置打包eslint

webpack 4.x

注意：这里也检测了typescript，不需要可以不用安装typescript的依赖

yarn add -D eslint eslint-plugin-import eslint-loader eslint-plugin-react @typescript-eslint/parser @typescript-eslint/eslint-plugin


module:{
    rules:[
        {  
            test:/\.js$/,
            exclude: /node_modules/, //排除第三方库，只检测自己写的代码
            enforce:'pre',  //优先执行，避免先兼容，再检查，正确顺序是先检查，再兼容
            loader:'eslint-loader',
            options:{
                fix:true  //自动修复
            }
       }
    ]
}   


配置package.json 或者 添加在根目录添加.eslintrc 文件
"eslintConfig":{
    "extends":"airbnb-base"
}

webpack 5.x

使用 eslint-webpack-plugin 替代 eslint-loader，写法改变

注意： 配置你需要的规则，在根目录新建 .eslintrc 文件，规则参考eslint，比如缩进，分号等等，都可以个性化配置

yarn add -D eslint eslint-plugin-import eslint-webpack-plugin eslint-plugin-react @typescript-eslint/parser @typescript-eslint/eslint-plugin

const ESLintPlugin = require('eslint-webpack-plugin');

plugins: [
    new ESLintPlugin({
      fix: true,
      extensions: ['js', 'jsx', 'json', 'ts', 'tsx'],
      exclude: '/node_modules/',
    }),
],


//.eslintrc
// - off 或者 0: 关闭该规则
// - warn 或者 1: 将规则打开为警告（不影响退出代码）
// - error 或者 2: 将规则打开为错误（触发时退出代码）
{
    "root": true, //多个eslint文件时，以这个为标准
    "extends": [
        "eslint:recommended",
        "plugin:react/recommended",
        "plugin:@typescript-eslint/recommended"
    ],
    "globals": { //全局变量
        "window": true,
        "document": true
    },
    "env": {
        "browser": true, //使用环境: browser/node
        "es2021": true,
        "node": true
    },
    "parser": "@typescript-eslint/parser",
    "parserOptions": { //解析器选项
        "ecmaFeatures": {
            "jsx": true
        },
        "ecmaVersion": 12,
        "sourceType": "module"
    },
    "plugins": [
        "react",
        "@typescript-eslint"
    ],
    "rules": {
        "no-console": 0, //是否允许console.log
        "indent": [ //缩进
            2,
            4
        ],
        "@typescript-eslint/no-var-requires": 0
    }
}

---

总结：

---

学习更多

webpack学习导图