webpack4配置删除注释&&console.log

前言

对于webpack4中如何配置删除注释和删除console.log，搜索了大量的文章，大多数都是讲的都是使用webpack.optimize.UglifyJsPlugin或者是uglify-webpack-plugin，但实际操作的时候，会掉进很多坑，前者的使用方法，webpack内置方法已经移除该方法了，后者是因为UglifyJS不支持ES6语法，而且在webpack官网中已经找不到该插件了(建议看英文官网，中文官网坑多，文件更新不及时)

正确配置

需用到的插件terser-webpack-plugin

npm terser-webpackc-plugin --save-dev

在webpack.config.js文件中进行配置

// webpack.config.js

// 导入terser-webpack-plugin-->减少js体积(其中删除js的console.log和注释)
const TerserWebpackPlugin = require('terser-webpack-plugin');
// 实例化TerserWebpackPlugin对象
const terserPlugin = new TerserWebpackPlugin({
  parallel: 4,
  extractComments: true,
  terserOptions: {
    compress: {
      warnings: false,
      drop_console: true,
      drop_debugger: true,
      pure_funcs: ['console.log'] //移除console
    }
  }
});

module.exports = {
	optimization: {
    	minimizer: [
      	// 只有打包环境为production时才能生效
      	terserPlugin
    ],
  },
}

具体terser-webpack-plugin更多配置，请阅读TerserWebpackPlugin
此外还有本人从0到1的webpack配置gitee仓库
最后欢迎一起交流，谢谢！