css 代码分割 合并 压缩

css 代码分割

  "sideEffects": ["*.css"],


    npm install --save-dev mini-css-extract-plugin@0.5.0
     const miniCssExtractPlugin = require('mini-css-extract-plugin')
     module:{
        rules:[  
            {
                test:/\.css$/,
                use:[ miniCssExtractPlugin.loader,'css-loader', 'postcss-loader' ] 
            } ,
            {
                test:/\.scss$/,
                use:[
                    miniCssExtractPlugin.loader,
                    // 'css-loader', 
                    {
                        loader:'css-loader',
                        options:{
                            importLoaders:2,
                            // modules:true   // 开启modules 模块化css
                        }
                    },
                    'sass-loader',
                    'postcss-loader' 
                ] 
            } 
        ]
    }, 
     plugins:[
          new miniCssExtractPlugin({
            filename:'[name].css',
            chunkFilename:'[name].chunk.css',
        }) 
    ]  


   压缩 css  代码插件
   npm i optimize-css-assets-webpack-plugin  -D
   const optimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin')
    optimization:{
        minimizer:[new optimizeCssAssetsWebpackPlugin({})]
    },
    plugins:[]