注意 loader配置好以后，是按照从下到上，从右到左的配置顺序执行的。
假如有一个index.css文件，里边内容是这样的
.avatar {
width:150px;
height:150px;
}
然后，我把这个css文件引入JS文件
image.png
这个时候，如果我直接去打包，会报错，因为webpack默认不知道怎么打包css结尾的文件，所以我们需要配置相关的loader告诉webpack如何去打包css结尾的文件；
打包css文件，需要用到 style-loader css-loader两个loader(配置好以后，记得安装loader，否则会报错)
image.png
当我们配置好也安装好了这两个loader以后。再去打包，就会打包成功了，页面上的图片也变成了宽高150px;
那么这个打包流程是什么样子的呢？
- 首先，我引入了一个 css文件，正常情况下，webpack不知道如何打包css文件
- 然后，我们配置了css-loader和style-loader告诉它如何去打包css文件
- 当我们打包好以后，我们的JS文件里，就有了样式相关的内容，然后我们又给img标签添加了class名，样式有了，class名也添加了，页面上的img图片就会变成150宽高
那么 style-loader css-loader两个loader的作用分别是什么呢？
我们可以稍微改造下刚才的样式文件，我们新增一个 avatar.css文件，里边内容这样
.avatar {
width:150px;
height:150px;
}
然后，我们再在 index.css里引入 avatar.css
@import './ avatar.css'
然后我们再重新打包，页面效果更刚才一样，那么这个过程中，css-loader起了什么作用呢？它帮我们分析出几个css文件之间的关系，最终把几个css文件合并成一段css.
那么style-loader它的作用就是，在得到 css-loader生成的 css内容之后，把这部分内容，挂载到页面的 heade部分
image.png
但是，很多时候，我们写样式，并不是用css文件，而是sass,less,或者stylus这种新写法，这个时候如果还是单纯的用 style-loader css-loader 就不行了，我们需要新增配置
- 比如。当我们的样式文件是 scss后缀的时候，我们就需要配置
sass-loader,安装方式：
npm install sass-loader node-sass --save-dev
配置
image.png
然后，我们再打包，就会发现图片样式就是 150px宽高。
自动加厂商前缀，有时候，当我们写CSS3样式的时候，为了兼容性，一般会加厂商前缀，比如
-webkit
-moz
-ms
-o
但是如果手写厂商前缀，会比较麻烦，我们可以利用一个loader来自动帮我们添加厂商前缀，那就是 postcss-loader
使用这个loader的步骤
- 安装 npm i -D postcss-loader
-
配置
image.png - 创建新的JS文件
postcss.config.js - 配置JS文件
postcss.config.js，配置的时候，需要用到autoprefixer这个插件，所以需要安装这个插件
npm install autoprefixer -D
安装后， postcss.config.js 这样配置
module.exports = {
plugins: [
require('autoprefixer')
]
}
做好了配置以后，我们再去打包，然后打开页面会发现 , postcss这个loader里的 autoprefixer这个插件 已经自动帮我们添加了带有厂商前缀的 偏移样式
image.png
