注意 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;

那么这个打包流程是什么样子的呢？

1. 首先，我引入了一个 css文件，正常情况下，webpack不知道如何打包css文件
2. 然后，我们配置了css-loader和style-loader告诉它如何去打包css文件
3. 当我们打包好以后，我们的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的步骤

1. 安装 npm i -D postcss-loader

2. 配置

   
   
   image.png
3. 创建新的JS文件 postcss.config.js
4. 配置JS文件 postcss.config.js，配置的时候，需要用到 autoprefixer这个插件，所以需要安装这个插件

 npm install autoprefixer -D

安装后， postcss.config.js 这样配置

module.exports = {
    plugins: [
        require('autoprefixer')
    ]
}

做好了配置以后，我们再去打包，然后打开页面会发现 , postcss这个loader里的 autoprefixer这个插件 已经自动帮我们添加了带有厂商前缀的 偏移样式

image.png