webpack3之loader全解析
首先亮出webpack官方网站，webpack能干什么？官网给出的答案就是，一句话，让一切变得简单！
各式各样的loader层出不穷，让我们在构建时不知所措，于此，总结下loader的全解析。
概念
loader，顾名思义，加载器，英文的解释如下：
Loadersaretransformationsthatareappliedonthesourcecodeofamodule.Theyallowyoutopre-processfilesasyouimportor“load”them.Thus,loadersarekindoflike“tasks”inotherbuildtools,andprovideapowerfulwaytohandlefront-endbuildsteps.Loaderscantransformfilesfromadifferentlanguage(likeTypeScript)toJavaScript,orinlineimagesasdataURLs.LoadersevenallowyoutodothingslikeimportCSSfilesdirectlyfromyourJavaScriptmodules!
中文翻译过来就是：
loader用于对模块的源代码进行转换。loader可以使你在import或“加载”模块时预处理文件。因此，loader类似于其他构建工具中“任务(task)”，并提供了处理前端构建步骤的强大方法。loader可以将文件从不同的语言（如TypeScript）转换为JavaScript，或将内联图像转换为dataURL。loader甚至允许你直接在JavaScript模块中importCSS文件！
从中，可以看出loader的强大作用，分析下：
- 转换的作用。开发所用到的都转换成网页加载所必备的html+css+js+img等要求格式的文件。
- 转换对象是源代码。loader只对源代码转换，至于其他的功能，plugins就来接收它做不到的地方。
总结一句话：loader,加载的机器，形象的比喻下，就像一个豆浆机，放上你的原料，它就开始认真的工作了！
常用的loader
1、babel-loader
ThispackageallowstranspilingJavaScriptfilesusingBabelandwebpack.
加载ES2015+代码，然后使用Babel转译为ES5
安装：
npminstall--save-devbabel-loaderbabel-corebabel-preset-envwebpack
使用：
{
test:/\.js$/,
exclude:/node_modules/,
loader:'babel-loader'
}
2、style-loader
AddsCSStotheDOMbyinjectinga