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

本文内容如下

配置es6+，react，typescript，eslint

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

---

配置打包ES6+

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

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

基本兼容性处理：

babel-loader //将webpack和babel连接
@babel-core  //babel核心库
@babel/preset-env  //babel语法转换规则

注意：基本兼容性处理只能处理简单的es6语法，还需要polyfill（补丁），以处理promise，generator等语法

---

polyfill

方案一：babel7.4之前的方案

@babel/polyfill，已经被废弃了，babel7.4版本之前使用

---

方案二：babel7.4之后，替代@babel/polyfill

生产依赖：
yarn add core-js regenerator-runtime

开发依赖：
yarn add -D babel-loader @babel-core @babel/preset-env


{
   
  "presets": [
    [
      "@babel/preset-env",
      
        //false: 不做polyfill(填充)
        //usage: 按需注入
        //entry: 根据筛选出来的浏览器polyfill(填充)
        "useBuiltIns": "usage",
        "corejs": 3 //指定corejs的版本
      }
    ],
  ],
}

---

方案三：

官网介绍

生产依赖：
yarn add @babel/runtime-corejs3

开发依赖：
yarn add -D babel-loader @babel-core @babel/preset-env @babel/plugin-transform-runtime

//polyfill补丁，兼容promise，generator等语法
@babel/runtime-corejs3   //core-js3.x版本 ，包含regenerator-runtime这个模块
@babel/plugin-transform-runtime  //@babel/runtime依赖

配置

{
   
    test: /\.js$/,
    exclude: /node_modules/,
    use: [