新项目配置webpack,js语法es6,7,8=＞es5,兼容ie浏览器及安卓手机端

webpack 3.x | babel-loader 8.x | babel 7.x
npm install -D babel-loader @babel/core @babel/preset-env webpack

webpack 3.x babel-loader 7.x | babel 6.x
npm install -D babel-loader babel-core babel-preset-env webpack
(上面是不同版本的依赖关系,比如安装了babel-loader 7.x,去安装babel-core,会报错)

package.json		//这些babel包都尽量安装最新的,确保下面几个包都有
{
    "devDependencies": {
        "@babel/core": "^7.10.5",
        "@babel/plugin-transform-runtime": "^7.10.5",
        "@babel/preset-env": "^7.10.4",
        "core-js": "^3.6.5",
        "babel-loader": "^8.1.0",
    },
    "dependencies": {
    	"@babel/runtime": "^7.10.5",//必须有的,按需加载
    }
}




webpack.dev.config.js/webpack.pro.config.js
module.exports = {
  devtool: 'source-map',
  mode: process.env.NODE_ENV === 'production' ? 'production' : 'development',
  entry: {},
  output: {..},
  plugins:[...],
  module: {
    rules: [
     ......其他loader配置
      {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {//需要添加option设置,否则编辑不会成功
            presets: ['@babel/preset-env']
          }
        }
      }//当配置里面引入babel-loader,webpack会自动去项目目录下找babel.config.json || .babelrc( .babelrc.json)的文件配置
      //如果没有配置babel-loader,项目s不会去执行.babelrc的配置
    ]
  },



.babelrc内的设置(复制时,不要把注释复制过去)
{
  "presets": [
    [
      "@babel/preset-env",//根据环境自动转换
      {
        "targets": {
          "chrome": "58",
          "ie": "11"
        },
        "useBuiltIns": "usage"//开启按需加载,默认值false(全局引入)
      }
    ]
  ],
  "plugins": [
    "@babel/plugin-transform-runtime"//这个插件包会在运行时自动去引用需要加载的corejs新api引用,不至于全局污染
  ]
}
//使用了babel-runtime后,不需要我们手动设置babel-polyfill,官方不推荐使用@babel/polyfill

如果创建的项目是使用vue或者react等脚手架直接创建的,那么就不需要进行上面的插件包配置,官方已经帮忙进行babel集成,处理的非常好了,
上面适合用于普通集成项目,babel进行定期更新,es的新提案语法一旦运用,才能兼容到最新api