webpack打包用Babel处理es6

今天来梳理下webpack中关于js打包的处理方式，首先我们都知道需要处理es6+的编译就要用到babel,那什么是babel呢？

Babel是JavaScript编译器，能将ES6代码转换成ES5代码，让我们开发过程中放⼼使⽤JS新特性⽽不⽤担 ⼼兼容性问题。但是默认的Babel只⽀持let等⼀些基础的语法转换，Promise等特性无法转换，这时候需要借助@babel/polyfill，把es的新特性都装进来，来弥补低版本浏览器中缺失的特性。

1、安装babel

npm i babel-loader @babel/core @babel/preset-env -D

2、插件说明

这里我们先说明下babel-loader,他不是用来做es6转义的，它是babel与webpack的通信桥梁，我们需要转义需要用到@babel/preset-env，这里安装的@babel/core其实就是bable(目前的babel版本是7.X),下面是来自babel官网的关于不同类型的语法转移插件：

es6+ ----->@babel/presets-env --> es5
flow语法 ---->@babel/presets-flown -->es5
jsx语法 ---->@babel/preset-react -->es5
ts语法 ---->@babel/preset-ts -->es5

3、一般我们会在webpack.config.js文件中做如下配置：

{
    test: /\.js$/,
    exclude: /node_modules/,
    use: {
        loader: "babel-loader",
        options: {
            presets: ["@babel/preset-env"]
        }
    }
}

4、关于@babel/polyfill使用

上文提到了babel不能转义的es6+的特性，这里我们就需要一个垫片插件来辅助转义的实现。

4.1 安装（因为在生产环境也需要依赖使用）

npm install --save @babel/polyfill

4.2 使用

//index.js 顶部
import "@babel/polyfill";

这种方式打包会发现打包的体积增大了很多，因为polyfill默认会把所有的特性注入进来，那么能不能按需加载呢？这里我们就要使用到babel7的新功能，useBuiltIns,它有三个参数可选：

//需要在 webpack 的⼊⼝⽂件⾥ import "@babel/polyfill" ⼀次。 babel
会根据你的使⽤情况导⼊垫⽚，没有使⽤的功能不会被导⼊相应的垫⽚
useBuiltIns: "entry",  
// 按需注⼊,不需要 import ，全⾃动检测，但是要安装 @babel/polyfill 
useBuiltIns: "usage",  
 //如果你 import "@babel/polyfill" ，它不会排除掉没有使⽤的垫⽚，程序体积会庞⼤。(不推荐)
useBuiltIns: "false" 

那么这个特性要怎么配置呢，有以下两种方式：

// 第一种：在webpack.config.js中配置
options: {
    presets: [
        [
            "@babel/preset-env",
            {
                targets: {
                    edge: "17",
                    firefox: "60",
                    chrome: "67",
                    safari: "11.1"
                },
            corejs: 2,//新版本需要指定核⼼库版本
            useBuiltIns: "usage"//按需注⼊
            }
        ]
    ]
}

// 第二种: 新建.babelrc⽂件，把options部分移⼊到该⽂件中
{
    presets: [
        [
            "@babel/preset-env",
            {
                targets: {
                    edge: "17",
                    firefox: "60",
                    chrome: "67",
                    safari: "11.1"
                },
                corejs: 2, //新版本需要指定核⼼库版本
                useBuiltIns: "usage" //按需注⼊
            }
        ]
    ]
}

注意：这里有个需要注意的问题是如果你使用了比较高版本的，比如es11这种特性，就需要使用corejs 3.x的版本了，他会比2多一些新特性。

5、既然上文提到了vue\react的语法转义，那下面就来解析下使用方式：

5.1 安装babel与react转换的插件

npm install --save-dev @babel/preset-react

在babelrc⽂件⾥添加：

"@babel/preset-react"

5.2 安装babel与vue转换的插件

npm install -D vue-loader vue-template-compiler

// webpack.config.js
const { VueLoaderPlugin } = require('vue-loader')

module.exports = {
  module: {
    rules: [
      // ... 其它规则
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      }
    ]
  },
  plugins: [
    // 请确保引入这个插件！
    new VueLoaderPlugin()
  ]
}

以上仅为自己学习过程中的了解，欢迎指正！