Webpack 处理浏览器CSS3属性兼容问题 postcss-laoder 和 autoprefixer

autoPrefix自动补齐CSS3前缀

关于CSS3属性前缀

浏览器很多种，浏览器标准没有完全统一。我们需要面对一些兼容性的问题

• Trident (-md) IE系列
• Geko (-moz)
• Webkit (-webkit)
• Presto (-o)

有些兼容问题是可以在构建阶段避免的，比如CSS3

在之前我们需要手动补齐浏览器前缀,比如

.box{
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    -o-border-radius:10px;
    border-radius:10px;
}

而autoprefixer这个插件可以自动补全CSS3前缀

配置postcss-loader 和 autoprefixer

autoprefixer根据CAN I USE规则(caniuse.com),通常和插件postcss-loader一起使用

autoprefixer与预处理器的区别
预处理器如less、scss是代码打包时处理，是前置处理
而autoprefixer是代码打包完成的时候，再对css处理，是后置处理

1. 安装npm包

npm i postcss-loader@3.0.0 autoprefixer@9.5.1 -D

2. 配置

给less loader添加一下配置

browsers:['last 2 version','> 1%','ios 7']
兼容最近两个版本，用户占比大于1%的浏览器，兼容IOS7以上

{
    test: /.less$/,
    use: [
        MiniCssExtractPlugin.loader,
        // 'style-loader', // 再将样式插入到style标签中
        'css-loader', // 将css转换成commonjs
        'less-loader', // 将less文件转换成css文件
        {
            loader:'postcss-loader',
            options:{
                plugins:()=>[
                    require('autoprefixer')(
                        {browsers:['last 2 version','>1%','ios 7']}
                    )
                ]
            }
        }
    ]
}

效果

.search-text {
  background: #0ff;
  font-size: 20px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

完整配置

'use strict';

const path = require('path');

// 将css commonjs 抽成css文件
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
// 压缩css文件
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin')
// 压缩html,有几个入口就对应几个html
const HtmlWebpackPlugin = require('html-webpack-plugin')
// 每次构建的时候自动清除之前的dist目录下的文件
const CleanWebpackPlugin = require('clean-webpack-plugin')

module.exports = {
    // 生产模式还是开发模式
    mode: 'production',
    // 入口 指定入口文件
    entry: {
        // app: './src/index.js',
        // search:'./src/search.js',
        reactComp: './src/react-comp.js'
    },
    // 出口 
    output: {
        // 指定输出目录
        path: path.join(__dirname, 'dist'),
        
        filename: '[name]_[chunkhash:8].js'
    },
    // 配置loader
    module: {
        rules: [
            {
                test: /.js$/,
                use: 'babel-loader'
            },
            {
                test: /.css$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    // 'style-loader', // 再将样式插入到style标签中
                    'css-loader' // 将css转换成commonjs
                ]
            },
            {
                test: /.less$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    // 'style-loader', // 再将样式插入到style标签中
                    'css-loader', // 将css转换成commonjs
                    'less-loader', // 将less文件转换成css文件
                    {
                        loader:'postcss-loader',
                        options:{
                            plugins:()=>[
                                require('autoprefixer')(
                                    {browsers:['last 2 version','>1%','ios 7']}
                                )
                            ]
                        }
                    }
                ]
            },
            {
                test: /.(png|jpg|gif|jpeg)$/,
                use: [
                    {
                        loader:'file-loader',
                        // 图片指纹
                        options:{
                            name:'[name]_[hash:8].[ext]'
                        }
                        // loader: 'url-loader',
                        // options: {
                        //     limit: 40 * 1024 // 40k
                        // }
                    }
                ]
            },
            {
                test: /.(woff|woff2|eot|ttf|otf|otf)$/,
                use: [
                    {
                        loader:'file-loader',
                        options:{
                            name:'[name]_[hash:8].[ext]'
                        }
                    }
                ]
            }
        ]
    },
    plugins:[
        // css使用contenthash，避免css没变js变化的时候，css的hash值页随着发布一起变化
        new MiniCssExtractPlugin({
            filename:'[name]_[contenthash:8].css',
        }),
        // 压缩css文件
        new OptimizeCssAssetsPlugin({
            assetNameRegExp:/.css$/g,
            // css预处理器
            cssProcessor:require('cssnano')
        }),
        // 压缩html
        new HtmlWebpackPlugin({
            // html模板所在路径
            template:path.join(__dirname,'src/index.html'),
            // 指定输出文件名称
            filename:'reactComp.html',
            // 使用哪个chunk生成html页面
            chunks:['reactComp'],
            // 为true时，jscss会自动注入此html中来
            inject:true,
            // 处理换行，空格，注释
            minify:{
                html5:true,
                collapseWhitespace:true,
                preserveLineBreaks:false,
                minifyCSS:true,
                minifyJS:true,
                removeComments:false
            }
        }),
        // 自动清除dist目录下的文件
        new CleanWebpackPlugin()
    ]
}