webpack里面的源文件都是一个module，需要经过webpack的解析与编译。
一.处理ES6
首先看一下ES6，对于现代浏览器而言，有一些ES6的语法是无法被解析的，因此需要babel将ES6解析为ES5
因此需要先安装babel-loader

npm i babel-loader -D //我这里是^7.1.5版本的
npm i babel-core -D//babel-core包含了一些babel里面的api
npm i babel-preset-env -D //提供执行环境

安装完以后需要在根目录新建.babelrc文件

{"presets": ["babel-preset-env"],"plugins": []
}

然后在webpack.common.js

module:{rules:[{test:/\.js$/,loader:['babel-loader'],include:srcPath,exclude:/node_modules/}]
}

二.处理样式
对于css文件

npm i css-loader -D
npm i style-loader -D

module:{rules:[{test:/\.css$/,loader:['style-loader','css-loader']//执行顺序为从后到前}]
}

对于less或者sass

npm i less -D
npm i less-loader -D

module:{rules:[{test:/\.less/,loader:['style-loader','css-loader','less-loader']}]
}

三：处理图片
对于图片的处理一般分为dev环境下的处理，和prod下的处理，和上述放在common里面的略有不同，主要的原因是在开发环境下，图片一般是在根路径下，打包以后希望把他们全部输出到一个img文件夹里面，而且需要对图片的大小做一些精细化的配置处理

其次对于图片的使用有这三种：
1.在html中的src标签中使用
2.在js中import使用
3.在css中使用，比如背景图片
对于第一种，需要安装html-withimg-loader

npm i html-withimg-loader -D //^0.1.16

module:{rules:[{test:/\.html$/use:'html-withimg-loader'}]
}

对于第二种和第三种情况：安装file-loader

npm i file-loader -D

module:{rules:[{test:/\.(jpg|png|gif)$/,use:'file-loader'}]
}

webpack.prod.js,在这个文件里对图片做一些精细化配置，需要安装url-loader

npm i url-loader -D

module:{rules:[{test:/\.(png|jpg|gif)$/,use:{loader:'url-loader',options:{limit:1024*5,//小于5kb的图片会被输出为base64格式outputPath:"/img/" //全部输出到img文件夹里面}}}]
}