全面掌握Webpack4.0 (六)使用loader打包静态资源（样式篇-上）（持续更新…

通过前面文章的学习大家应该学会了如何打包图片文件，那么本篇文章给大家讲一下如何使用loader打包样式文件。

我们接着使用之前的demo项目给大家举例，首先我们在src文件夹下新建一个css文件，取名就叫“wechat.css”(因为我们使用的示例图片是一个微信logo，所以暂时就取名叫wechat.css吧，当然了这不是重点)，然后我们在wechat.css中给定图片的样式如下图所示：

然后我们在index.js文件中将这个样式引入进去，并把这个类添加到图片对象上：

之前给大家说过，webpack默认只能识别js文件，但是此时我们引入了css文件，所以在这里我们就要使用可以处理css文件的loader，也就是要给大家介绍的css-loader和style-loader。
注意：处理css文件要同时使用css-loader和style-loader这两个loader，缺一不可。
首先我们先来安装这两个loader，在终端使用命令：
npm install css-loader style-loader -D
查看package.json文件确认这两个loader已经安装成功。

然后我们进入webpack.config.js配置这两个loader：

运行npm run bundle对项目重新打包然后打开浏览器：

如上图所示样式生效，说明我们的配置没有问题。
接下来给大家讲一下css-loader和style-loader的区别。
在一些大型项目的实际开发中，我们会用到css module这种css模块化的开发方式。之前给大家介绍过模块的概念，其实css module也同理。我们还是以这个demo为例，我们在src文件夹下新建一个index.css，然后使用@import的方式将wechat.css导入到index.css中，然后在idnex.js中导入index.css取代之前导入的wechat.css：


如上所示改变css的引入方式以后我们对项目进行重新打包后打开浏览器如下图所示没有问题。

以上给大家演示的就是css模块化，说白了就是将处理不同业务的css进行分开，我们的实例中目前只有一个wechat.css，以后可能还会有wechat1.css、wechat2.css，我们把这些独立的css文件分开处理最后都引入到一个index.css中，这样就相当于一模块化的概念。给大家讲了一下css moudle的概念其实我想说的是css-loader就是用来处理多个css文件的，他会将多个css文件处理后合并在一起，它工作做完以后就轮到style-loader上场了，style-loader的作用是将css-loader处理过的css文件挂载到页面的头部，如下图所示：

说到这里我想大家应该知道css-loader和style-loader的作用以及区别了吧！
在实际开发中，我们经常会用到css预处理器，比如Scss和Less，下面给大家讲一下如何配置Scss。要想让webpack识别scss文件，那么就需要sass-loader和node-sass这两个包，首先我们来安装一下这两个包：
npm install sass-loader node-sass -D
（安装这两个包的时间可能会3-5分钟，大家耐心等待一会）
趁着安装时间，我们先来更改一下项目结构，以便于之后的测试：
如下图所示，我们先删除wechat.css文件，然后将index.css改成idnex.scss，同时在index.scss写上scss语法的样式，如下图：

然后我们在webpack.config.js中配置一个sass-oader:
此时我们在终端再次运行npm run bundle对项目进项重新打包后打开页面：

我们可以看到页面可以正常显示，同时看到右侧的代码中，scss文件被转换为了css文件并挂载到了页面的head部分，说明我们成功的处理了scss文件。
接下来我想在scss文件里给这个图片添加一个css3的属性transform让其进行一个偏移：

其实我想说的是像这种css3的属性为了兼容不同的浏览器，我们一般都会如上图所示写上前缀，例如谷歌-webkit-，IE-ms-等，如果我们手动去一个一个的写那就太麻烦了，webpack这么强大的工具当然不会让我们在这种小问题上浪费时间，此时postcss-loader闪亮登场！
老样子，我们先来安装postcss-loader：
npm install postcss-loader -D
安装之后我们来到webpack.config.js中将postcss-loader配置在sass-loader的后面：

然后我们还需要在webpack.config.js的同级别新建一个postcss.config.js文件并配置postcss.config.js，配置postcss.config.js之前我们需要先安装一个autoprefixer插件：
npm install autoprefixer -D
然后我们来配置postcss.config.js文件如下图：

然后我们在package.json中配置浏览器的限制参数：

上面的配置是制定了autoprefixer插件生效的浏览器的要求：
defaults：本机默认浏览器
not ie <8: 大于等于IE8的浏览器；
last 2 versions： 所有浏览器兼容到最后两个版本根据 CanIUse.com 追踪的版本
大于1%：全球超过1%人使用的浏览器

配置好之后我们先回到index.scss文件中将刚才写的带浏览器厂商前缀的属性去掉，只保留一个 transform: translate(150px,150px)：

此时我们重新打包项目后，打开浏览器查看页面：

我们可以看到通过postcss-loader以及autoprefixer插件的配置，浏览器厂商前缀被自动添加了。
最后给大家补充一点很重要的知识点，大家可以看到目前为止我配置了如下四个loader：

大家一定要记住，loader的加载顺序是“从右至左，从下至上”的！本文终。

下一篇：全面掌握Webpack4.0 (六)使用loader打包静态资源（样式篇-下）（持续更新…