webpack js兼容处理

webpack在不需要引入任何loader可以对于js进行打包处理，但是它不会对于js兼容性进行任务的处理，而我们编写的项目是需要在不同的浏览器中运行的，此时就需要对于js的兼容性在打包过程中进行对应的处理。使用babel来完成对应的js兼容处理

# 早期使用 @babel/polyfill 来完成，但是当只要解决部份兼容性问题，它还是将所有兼容性代码全部引入，体积太大，不推荐使用了

# 推荐使用如下方案，按需加载进行兼容性处理

npm i -D babel-loader @babel/core @babel/preset-env core-js(3)

 

 

# loader配置
module: {
  rules: [
    // js兼容处理
    {
      test: /\.js$/,
      // 排除
      exclude: /node_modules/,
      loader: 'babel-loader',
      options: {
        presets: [
          [
            '@babel/preset-env',
            {
              // 按需加载  inital  enter uage
              useBuiltIns: 'usage',
              // 指定core-js版本
              corejs: 3,
              // 兼容性做到哪个版本的浏览器
              targets: {
                chrome: '80',
                firefox: '50',
                ie: '9',
                safari: '10',
                edge: '17'
              }
            }
          ]
        ]

    }

    }

  ]

}