这是我参与8月更文挑战的第22天，活动详情查看：8月更文挑战

处理css都是用的loader来进行，具体使用如下：

1、处理CSS

css-loader：识别import 和 url() 比如 import/require()，将css文件以字符串的形式加载到common.js模块中
style-loader: 创建style标签，并将js中的样式资源进行整合，并插入到head标签中

module: {//模块
    rules: [//规则
        {test: /\.css$/, use: [{
                loader:'style-loader',
                options: {}
            }, 'css-loader']}
    ]
},

option里面有很多配置项，可以翻文档查阅

2、处理less

使用less-loader来进行预编译

{
    test: /\.less$/, use: [
        {
            loader: 'style-loader',
            options: {}
        },
        'css-loader',
        {
            loader: "less-loader"
        }],
}

3、 整合CSS，提取成单独文件

打包之后，css会被整合到js文件里面去，以字符串的形式存在；
所以我们需要将css整合出来成为一个css文件

使用mini-css-extract-plugin 插件 对css、less进行配置

{
    test: /\.css$/, use: [
        // 代替style-loader，提取js中的css成单独文件
        miniCssExtractPlugin.loader
        , 'css-loader']
},
{
    test: /\.less$/, use: [
        // 代替style-loader，提取js中的css成单独文件
       miniCssExtractPlugin.loader,
        'css-loader',
        {
            loader: "less-loader"
        }],
}

new miniCssExtractPlugin({
    //指定输出文件目录和文件名
    filename:'css/built.css'
}),

css兼容性处理

使用postcss-loader postcss-preset-env帮助postcss找到packa.json中browserlist里面的配置，通过配置加载指定的css兼容样式
package.json配置可以在github上搜browserslist，有详细的配置

"browserslist": {
//生产环境有两个，但是默认开启的是生产环境，所以得设置node环境变量来配置开发环境
  "development": [
    "last 1 chrome version", //兼容最近的谷歌浏览器版本
    "last 1 firefox version",
    "last 1 safasi version"

  ],
  "production": [
    ">0.2%", //兼容%99.8的浏览器
    "not head",//但是不要已经死的浏览器
    "not op_mini all"
  ]
}

在webpackp配置文件中配置node环境变量来开启开发环境
process.env.NODE_ENV = 'development';

webpack.config,js的配置

{
    test: /\.css$/, use: [
        // 代替style-loader，提取js中的css成单独文件
        miniCssExtractPlugin.loader,
        'css-loader',
        {
            loader: "postcss-loader",
            options: {
                ident:'postcss',
                plugins:()=>[
                //    postcss的插件
                    require('postcss-preset-env')()
                ]
            }
        }

    ]
}

压缩CSS

使用插件 optimize-css-assets-webpack-plugin
直接调用就行new optimizeCssAssetsWebpackPlugin()