title: Vue CLI 3 vue.config.js vs webpack.config.js for plugins
body: <p>I'm using Vue CLI 3, and I need to add the <a href="https://webpack.js.org/plugins/terser-webpack-plugin/" rel="noreferrer">Terser Webpack Plugin</a> for removing <em>console.log</em> and <em>comments</em> from the code. This isn't working with my current setup - logs and comments are still in the build. My production workflow:</p>
  
  <ol>
  <li>Run <strong><code>npm run build</code></strong></li>
  <li>Run <strong><code>serve -s dist</code></strong> </li>
  </ol>
  
  <p><strong>vue.config.js:</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>module.exports = {
    publicPath: "./"
  }
  </code></pre>
  
  <p><strong>webpack.config.js:</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>const TerserPlugin = require('terser-webpack-plugin');
  
  module.exports = {
    optimization: {
      minimize: true,
      minimizer: [
        new TerserPlugin({
          terserOptions: {
            ecma: undefined,
            warnings: false,
            parse: {},
            compress: { drop_console: true },
            mangle: true, // Note `mangle.properties` is `false` by default.
            module: false,
            output: { comments: false },
            toplevel: false,
            nameCache: null,
            ie8: false,
            keep_classnames: undefined,
            keep_fnames: false,
            safari10: false,
          },
        }),
      ],
    },
  };
  </code></pre>
  
  <p><strong>package.json</strong>:</p>
  
  <pre><code>{
    "name": "cli3pwavuetify",
    "version": "0.1.0",
    "private": true,
    "scripts": {
      "serve": "vue-cli-service serve",
      "build": "vue-cli-service build",
      "lint": "vue-cli-service lint"
    },
    "dependencies": {
      "core-js": "^2.6.5",
      "register-service-worker": "^1.6.2",
      "vue": "^2.6.10",
      "vue-router": "^3.0.3",
      "vuetify": "^2.0.0",
      "vuex": "^3.0.1",
      "date-fns": "^2.4.1",
      "firebase": "^7.0.0",
      "lodash": "^4.17.15",
      "vue-flickity": "^1.2.1"
    },
    "devDependencies": {
      "@vue/cli-plugin-babel": "^3.11.0",
      "@vue/cli-plugin-eslint": "^3.11.0",
      "@vue/cli-plugin-pwa": "^3.11.0",
      "@vue/cli-service": "^3.11.0",
      "@vue/eslint-config-prettier": "^5.0.0",
      "babel-eslint": "^10.0.1",
      "eslint": "^5.16.0",
      "eslint-plugin-prettier": "^3.1.0",
      "eslint-plugin-vue": "^5.0.0",
      "material-design-icons-iconfont": "^5.0.1",
      "prettier": "^1.18.2",
      "sass": "^1.17.4",
      "sass-loader": "^7.1.0",
      "stylus": "^0.54.5",
      "stylus-loader": "^3.0.2",
      "terser-webpack-plugin": "^2.1.2",
      "uglifyjs-webpack-plugin": "^2.2.0",
      "vue-cli-plugin-vuetify": "^0.6.3",
      "vue-template-compiler": "^2.6.10",
      "vuetify-loader": "^1.2.2"
    },
    "eslintConfig": {
      "root": true,
      "env": {
        "node": true
      },
      "extends": [
        "plugin:vue/essential",
        "@vue/prettier"
      ],
      "rules": {},
      "parserOptions": {
        "parser": "babel-eslint"
      }
    },
    "postcss": {
      "plugins": {
        "autoprefixer": {}
      }
    },
    "browserslist": [
      "&gt; 1%",
      "last 2 versions"
    ]
  }
  </code></pre>
  
  <p>What do I need to change to make it work? Is <code>webpack.config.js</code> the correct place for the code?</p>