上一篇webpack文章讲述的是entry、output、plugin三大概念的概念与功能，今天主要是对loaders这一核心的解说。loaders的作用在于各种格式的文件进行转换，例如es6转码，sass/less的解析，图片资源转换成base64用于减少http请求等等。
（一）babel-loader
在项目中，根据官网http://babeljs.io/docs/setup/#installation提供的安装命令进行babel依赖包的安装。
接着，在webpack.config.js里进行相应的配置。
test是对js文件进行匹配，loader则将进行文件转换。同时，也需要进行presets配置，实现es2015/es2016/es2017的转换，令浏览器可识别。
之后，进行babel-preset-env插件的安装。
使用命令npm run webpack进行运行编译打包
此时显示的是打包成功终端代码。然而，命令终端中显示的打包时间为6s，打包时间过长造成性能问题，因此需要通过在loaders里面配置exclude以及include。路径的配置为绝对路径。打包时间也大大减少。
（二）css的相关配置
为了webpack对css的解析，需要下载依赖包，css-loader、style-loader。
同时，需要在loaders里对css进行配置
postcss-loader以及autoprefixer两个插件，是为了实现自动添加css3前缀的功能，而importLoaders为了实现css中引用模块import时匹配的。
另外，也可以对sass与less等扩展语言进行配置。
安装的命令：
webpack.config.js的loaders配置
（三）模板文件
首先，安装解析的依赖包html-loader，
接着，在loaders里进行配置
（四）图片资源文件
有两种插件可以实现webpack对图片资源的处理。file-loader与url-loader。
使用file-loader,运行命令
同时，需要配置loaders，
query的配置则是对打包后的图片进行名称修改。进行webpack打包后，此时图片资源已打包完成。
另外，关于url-loader的配置。首先，先安装url-loader，
之后同时需要进行loader的配置。
运行webpack命令之后，打包成功发现没有打包的图片名以及js文件变大，则按照了base64编码将图片进行展示。
而http请求的方式与base64的方式有优势与劣势，http虽然会添加不必要的请求，但同时也能将请求的路径进行缓存；而base64虽然能减少服务请求，但同时也增大了js的文件体积，增加了不必要的臃余。
另一方面，无论哪种方式，对于图片的体积都是可以进行压缩的，需要的插件是image-webpack-loader。
打包成功后，查看打包图片后的体积，体积变小了。
总结：这篇webpack文章讲的是对loaders的应用，分别对es6、sass、less、html、image等文件的解析转换。
更多文章请关注公众号
