使用webpack实现css文件的加载

  我们都知道webpack'是一个依赖管理工具，使用webpack构建的项目，依赖都被管理得好好的，我们已经知道.js的文件可以使用webpack打包，或者使用webpack-dev-server自动打包进行管理，那么.css样式文件该怎么管理呢？？

  我们可以让.js文件引用.css文件，这样就能实现一次请求而获得所需要的资源了，我们可以创建一个main.js文件，使用import 'index.css'引用css文件，使用webpack打包main.js，就能实现目的了。加载.css文件的话，我们可以使用第三方的加载工具，style-loader和css-loader，

在webpack.config.js中的module进行配置。

1、style-loader和css-loader是什么？

  第三方的模块加载工具，主要作用是在webpack打包的文件下加载.css文件

2、style-loader和css-loader的作用？

  在webpack打包的文件下加载.css(.less和.scss)文件

3、使用

3.1  安装

 使用" cnpm i style-loader css-loader --D"----在项目目录下进行安装

3.2、配置

1. 在main.js文件（你想要使用webpack打包的文件）中，使用  import  './css/index.css'引入css文件

2. 既然是第三方加载模块，那就需要到webpack.config.js下的module去配置

3. 在module中有一个rules:[]----里面存放着匹配规则

4. 在rules:[{...}]中定义一个匹配规则：test:/\.css$/----定义要匹配的文件类型，一般用正则表达式表示，use:['style-loader','css-loader']----定义要匹配使用的加载器。加载的使用顺序是从后往前挨个使用，当use中的加载器全使用完之后，再将项目交与webpack进行打包加载

5. 使用webpack对main.js进行打包，运行项目

   webpack.config.js配置：

const path=require('path');



module.exports={
    entry:path.join(__dirname,'./src/main.js'),   //这是默认打包的文件
    output:{    //这是默认打包生成的文件
        path:path.join(__dirname,'./dist'),   //文件路径
        filename:'bundle.js'     //文件名
    },
    module: {  //配置第三方模块 加载器
        rules: [   //创建加载器匹配规则
            {test:/\.css$/,use:['style-loader','css-loader']}
            //test:匹配文件的类型，使用正则表示。
            //use:匹配规则的使用加载器：使用规则是从后往前使用，先使用css-loader再使用style-loader
        ]
    }

};

main.js:

加载.css文件的过程：

         先是webpack打包main.js后发现，在main.js中存在着   import  '.css/index.css'这一条语句，webpack不理解这一条语句，于是到webpack.config.js中的第三方模块加载module中寻找有没有这条规则，在module下的rules:[]下发现了规则{test:'/\.css$/',use:['style-loader','css-style']}，接着把这条规则的'test'和.css/index.css进行匹配，发现匹配成功之后，将index.css交与css-loader加载器去解析，css-loader解析完成之后再交与style-loader加载器解析，解析完成之后发现，use中没有加载器了，于是将解析结果交与webpack，webpack拿到结果之后输出。

    .less与.scss一样如此，不过是多添加了一个less-loader和sass-loader(node-sass-loader)