css提取 （mini-css-extract-plugin）

1、安裝

  npm i mini-css-extract-plugin -D 
  // 或
  npm i extract-text-webpack-plugin@next -D 

2、webpack配置文件引入及配置：

 const MiniCssExtractPlugin=require('mini-css-extract-plugin')
 // const ExtractTextWebpackPlugin=require('extract-text-webpack-plugin')

// css,scss,sass,less
{
    test:/\.(sa|sc|c)ss$/,
    use: [
      process.env.NODE_ENV === 'development' ? 'style-loader': MiniCssExtractPlugin.loader,
      'css-loader',
      'sass-loader'
    ]
}

//最后對應(yīng)環(huán)境下的plugins中
new MiniCssExtractPlugin({
  filename: "[name].css"
})

??注意： MiniCssExtractPlugin 推薦只用于生產(chǎn)環(huán)境，因?yàn)樵摬寮陂_發(fā)環(huán)境下會導(dǎo)致HMR功能缺失，所以日常開發(fā)中，還是用style-loader。

公共部分提?。?optimization

多入口文件的項(xiàng)目，難免在不同的入口存在相同的部分（使用了相同組建、公共樣式等）,將多個css chunk合并成一個css文件

  optimization: {
    splitchunks: {
      cacheGroups: {
          commons: {
            name: 'commons' ,  // 提取出來的文件命名
            // name： ‘common/common’ //  即先生成common文件夾
            chunks: 'initial',   // initial表示提取入口文件的公共css及
js部分
            // chunks: 'all' // 提取所有文件的公共部分
           // test： '/\.css$/'  // 只提取公共css ，命名可改styles 
            minChunks:2, // 表示提取公共部分最少的文件數(shù)
            minSize: 0  // 表示提取公共部分最小的大小 
           // 如果發(fā)現(xiàn)頁面中未引用公共文件，加上enforce: true
          }
      }
    }
  }

css 壓縮： optimize-css-assets-webpack-plugin

1、安裝

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

2、引入及配置

 // webpack.pord.config.js
 const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')

// 普通壓縮
 plugins: [ 
   new OptimizeCSSAssetsPlugin ()
 ]

// 使用cssnano配置規(guī)則
// 先 npm i cssnano -D
plugins: [ 
  new OptimizeCSSAssetsPlugin ({
    // 默認(rèn)是全部的CSS都壓縮，該字段可以指定某些要處理的文件
    assetNameRegExp: /\.(sa|sc|c)ss$/g, 
    // 指定一個優(yōu)化css的處理器，默認(rèn)cssnano
    cssProcessor: require('cssnano'),
   
    cssProcessorPluginOptions: {
      preset: [  'default', {
          discardComments: { removeAll: true}, //對注釋的處理
          normalizeUnicode: false // 建議false,否則在使用unicode-range的時候會產(chǎn)生亂碼
      }]
    },
    canPrint: true  // 是否打印編譯過程中的日志
  })
]

??注意，這樣配置會存在只有css壓縮的問題，這時webpack4原本自己配置好的js壓縮會無效 ，需要重新配置UglifyJsPlugin（用于壓縮js,webpack4內(nèi)置了）一下

   optimization: {
     minimizer: [
        new UglifyJsPlugin({
         cache: true, // Boolean/String,字符串即是緩存文件存放的路徑
         parallel: true, // 啟用多線程并行運(yùn)行提高編譯速度
         sourceMap: true
        /*
          uglifyOptions: {
            output: {
              comments: false  // 刪掉所有注釋
            }，
            compress: {
                warning: false, // 插件在進(jìn)行刪除一些無用的代碼時不提示警告
                drop_console: true // 過濾console,即使寫了console,線上也不顯示
            }
          } */
       }),
       new OptimizeCSSAssetsPlugin({})
     ]
   }

配置方式：

• optimization的minimizer
• plugins中配置

消除未使用的CSS

1、安裝

  npm i purify-webpack purify-css -D

2、引入及配置

    const glob = require('glob')
    const PurifyCssPlugin = require('purifycss-webpack')
    plugins: [
      new PurifyCssPlugin ({
          paths: glob.sync(path.join(__dirname, '/*.html'))
      })
    ]