前言

对于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仓库 最后欢迎一起交流，谢谢！