10、提取css

打包的css文件，会在打包出来的js文件里面。现在使用mini-css-extract-plugin这个插件可以单独把css文件分离出来

 

提取css步骤

1、安装插件

cnpm i mini-css-extract-plugin -S

2、rules配置

{
    test : /\.css$/,
    use : ['style-loader',
    {
        loader:MiniCssExtractPlugin.loader,
        options:{
            publicPath: '../'
        }
    },'css-loader']
}

3、插件配置，告诉webpack要提取的css文件路径

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

new MiniCssExtractPlugin({
   filename : './css/index.css'
})

 

压缩css

提取出来的css文件并没有压缩，可以使用optimize-css-assets-webpack-plugin这个插件进行压缩

1、安装

cnpm i optimize-css-assets-webpack-plugin -S

2、插件配置

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

new OptimizeCssAssetsWebpackPlugin({
    assetNameRegExp : /\.css$/g, //匹配要优化或者要压缩的资源名
    cssProcessor : require('cssnano'), //压缩和优化css处理器，默认写cssnano即可
    cssProcessorPluginOptions : {
        preset : ['default', {
            discardComments : { //去除注释
                removeAll: true
            }
        }]
    },
    canPrint :true
})