Babel的安装和配置
Babel其实是几个模块化的包,其核心功能位于称为babel-core的npm包中,webpack可以把其不同的包整合在一起使用,对于每一个你需要的功能或拓展,你都需要安装单独的包(用得最多的是解析ES6的babel-preset-es2015包和解析JSX的babel-preset-react包)
- 安装这些依赖包:
npm install –save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react
- 在webpack.config.js里面配置babel
{
test:/\.(jsx|js)$/,
use:{
loader:'babel-loader',
options:{
presets:[
"es2015","react"
]
}
},
exclude:/node_modules/
}
- 修改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;
}
- 删除dist文件夹,再进行webpack(为了避免出错)
- .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"]
}