webpack4：提取、压缩css(公共部分)、消除多余css

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'
    ]
}

//最后对应环境下的plugins中
new MiniCssExtractPlugin({
  filename: "[name].css"
})

📢注意： MiniCssExtractPlugin 推荐只用于生产环境，因为该插件在开发环境下会导致HMR功能缺失，所以日常开发中，还是用style-loader。

---

公共部分提取： optimization

多入口文件的项目，难免在不同的入口存在相同的部分（使用了相同组建、公共样式等）,将多个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, // 表示提取公共部分最少的文件数
            minSize: 0  // 表示提取公共部分最小的大小 
           // 如果发现页面中未引用公共文件，加上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配置规则
// 先 npm i cssnano -D
plugins: [ 
  new OptimizeCSSAssetsPlugin ({
    // 默认是全部的CSS都压缩，该字段可以指定某些要处理的文件
    assetNameRegExp: /\.(sa|sc|c)ss$/g, 
    // 指定一个优化css的处理器，默认cssnano
    cssProcessor: require('cssnano'),
   
    cssProcessorPluginOptions: {
      preset: [  'default', {
          discardComments: { removeAll: true}, //对注释的处理
          normalizeUnicode: false // 建议false,否则在使用unicode-range的时候会产生乱码
      }]
    },
    canPrint: true  // 是否打印编译过程中的日志
  })
]

📢注意，这样配置会存在只有css压缩的问题，这时webpack4原本自己配置好的js压缩会无效 ，需要重新配置UglifyJsPlugin（用于压缩js,webpack4内置了）一下

   optimization: {
     minimizer: [
        new UglifyJsPlugin({
         cache: true, // Boolean/String,字符串即是缓存文件存放的路径
         parallel: true, // 启用多线程并行运行提高编译速度
         sourceMap: true
        /*
          uglifyOptions: {
            output: {
              comments: false  // 删掉所有注释
            }，
            compress: {
                warning: false, // 插件在进行删除一些无用的代码时不提示警告
                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'))
      })
    ]

作者：前端girl吖
链接：https://www.jianshu.com/p/dd9afa5c4d0f
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。