处理项目中的资源文件
loader：用来处理资源文件的，接受资源文件为一个参数，处理完了会返回一个新的资源，这个过程就是loader的处理。
一、处理js文件
安装babel-loader
npm install babel-loader babel-core —save-dev
使用babe还需要给一个配置，指定一个presets来告诉babel-loader将js转换成什么特性。比如es5、或者是包含所有特性。所有特性可以指定为latest。latest会包含es2015、es2016、es2017等等。
先安装latest才能使用
npm install babel-preset-latest —save-dev
presets有三种使用方法：
1、在loaders的参数里配置
module.exports = {
module: {
loaders: [
{
test: /\.js$/, //正则表达式
loader: ‘babel-loader’, //可以简写为babel
query: {
presets: [‘latest’]
}
}
]
}
}
2、在项目的根目录下建立一个.babelrc的配置文件。文件内容如下：
//只有一个对象
{
‘presets’: [‘latest’]
}
3、在package.json里定义babel
‘babel’: {
‘presets’: [‘latest’]
}
想拿到一个绝对路径怎么写？
node中有一个自带的API叫path
var path = require(‘path’)
//path对象上有一个方法叫resolve解析
path.resolve(__dirname, ‘app/src’)
__dirname: 在运行环境下的变量，也就是当前运行环境的路径。
第二个参数是要用文件的相对路径
resolve解析当前的环境，当前的目录去找这个文件的相对路径，解析玩后就会得到那个文件的绝对路径。
二、处理项目中的css文件
//先安装
npm install style-loader css-loader —save - dev
配置css的loader
module.exports = {
module:{
loaders:[{
test: /\.css$/,
loader: ‘style-loader!css-loader’
//或者写成loaders: [‘style-loader’, ‘css-loader’]
}]
}
}
注意：loader的处理方式是从右到左
三、处理项目中的less文件和sass文件
先安装webpack相关的loader
//less的loader
npm install less-loader—save -dev
//sass的loader
npm install sass-loader —save -dev
//用法
loaders: [
{ //处理less
test: /\.less$/,
loader: ‘style-loader!css-loader!less-loader’
},
{ //处理sass
test: /\.scss$/,
loader: ‘style-loader!css-loader!sass-loader’
}
]
四、处理模版文件（.html）
//安装loader
npm install html-loader —save -dev
//用法
loaders: [{
test: /\.html$/,
loader: ‘html-loader’
}]
五、处理图片及其他文件
//安装loader
npm install file-loader —save -dev
//用法
loaders: [{
test: /\.(png|jpg|gif|svg)$/i,
loader: ‘file-loader’
}]
