15babel转换ES6

Babel的安装和配置

Babel其实是几个模块化的包，其核心功能位于称为babel-core的npm包中，webpack可以把其不同的包整合在一起使用，对于每一个你需要的功能或拓展，你都需要安装单独的包（用得最多的是解析ES6的babel-preset-es2015包和解析JSX的babel-preset-react包）

1. 安装这些依赖包：
   

   npm install –save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react

2. 在webpack.config.js里面配置babel

{
    test:/\.(jsx|js)$/,
    use:{
        loader:'babel-loader',
        options:{
            presets:[
                "es2015","react"
            ]
        }
    },
    exclude:/node_modules/
}

1. 修改entry.js里面的代码

import css from './css/index.css';
import less from './css/black.less';
import sass from './css/sassLe.scss'
{
    let String = 'Hello webpack'
    document.getElementById('title').innerHTML=String; 
}

1. 删除dist文件夹，再进行webpack（为了避免出错）
2. .babelrc配置:
   babel具有非常多的配置选项，如果卸载webapck.config.js中会非常的雍长不可阅读，所以我们经常把配置卸载.babelrc文件里。

在webpack根目录下创建一个.babelrc文件

{
“presets”:[“react”,”es2015”]
}

删除webpack.config.js里面的babel中的options属性
6. 删除dist文件夹，进行webpack进行打包

ENV:

现在网络上已经不流行babel-preset-es2015，现在官方推荐使用的是babel-preset-env

第一步：env的配置：
安装babel-preset-env

npm install –save-dev babel-preset-env
第二步：修改.babelrc的配置文件，把es2015换成env

{
    "presets":["react","env"]
}