loader 资源解析转换

简单

1 .webpack原生只能识别js和json代码
2 .需要处理不同的文件，就需要使用不同的laoder来转换成有效的模块
3 .后续监听，对于特定的事件执行特定的逻辑
4 .多个loader执行，串行执行，从右往左
5 .webpack开箱支持js,json格式，其他的类型都需要通过配置对应的loader来转换成有效的模块，并且可以添加到依赖图种

解析ES6,JSX

{
    test: /\.(j|t)sx?$/,
//匹配这样的文件
    use: 'babel-loader',
//使用这个转换器
    exclude: /node_modules/ 
//这个里面的文件不需要处理               
},

file-loader

1 .底层原理：当发现图片文件的时候，就帮我们把图片文件资源打包到bundle这个文件夹下面，并且给图片一个名字，然后将这个图片名称作为一个返回值，返回到我们引入模块的变量之中，让页面种的可以访问到这个资源
2 .将某个文件返回到一个目录，并且返回这个文件名的时候，都可以使用这个loader来操作
3 .

css-loader

1 .帮我们分析出所有css文件之间的关系，并合并成一段css
2 .这个css不能切割吗？有的css和js压根不会用到
3 .

style-loader

1 .得到css生成内容之后，把内容挂载到页面的head部分。

postcss-loader

1 .添加自适应浏览器前缀
2 .