webpack -- 完整入门学习笔记（六）

一、css压缩

这一节主要讲压缩代码，正常我们打包生产环境代码，js文件已经是压缩的，但是css并没有压缩，所以需要通过插件来压缩css代码，这个插件是optimize-css-assets-webpack-plugin和cssnano
安装

npm install optimize-css-assets-webpack-plugin cssnano --save-dev

调用

配置
注意这个配置，还需要在与plugins统计的optimization.minimizer中调用，其实也可以直接就在这个里面调用配置，但是必须在plugins里面调用一下

optimization: {
    new OptimizeCss({
      assetNameRegExp: /\.style\.css$/g,
      cssProcessor: cssnano,
      cssProcessorOptions: { discardComments: { removeAll: true } },
      canPrint: true,
    })
}

参数说明
assetNameRegExp全局正则匹配需要压缩代码的文件类型
cssProcessor采用哪种方式压缩，这里是cssnano
cssProcessorOptions.discardComments这个配置是清除所有注释样式
canPrint表示插件能够在console中打印信息，默认值是true
cssProcessorOptions.safe避免 cssnano 重新计算 z-index
cssProcessorOptions.autoprefixercssnano 集成了autoprefixer的功能，关闭autoprefixer功能
注意cssProcessor是cssnano的配置，所以需要参考cssnano的配置

二、js压缩

配置完上面的css压缩后，悲剧的发现，js文件已经不压缩了，所以只能采用官方的压缩js的插件来重新给压缩一下
安装

npm install uglifyjs-webpack-plugin --save-dev

调用

const UglifyJSWebpackPlugin = require('uglifyjs-webpack-plugin')

配置
这个插件配置，跟上面的一样，在plugins里面调用，在optimization里面再次调用配置，这个配置还可以去除js里面的debugger，console等东西哦

new UglifyJsPlugin({
  uglifyOptions: {
    compress: {
      warnings: false,
      drop_debugger: true,  //去掉debugger
      drop_console: true,  // 去掉console
      pure_funcs: ['console.log']// 移除console
    }
  },
  sourceMap: config.build.productionSourceMap,
  parallel: true
})

这样配置完成后，发现js文件又开始已经压缩了
参数说明
compress.warnings警告
compress.drop_debugger是否清除debugger，默认false
compress.drop_console是否清除console，默认false
compress.pure_funcs是否移除console，数组里面配置要移除的内容
compress.dead_code清除没有有的代码
uglifyjs选项配置
uglifyjs原始配置