uglifyjs-webpack-plugin 清除项目console，设置配置文件，vue打包css,js加版本号

安装：

npm install uglifyjs-webpack-plugin --save

创建 vue.config.js

//  引入uglifyjs-webpack-plugin
const UglifyPlugin = require('uglifyjs-webpack-plugin')

module.exports = {
    configureWebpack: (config) => {
         let optimization = {
            minimizer: [new UglifyPlugin({
              // 删除console
                uglifyOptions: {
                    parallel: true,
                    warnings: false,
                    compress: {
                      drop_console: false, //是否清除所有console
                      drop_debugger: true,//是否清除debugger
                      pure_funcs: ['console.log','console.info','console.warn','console.debug'] //drop_console 设置false,需要特殊清除的
                    }
                }
             })]
          }
          Object.assign(config, {
            optimization
          })
    }
}

特殊判断（生产环境使用）： 

 1.项目目录创建
.env.dev 文件

NODE_ENV = 'development'
VUE_APP_TITLE = 'development'

.env.prod 文件

NODE_ENV='production'
VUE_APP_TITLE='prod'

 2.使用：
安装 npm install process --save

package.json 配置修改，加载配置文件

  "scripts": {
    "serve": "vue-cli-service serve --mode dev", //加载.env.dev 配置文件
    "build": "vue-cli-service build --mode prod", //加载.env.prod配置文件
  },

process.env.NODE_ENV 可以获取项目的配置的环境
 

3. 生产环境清除console
 

//  引入uglifyjs-webpack-plugin
const UglifyPlugin = require('uglifyjs-webpack-plugin')

module.exports = {
     configureWebpack: (config) => {
          if (process.env.NODE_ENV == 'production') {
          // 为生产环境修改配置
          config.mode = 'production'
          // 将每个依赖包打包成单独的js文件
          let optimization = {
            minimizer: [new UglifyPlugin({
              // 删除console
                uglifyOptions: {
                    parallel: true,
                    warnings: false,
                    compress: {
                      drop_console: false, //是否清除所有console
                      drop_debugger: true,//是否清除debugger
                      pure_funcs: ['console.log','console.info','console.warn','console.debug'] //drop_console 设置false,需要特殊清除的
                    }
                }
             })]
          }
          Object.assign(config, {
            optimization
          })
        } else {
          // 为开发环境修改配置
          config.mode = 'development'
       }
     }
}

uglifyjs-webpack-plugin->

 vue 解决每次发版后要清理浏览器缓存（css,js加版本号） 

1.安装 standard-version

npm install standard-version --save--dev

2. package.json 配置：scripts加

 "scripts": {
    "release": "standard-version --no-verify --release-as patch  && git push --follow-tags", //小版本
    "release:minor": "standard-version --no-verify --release-as minor  && git push --follow-tags", //中版本
    "release:major": "standard-version --no-verify --release-as major  && git push --follow-tags",  //大版本
  },

3. vue.config.js配置

// 版本号
const config = require('./package.json');
let version = config.version.replace('.','').replace('.','');

module.exports = {
    configureWebpack: (config) => {
       // 打包后js文件名称添加时间戳
       config.output.filename = `js/[name].${version}.js`;
       config.output.chunkFilename = `js/[name].${version}.js`;
      //  config.output.chunkFilename = `js/chunk.[id].${version}.js`;
    },
    css: { 
      // chunkFilename: `css/chunk.[id].${version}.css`,
      extract: { // 打包后css文件名称添加时间戳
          filename: `css/[name].${version}.css`,
          chunkFilename: `css/[name].${version}.css`,
      }
    }

}

4.使用：
1).打包之前先运行  npm run release 或其他两个，自动增加版本号
2).运行打包

OTHER:(standard-version和commitizen混合配置可以实现动化 项目版本控制) 

 package.json 配置后的关键：

{
  "name": "",
  "version": "",
  "description": "",
  "scripts": {
    "commit": "git add . && git cz",
    "release": "standard-version -- --release as patch && git push --follow-tags",
    "release:minor": "standard-version -- --release as minor && git push --follow-tags",
    "release:major": "standard-version -- --release as major && git push --follow-tags"
  },
  "devDependencies": {
    "commitizen": "^4.2.4",
    "cz-conventional-changelog": "^3.2.0",
    "standard-version": "^9.3.1"
  },
  "config": {
    "commitizen": {
      "path": "./node_modules/cz-conventional-changelog"
    }
  }
}

可以参考其他同行的配置