webpack中css打包成文件

抽离css文件

// 安装本地插件
cnpm i mini-css-extract-plugin -D

// 引入
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

// 使用
plugins: [
    new MiniCssExtractPlugin({
      filename: '[name]_[contenthash:8].css'
    })
]

// 注意，该插件不能和style-loader使用，
// 因为style-loader是用来将css以style的方式插入的
{
    test: /.css$/,
    use: [
        // 需要将loader中css/less等文件里面的style-loader，
        // 替换成该插件
        MiniCssExtractPlugin.loader,
        'css-loader'
    ]
},

压缩css文件

// 安装压缩css插件
cnpm i optimize-css-assets-webpack-plugin -D
// 同时需要配合cssnano插件使用
cnpm i cssnano -D

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

plugins: [
    new OptimizeCssAssetsWebpackPlugin({
        assetsNameReg: /\.css$/g,
        cssProcessor: require('cssnano')
    })
]

自动增加css兼容

// 首先安装postcss-loader和autoprefixer
cnpm i postcss-loader autoprefixer -D

// 对样式处理文件增加autoprefixer配置
// 处理css私有前缀和兼容
// 例如，增加如下配置
{
    test: /.less$/,
    use: [
        MiniCssExtractPlugin.loader,
        'css-loader',
        'less-loader',
        // 增加autoprefixer处理
        {
            loader: 'postcss-loader',
            options: {
                plugins: () => [
                    require('autoprefixer')({
                        // 通过browsers选项指定兼容的版本
                        // 推荐在webpack中配置在package.json中
                        browsers: [
                            'last 2 version',
                            '>1%',
                            'ios 7'
                        ]
                    })
                ]
            }
      }
    ]
}