第五节、模块：css文件打包

这节课，我们来学习css文件打包，在学习之前，需要对webpack.config.js里的Loaders配置项进行了解。

Loaders

---

Loaders是webpack最重要的功能之一，通过使用不同的loader，webpack可以用脚本和工具，对不同的文件格式进行处理。

举几个简单的例子：

• 可以把SASS文件 写法转换成css，而不再使用其他转换工具。
• 可以把ES6或者ES7的代码，转换成大多浏览器兼容的js代码。
• 可以把React汇总的JSX转换成JavaScript代码。

注意：所有的loaders都需要在npm中单独进行安装，并在webpack.config.js里进行配置。下面我们来对loaders的配置来一个简单的介绍：

• test：用于匹配处理文件的扩展名的表单时，这个选项是必须进行配置的
• use：loader名称，就是你要是用模块的名称，这个选项也是必须进行配置，否则会报错
• include/exclude：手动添加必须处理的文件（文件夹）或屏蔽不需要处理的文件（文件夹）可选
• query：为loaders提供额外的设置项 可选

基本配置了解了，我们就开始正是学习如何打包css文件。(注意：上面是use  而不是user)

打包css文件

---

建立index.css文件

首先在/src目录下，建立一个css文件夹，在文件夹里建立index.css文件

body{
    background-color: #1a2f3b;
    color: wheat;
}

css文件建立后，需要引入到入口文件中，才可以打包，我们这里进入到entry.js中。

/src/entry.js中在首行加入代码：

import css from './css/index.css';

css和引入做好后，我们就需要使用loader来解析css文件了，这里我们需要两个解析用的loaser，分别是style-loader和css-loader。

style-loader：

它是用来处理css文件中的url（）等，用npm install进行项目安装；

npm  install  style-loader  --save-dev

css-loader：

npm  install   --save-dev   css-loader

两个loader都下载安装好后，下面来进行loaders的配置。

loaders配置：

配置webpack.config.js中module项

这里我们会讲到三种把css打包到js中去的方法

第一种：直接用use

//模块：例如解读css，图片如何转换，压缩
module:{
    rules:[
        {
            test:/\.css$/,
            use:['style-loader','css-loader']
        }
    ]
},

第二种：把use换成loader

module:{
    rules:[
        {
            test:/\.css$/,
            loader:['style-loader','css-loader']
        }
    ]
},

第三种：use+loader结合使用

module:{
    rules:[
        {
            test:/\.css$/,
            use:[{
                loader: "style-loader"
                },
                {
                    loader: "css-loader"
                }
            ]
        }
    ]
},

上面哪一种都可以，可以自行选取自己喜欢的一种写法

总结：

本节只是非常重要，loader的使用是贯穿在你整个项目开发中的，所以必须了解和掌握它。