我们写了一些ES6语句，希望webpack在打包的同时，捎带脚用babel进行一下翻译。
webpack和各个厂商的关系非常好，各个厂商给webpack提供了自己的loader，这些loader都是用于在webpack合并文件的时候，“捎带脚”做的事情。
安装babel-loader和babel-core（babel核心）：
cnpm install --save-dev babel-loader babel-core
还要安装babel的一个preset：
cnpm install --save-dev babel-preset-env
改变webpack.config.js文件：
var path = require("path");
//进行配置的东西，实际上是本文件的暴露项，要写module.exports
module.exports = {
//配置入口文件
entry : "./js/main.js" ,
//配置产出文件
output : {
//产出文件文件夹
path : path.resolve(__dirname , "dist") ,
//产出文件的文件名
filename : "all.js"
},
module : {
rules : [
{
"test" : /\.js$/ ,
"use" : [
{
"loader" : "babel-loader" ,
"options" : {
"presets" : ["env"]
}
}
]
}
]
},
//实时监测文件更新，一旦文件更新了，就重新合并打包一份
watch : true
}
配置方法是看的API文档：
https://doc.webpack-china.org/concepts/loaders/#-loader
.babelrc文件没有用了！
当我们还想使用更高级语法，比如强制解构，此时要装babel插件。
安装依赖：
cnpm install --save-dev babel-plugin-transform-object-rest-spread
改变webpack.config.js文件：
var path = require("path");
//进行配置的东西，实际上是本文件的暴露项，要写module.exports
module.exports = {
//配置入口文件
entry : "./js/main.js" ,
//配置产出文件
output : {
//产出文件文件夹
path : path.resolve(__dirname , "dist") ,
//产出文件的文件名
filename : "all.js"
},
module : {
rules : [
{
"test" : /\.js$/ ,
"use" : [
{
"loader" : "babel-loader" ,
"options" : {
"presets" : ["env"] ,
"plugins" : ["transform-object-rest-spread"]
}
}
]
}
]
},
//实时监测文件更新，一旦文件更新了，就重新合并打包一份
watch : true
}