Vue CLI 3 vue.config.js vs webpack.config.js for plugins

Question

我正在使用 Vue CLI 3，我需要添加 Terser Webpack 插件来删除控制台.log和代码中的注释。这不适用于我当前的设置 - 日志和注释仍在构建中。我的生产工作流程：

1. 运行npm run build
2. 运行serve -s dist

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

package.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代码的正确位置吗？

Answer 1

在 Vue CLI 项目中，Webpack 是通过configureWebpack或chainWebpack属性在<projectRoot>/vue.config.js中配置的。您可以使用vue inspect从命令行检查已解析的 Webpack 配置。

在您的情况下，请添加包含以下内容的<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,
},
}),
],
}
}
}