一、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原始配置

webpack -- 完整入門學習筆記（六）