webpack---生产环境配置_css相关

一、提取css成单独文件

依赖：mini-css-extract-plugin -D

const MiniCssExtractPlugin = require('mini-css-extract-plugin')
plugins: [
    new MiniCssExtractPlugin({
        filename: 'css/xxx.css'
    })
]
use: [
    // 取代style-loader,提取js中的css成单独的文件
    MiniCssExtractPlugin.loader,
    'css-loader'
]

二、对css做兼容处理

依赖：postcss-loader、postcss-preset-env  -D

use: [
    'css-loader',
    {
        loader: 'postcss-loader',
        options: {
            ident: 'postcss',
            plugins: () => {
                // 帮助postcss找到package.json中browserlist里面的配置
                require('postcss-preset-env')()
            }
        }
    }
]

package.json中
browserlist: {
    "development": [
        "last 1 chrome version",
        "last 1 firefox version",
        "last 1 safari version"
    ],
    // postcss-preset-env默认检查生产的配置，跟webpack的mode配置无关
    // 设置process.env.NODE_ENV='development'，可以检查上面的开发匹配
    "production": [
        ">0.2%",
        "not dead",
        "not op_mini all"
    ]
}

三、压缩css

依赖：optimize-css-assets-webpack-plugin

const OptimazeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin')
plugins: [
    new OptimazeCssAssetsWebpackPlugin()
]