webpack基本使用系列-js兼容性处理 babel-loader @babel/core @babel/preset-env

JS基本兼容处理：
一: 安装 babel-loader @babel/core @babel/preset-env

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

二：配置如下：

const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/js/index.js',
  output: {
    filename: 'js/built.js',
    path: resolve(__dirname, 'build')
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        options: {
          // 预设：指示babel做怎么样的兼容性处理
          presets: [
            [
              '@babel/preset-env'
            ]
          ]
        }
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    })
  ],
  mode: 'development'
};

二：以上@babel/preset-env 只能对基本js兼容处理，也就是只能转换基本语法，遇到promise高级语法不能转换

解决： 可以全部js兼容处理 安装 @babel/polyfill ,支持全部高级语法兼容转换，但是问题是我只要解决部分兼容性问题，但是将所有兼容性代码全部引入，体积太大了~

三： 最终解决方案：兼容处理只需:按需加载 ,需要安装core-js

npm i core-js -D  

做如下配置：

const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
 entry: './src/js/index.js',
 output: {
   filename: 'js/built.js',
   path: resolve(__dirname, 'build')
 },
 module: {
   rules: [
     {
       test: /\.js$/,
       exclude: /node_modules/,
       loader: 'babel-loader',
       options: {
         // 预设：指示babel做怎么样的兼容性处理
         presets: [
           [
             '@babel/preset-env',
             {
               // 按需加载
               useBuiltIns: 'usage',
               // 指定core-js版本
               corejs: {
                 version: 3
               },
               // 指定兼容性做到哪个版本浏览器
               targets: {
                 chrome: '60',
                 firefox: '60',
                 ie: '8',
                 safari: '10',
                 edge: '17'
               }
             }
           ]
         ]
       }
     }
   ]
 },
 plugins: [
   new HtmlWebpackPlugin({
     template: './src/index.html'
   })
 ],
 mode: 'development'
};