webpack(7)_CSS_使用PostCss

本文主要讲解PostCss在webpack中的常用配置使用，主要包括以下几个方面：

• PostCSS介绍
• 项目准备
• 使用PostCss和postcss-loader
• 使用PostCss的autoprefixer插件
• 使用PostCss的postcss-cssnext插件
• 使用Broswerslist统一配置
• 使用PostCss的cssnano插件

PostCSS介绍

PostCSS是一个使用JS插件转换样式的工具。这些插件可以lint你的CSS，支持变量和mixins，转换未来的CSS语法，内联图像等。
PostCSS被包括维基百科，Twitter，阿里巴巴和JetBrains在内的行业领导者使用。该 Autoprefixer PostCSS插件是最流行的CSS处理器之一。
PostCSS采用CSS文件并提供API来分析和修改其规则（通过将它们转换为 抽象语法树）。然后，插件可以使用此API 执行许多有用的操作，例如，查找错误会自动插入供应商前缀。
翻译自：https://www.npmjs.com/package/postcss

项目准备

• 新建目录007_wp_css_postcss
mkdir 007_wp_css_postcss
• 初始化package.json
  npm init，关于项目的一些描述，一路回车键。
• 新建dist目录和src目录，并在src目录下新建index.js，在src/css目录下新建base.css，在index.js中引入base.css

import './css/base.css'

• 在项目根目录下新建webpack.config.js，下图是整个项目结构
  
• 安装style-loader和css-loader
  如果有不懂style-loader和css-loader的，请查看文章：https://blog.csdn.net/u010982507/article/details/81277151
  注：postcss-loader配置要在less-loader或sass-loader等预处理语言前面，css-loader和style-loader的后面，例如：

{ 
    loader: 'style-loader',
    options: {
        singleton: true
    }
},
{ 
    loader: 'css-loader',
    options: {
        minimize: true
    }
},
{
    loader: 'postcss-loader'
}
{
    loader: 'less-loader'
}

• webpack.config.js基本配置

var path =