webpack 处理css兼容

webpack 没办法直接处理css，对一些css语法存在不识别的情况，这时候，我们就得使用 postcss-loader 和 postcss-preset-evt 来解决css兼容性问题。
1 postcss-loader 处理兼容问题，
2 postcss-preset-evt

在终端下载 postcss-loader 和 postcss-preset-evt

image.png

在json里面配置兼容

image.png

development 开发环境配置

production 生产环境配置

"browserslist":{
    "development":[ 
    "last 1 chrome version",
    "last 1 firefox version",
    "last 1 safari version"
    ],
    "production":[
      ">0.2",
      "not dead",
      "not op_mini all"
    ]
  }

在webpack.config.js 配置运行环境

//在设置 node.js 环境变量   变成开发环境
process.env.NODE_ENV="development"

image.png

webpack.config.js 全部代码

const {resolve}=require('path');
const HtmlWenpackPlugin=require('html-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin") 

//设置 node.js 环境变量   变成开发环境
process.env.NODE_ENV="development"

module.exports ={
    entry:'./src/js/index.js', //人口文件
    output:{ // 打包到指定文件 
        filename:'built.js',
        path:resolve(__dirname,'build')
    },
    module:{
        // css 兼容行处理， postcss-loader 
        // css环境兼容运行浏览器处理环境  postcss-preset-evt\
        // postcss 找到 package.json 中的browserslist里面的配置，通过配置加载指定的css兼容性样式
        rules:[
            {
            test:/\.css/,
            use:[
                MiniCssExtractPlugin.loader,
                'css-loader',
                //使用postcss-loader的默认配置
                //修改 loader 的配置 
                {
                    loader:'postcss-loader',
                    options:{
                        ident:'postcss',
                        plugins:()=>{
                            require('postcss-loader-env')()
                        }
                      
                    }
                    
                }
            ]               
            },
        ]
        
    },
    plugins:[  //打包成 html 文件
            new HtmlWenpackPlugin({
                template:'./src/index.html'
            }),
            new MiniCssExtractPlugin({
                filename:'css/built.css'
            })
            
    ],
    mode:'development'
}

配置好上面的代码之后，就可以兼容css了