流程：

首先安装postcss库和一个Loader：postcss-loader

npm i postcss-loader postcss -D
npm i postcss-preset-env -D // 库运行环境插件

app.js中引入css文件

import css from "file.css"

webpack.config.js配置文件

/*
    1.该文件是webpack的配置文件，所有webpack的任务、用到的loader，plugins都要配置在此
    2.该文件要符合CJS模块化规范
*/
// 引入Node中一个内置的path模块，用于解决路径问题
var path = require('path');
// 使用CJS的模块化规范，暴露一个对象，该对象就是webpack的详细配置对象(规则)
module.exports = {
    mode: 'development', // 工作模式：开发或生产环境
    entry: './src/js/app.js', // 入口
    // 出口
    output: {
        path: path.resolve(__dirname, 'build/js'), // 输出文件的路径
        filename: 'app.js' // 输出文件的名字
    },
    module: {
        // 配置的Loader
        rules: [
            {
                test: /\.css$/i,
                use: [
                    "style-loader", // 处理此类文件第三步Loader简写
                    "css-loader", // 处理此类文件第二步Loader简写
                    {
                        Loader: "postcss-loader",
                        options: {
                            postcssOptions: {
                                plugins: [
                                    [
                                        "postcss-preset-env", // 或单独配置此插件也可以
                                        {
                                            // 方法一：再此配置兼容浏览器类型
                                        },
                                    ],
                                ],
                            },
                        },
                    }, // 处理此类文件第一步Loader🔺
                ],
            }, // 一个Loader
        ],
    },
    plugins: [] // 插件
};

方法二：

module: {
    // 配置的Loader
    rules: [
        {
            test: /\.css$/i,
            use: [
                "style-loader", // 处理此类文件第三步Loader简写
                "css-loader", // 处理此类文件第二步Loader简写
                {
                    Loader: "postcss-loader",
                    options: {
                        postcssOptions: {
                            plugins: [
                               "postcss-preset-env"
                            ],
                        },
                    },
                }, // 处理此类文件第一步Loader🔺
            ],
        }, // 一个Loader
    ],
},

配置package.json在其中追加browserslist配置，通过配置加载指定的css兼容性样式
（注：当Loader中没有配置时，底层查找package.json中对应的配置）

"browserslist": {
    // 开发环境: last兼容最新版
    "development": [
        "last 1 chrome version",
        "last 1 firefox version",
        "last 1 safari version"
    ],
    // 生产环境:默认是生产环境
    "production": [
        ">0.2%", // 兼容市面上99.8%的浏览器
        "not dead", // 过时的浏览器不做兼容，例如IE8
        "not op_mini all", // 不做opera浏览器mini版的兼容
        "ie 10" // 兼容IE10
    ]
}

注意

browserslist是一套描述产品目标运行环境的工具，它被广泛用在各种涉及浏览器/移动端的兼容性支持工具中，详细配置规则参考: github.com/browserslis…
若出现版本不兼容，或配置不正确的错误，那么需更换依赖包版本:

npm i less-loader@5 postcss-loader@3

运行打包指令:

npm run build // 运行没有这个指令的查看自己的package.json短命令配置

19.书接上文（16）webpack构建工具中处理CSS兼容性问题

流程：

注意