플러그인용 Vue CLI 3 vue.config.js 대 webpack.config.js

플러그인용 Vue CLI 3 vue.config.js 대 webpack.config.js

나는 Vue CLI 3을 사용하고 있는데, console.log와 코드의 코멘트를 제거하기 위한 Terser Webpack 플러그인을 추가해야 해.내 현재 설정에서 작동하지 않음 - 로그와 설명이 빌드에 남아 있음.내 프로덕션 워크플로우:

1. 달리다
2. 달리다

vue.config.js:

module.exports = {
  publicPath: "./"
}

webpack.config.js:

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,
        },
      }),
    ],
  },
};

꾸러미json:

{
  "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": [
    "> 1%",
    "last 2 versions"
  ]
}

작동하려면 무엇을 변경해야 하는가?이다webpack.config.js암호의 정확한 위치?

Vue CLI 프로젝트에서 웹 팩은 또는 속성을 통해 에서 구성된다.을(를) 사용하여 명령줄에서 확인된 WebPack 구성을 검사할 수 있다.

당신의 경우, a를 추가하라.<projectRoot>/vue.config.js다음 내용 포함:

const TerserPlugin = require('terser-webpack-plugin')

module.exports = {
  configureWebpack: config => {
    config.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,
          },
        }),
      ],
    }
  }
}

참조URL: https://stackoverflow.com/questions/58328991/vue-cli-3-vue-config-js-vs-webpack-config-js-for-plugins