六：配置样式-css、postcss、scss、less

编译 CSS 文件
处理 css 的相关技术有 postcss、 scss、less，接下来，会一一介绍

1：.css 文件的编译

编译 .css 文件，需要用到 css-loader 和 style-loader:
css-loader 使你能够使用类似 @import 和 url(...) 的方法实现 require() 的功能；
style-loader 将所有的计算后的样式加入页面中； 二者组合在一起使你能够把样式表嵌入 webpack 打包后的JS文件中。

（1）：安装相关插件

npm install css-loader style-loader -D

（2）修改在 webpack.dev.conf.js 文件，新增 module 配置

// 加载器 loader 配置项
module:{
    rules:[
        {
            test: /\.css$/,
            use: ['style-loader', 'css-loader']
        }
    ]
},

（3）测试效果

在 src 文件夹下 新建 css/reset.css 文件，并添加如下代码：

body{
    margin:0;
    padding:0;
    color:red;
}
在入口文件 src/index.js 顶部引入该样式文件

import './css/reset.css';
执行命令 npm start 查看效果，文字已经变成红色了~ 配置成功
 

2：使用 postcss 插件

对于 CSS3 的许多特性来说，需要添加各种浏览器兼容前缀，开发过程中，这样加太麻烦，postcss 帮你自动添加各种浏览器前缀

（1）安装相关插件

npm install postcss-loader autoprefixer -D

（2）在根目录创建 postcss.config.js 文件

添加如下内容：
module.exports = {
    plugins: [
      require('autoprefixer')
    ]
}

（3）修改 webpack.dev.conf.js 文件的 module 配置如下

// 加载器 loader 配置项
module:{
    rules:[
        {
            test: /\.css$/,
            use: [{
                    loader: 'style-loader'
                },{
                    loader: 'css-loader'
                },{
                    loader: 'postcss-loader',
                    options: {
                        sourceMap: true,
                        config: {
                            path: 'postcss.config.js'
                        }
                    }
                }
            ]
        }
    ]
},

（4）修改package.json 文件，添加如下代码

"browserslist": [
    "defaults",
    "not ie < 11",
    "last 2 versions",
    "> 1%",
    "iOS 7",
    "last 3 iOS versions"
  ]

在package.json 文件中添加要兼容哪些浏览器版本，我们这里只用 postcss 的给代码添加浏览器前缀功能， autoprefixer ，测试一下效果如何。

在 src/index.html 的 body 中，添加如下代码：
<div id="postcss"></div>
在 src/index.js 中，添加如下代码：

document.getElementById('postcss').inner