vue项目中webpack使用（terser-webpack-plugin）打包时候去掉console.log与debugger调试

一、配置路径

1. vue-cli3 在项目目录下的vue.config.js文件里面配置

二、安装插件依赖

yarn add -D terser-webpack-plugin  或  npm install terser-webpack-plugin

三、vue-cli3修改 vue.config.js 文件中进行配置

1. 在文件头部引入

//打包配置自动忽略console.log等
const TerserPlugin = require("terser-webpack-plugin");

2. 在module.exports下configureWebpack中plugins配置

//打包环境去掉console.log等
new TerserPlugin({
      terserOptions: {
      ecma: undefined,
      warnings: false,
      parse: {},
      compress: {
        drop_console: true,
        drop_debugger: false,
        pure_funcs: ['console.log'], // 移除console
      },
    },
}),

3. 在vue.config.js文件配置全部如下

//打包配置自动忽略console.log等
const TerserPlugin = require("terser-webpack-plugin");

module.exports = {
   publicPath: './',
   devServer: {
   	......
   },
   css:{
   	......
   },
   configureWebpack: {
   plugins: [
     //打包环境去掉console.log
     new TerserPlugin({
       cache: true,//降版本后添加
       sourceMap: false,//降版本后添加
     	// 多进程
       parallel: true,//降版本后添加
       terserOptions: {
         ecma: undefined,
         warnings: false,
         parse: {},
         compress: {
           drop_console: true,
           drop_debugger: false,
           pure_funcs: ['console.log'], // 移除console
         },
       },
     }),
   ],
 }
}

报错效果如下：TypeError: Cannot read property ‘javascript’ of undefined
解决问题如下：使用版本 “terser-webpack-plugin”: “^4.2.3”

yarn add -D terser-webpack-plugin@4.2.3  或 npm install terser-webpack-plugin@4.2.3

//在new TerserPlugin增加多进程打包速度快点
new TerserPlugin({
    cache: true,// 降低版本号后增加
	sourceMap: false,//降低版本号后增加
	// 多进程
	parallel: true,//降低版本号后增加
	terserOptions: {
	    ecma: undefined,
	    warnings: false,
		parse: {},
		compress: {
			drop_console: true,
			drop_debugger: false,
			pure_funcs: ['console.log'], // 移除console
		},
	},
}),