webpack的作用：
是 用来处理我们写的js代码。并且会自动处理js之间相关的依赖。
但是，开发中我们不仅仅有基本的js代码处理，还需要加载css，图片，也包括一些高级的
将ES6转成ES5代码，将Typescript转成ES5代码，将scss、less转成css，将.jsx、.vue文件转成
js文件等等。这时候就需要给webpack拓展对应的loader
loader使用过程：
步骤一：通过npm安装需要使用的loader
npm install --save-dev css-loader
npm install --save-dev style-loader
npm install --save-dev url-loader
npm install --save-dev file-loader
// es6 => es5
npm install --save-dev babel-loader@7 babel-core babel-preset-es2015
步骤二：在webpack.config.js中的module关键字下进行配置
const path = require('path'); // 导入path模块 ，由于依赖node，所以必须要有package.json，即创建项目
module.exports = {
entry : './src/index.js', // 入口
output : {
path : path.resolve(__dirname,'dist'), // 这里必须用绝对路径
filename : 'bundle.js', // 出口,
publicPath: 'dist/', // 配置url文件路径
},
module:{
rules:[
{
test:/\.css$/,
// css-loader只负责将css文件进行加载
// style-loader负责将样式添加到DOM中
// 使用多个loader时。是从右向左
use:['style-loader','css-loader',]
},
{
test:/\.(png|jpg|gif|jpeg)$/,
use:[
{
loader:'url-loader',
options:{
// 当加载的图片，小于limit时，会将图片编译成base64字符串形式
// 当加载的图片，大于limit时，需要使用file-loader模块进行加载
limit: 8196,
name: 'img/[name].[hash:8].[ext]' // 名称规则
},
}
]
},
// babel配置(es6 => es5)
{
test:/\.js/,
// exclude:排除
exclude:/(node_modules|bower_components)/,
use:{
loader:'babel-loader',
options:{
presets:['es2015']
}
}
}
]
}
}
步骤三：在入口js文件中引用css文件
// js文件依赖css文件
require('./css/normal.css')
// css文件依赖资源文件
body {
background: url(../img/zdj.jpg)
}
这样一来，运行npm run bulid就能直接打包css、资源文件,es6 => es5了
