webpack——bable-loader,core,preset,编译es6

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

//文件夹，在命令行中
npm init

之后可以一直回车，答y

出现文件

然后安装bable

npm install -save-dev babel-loader babel-core

文件

然后我们在文件里面添加一些该有的文件，app.js,index.html,webpack.config.js

我们在webpack.config.js中写如下代码：

module.exports={
entry:{
app:'./app.js'
},
output:{
filename:'[name].[hash:8].js'
},
module:{
//rules下的每一项是一个规则
rules:[
{
test:/\.js$/,//一个正则
use:'babel-loader',//如果符合正则的资源，会使用use来处理它
exclude:'/node_modules/',//exclude是排除之外的，意思是node_modules不用执行这个规则 }
]
}
}

配置完babel-loader后，我们还不知道它是由什么规范来打包的，我们可以用babel presets,它是规范的汇总，可以指定babel-loader根据presets打包成什么样

安装它

npm install babel-preset-env -save-dev

我们修改一下webpack.config.js的代码

module.exports={
entry:{
app:'./app.js'
},
output:{
filename:'[name].[hash:8].js'
},
module:{
//rules下的每一项是一个规则
rules:[
{
test:/\.js$/,//一个正则
// use:'babel-loader',//如果符合正则的资源，会使用use来处理它
use:{
loader:'babel-loader' ,
options:{
presets:['@babel-preset-env']
}
},
exclude:'/node_modules/',//exclude是排除之外的，意思是node_modules不用执行这个规则 }
]
}
}