webpack系列之编译ES6 / ES7

1.首先安装编译es6的包

npm install babel-loader@8.0.0-beta.0 @babel/core @babel/preset-env webpack

2.编写配置文件

module.exports={
    entry:{
        app:'./app.js'
    },
    output:{
        filename:'[name].[hash:8].js'
    },
    module:{
        rules:[
            {
              test:/\.js$/,
              use:{
                loader:'babel-loader',
                options:{
                    presets:[
                        ['@babel/preset-env',
                        {
                           targets:{

                              browsers:['> 1%','last 2 versions']
                              //chrome:'52'
                              //设置浏览器支持
                           }    
                        }]
                    ]
                }
              },
              exclude:'/node_modules/'
              //不编译的文件夹，为了提高编译效率
            }
        ]
    }
}

3.关于es6的兼容

在步骤二中，在编译js的规则里有这个“preset-env”的配置项。它的作用是对ES6的一些语法做兼容，确保浏览器能正常解析代码。
但是preset-env也只能兼容一下语法方面，但是新增的函数方法却无能为力

这个时候就需要用到了Babel Polyfill

1，Babel Polyfill ：

特点：全局垫片
为开发应用准备
会污染全局，这个包其实就是对ES6新增的函数的一个实现，并把函数挂载到全局环境中

如何使用：

npm install babel-polyfill --save

然后在app.js里引入

import 'babel-polyfill'

接下来就可以 正常使用es6的方法了

2.Babel Runtime Transform

特点：局部垫片
为开发框架准备

如何使用：

npm install @babel/plugin-transform-runtime  --save-dev

npm install @babel/runtime --save

新建.babelrc文件配置

{
    "presets":[
        ["@babel/preset-env",{
            "targets":{

                    "browsers":["> 1%","last 2 versions"]
            }   
        }]
    ],
    "plugins":["@babel/transform-runtime"]
}

webpack.config.js:

module.exports={
    entry:{
        app:'./app.js'
    },
    output:{
        filename:'[name].[hash:8].js'
    },
    module:{
        rules:[
            {
              test:/\.js$/,
              use:{
                loader:'babel-loader'
              },
              exclude:'/node_modules/'
            }
        ]
    }
}