webpack5学习笔记-05 webpack使用（3）CSS的处理方案在上一节中，我们学习了关于webpack的基本使

在上一节中，我们学习了关于webpack中HTMLWebpackPlugin的基本使用，通过配置webpack.config.js，可以实现HTML的打包压缩功能，这节我们承接上节，开始学习webpack中对于CSS的处理。

CSS处理

在webpack中使用CSS文件，我们首先需要思考一下我们需要对CSS进行哪些处理:

把less/sass编译为css；
给css3设置前缀；
处理特殊语法(@import/url)；
实现CSS的合并打包(内嵌式、外链式)。

执行如下命令安装本节中需要使用的插件。

$ npm install style-loader css-loader less less-loader autoprefixer postcss-loader --save-dev

webpack规则配置

在webpack.config.js中，我们加入如下模块：

 module: {     //注意loader的执行顺序，从下到上，从右到左
        rules: [{
            test: /\.(css|less)$/, //基于正则匹配：哪些文件是我们需要处理的
            use: [
                'style-loader', //把CSS以内嵌式的方式导入
                'css-loader', //处理特殊语法
                'postcss-loader', //配合autoprefixer&browserslist给CSS3属性设置前缀「兼容」
                'less-loader' //把less编译为css
            ]
        }]
     }

此时，在入口文件src/index.js中就可以引入CSS文件并内嵌到Html页面中了。但是CSS3属性前缀还没有设置成功，这时我们需要结合postcss-loader和autoprefixer进行处理了。

在上面代码的基础上修改postcss-loader，或者新建一个名为postcss.config.js文件，这里我采用后者。
在这个文件中，我们需要使用到autoprefixer插件。

/* 关于POSTCSS-LOADER的配置项 */
module.exports = {
    plugins: [
        require("autoprefixer")
    ]
};

关于browserslist的相关配置

在package.json中，我们可以加入如下浏览器兼容列表配置,其目的也是给CSS3增加相关的前缀，在代码中也是必备的：

// https://github.com/browserslist/browserslist
"browserslist": [
"> 1%",   //大于百分之一的使用率
"last 2 versions",  //最后两个版本
"not ie <=8"    //不考虑IE8及以下的浏览器
]

上面操作完成后，我们在package.json中加入

  "build":"webpack"

即完成了生产环境下对CSS的初步处理，当然目前这个设置并不完善，后续可以根据实际需要进行修改。比如可以使用mini-css-extract-plugin对CSS文件进行抽离。