如何使用webpack提取和压缩CSS并处理兼容性

项目开发中我们会写很多样式，包括页面样式和公共样式等。在打包时会经过一些loader的处理把CSS打包进JS里或页面head里，这样在生产环境对于加载资源来说可能因资源较大而影响加载速度。有没有一种办法可以在我们在打包处理时把JS和CSS分开并对CSS进行压缩处理，使加载资源时更方便更合理且具备某些浏览器的兼容性而不用我们手动处理兼容性问题呢？

答案是肯定的，接下来我们逐个来看下~~

# 1. 提取公共样式

安装插件

npm install mini-css-extract-plugin@1.6.2 -D

配置webpack.config.js文件

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
modules.exports = {
    module: {
        rules: [{
            test: /\.css$/,
            use: [
                // 创建style标签将样式放入
                // 'style-loader',
                // 使用 MiniCssExtractPlugin.loader 代替 style-loader
                MiniCssExtractPlugin.loader,
                // 将css文件整合到js文件中
                'css-loader'
            ]
        }]
    },
    plugins:[
        // 将输出文件放到css文件夹并重命名
        new MiniCssExtractPlugin({
            filename: 'css/common.css'
        })
    ]
}

运行npx webpack打包试下，是不是CSS已经被提取出来了，nice ~~

# 2. CSS兼容性处理

安装插件

npm install postcss-loader@3 postcss-preset-env@6 -D

注意：postcss-loader与postcss-preset-env版本不同配置有很大差异

配置webpack.config.js文件

module.exprots = {
     module: {
        rules: [{
            test: /\.css$/,
            use: [
                // 创建style标签将样式放入
                // 'style-loader',
                MiniCssExtractPlugin.loader,
                // 将css文件整合到js文件中
                'css-loader',
                {
                    // postcss找到package.json中browserslist节点里面的配置
                    // 通过配置加载制定的css兼容性样式
                    loader: 'postcss-loader',
                    options: {
                        ident: 'postcss',
                        plugins: () => ([
                            require('postcss-preset-env')()
                        ])
                    }
                }
            ]
        }]
    }
}

配置package.json文件

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

配置好后再去打包可以发现CSS一些属性已经自动加上了前缀，nice~~

或者你还可以这样处理CSS前缀问题

安装插件

npm install postcss-loader@4 autotprefixer@8 -D

创建postcss.config.js配置文件，内容如下：

module.exports = {
    plugins: [
        require('autoprefixer')
    ]
}

配置webpack.config.js文件

module.exports = {
    module: {
        rules: [{
            test: /\.css$/,
            use: [
                // 创建style标签将样式放入
                // 'style-loader',
                MiniCssExtractPlugin.loader,
                // 将css文件整合到js文件中
                'css-loader',
                'postcss-loader'
            ]
        }]
    }
}

配置好后再去打包可以发现这样也可以给CSS加上前缀，nice~~

# 3. 压缩CSS

安装插件

npm install optimize-css-assets-webpack-plugin -D

配置webpack.config.js文件

const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');

module.exprots = {
    plugins: [
        new MiniCssExtractPlugin({
            filename: 'css/common.css'
        }),
        new OptimizeCssAssetsWebpackPlugin()
    ]
}

配置好后再去打包可以发现CSS已经被压缩了，nice~~