js/chunk-962737f2.1555a4ea.js from UglifyJs Unexpected token: punc «{», expected: punc «;» [js/chunk-962737f2.1555a4ea.js:1,213] - vue.js

Question

useing vue-cli4
Using UglifyJsPlugin then leads to a series of problems because I want to compress the package size of the component to optimize the server response
Babel. Config. Js es2015 has been replaced # Babel/preset - env I did the following configuration
There is still a syntax validation problem
package.json
"dependencies": {
"#babel/preset-react": "^7.9.4",
"#babel/preset-stage-3": "^7.8.3",
"babel": "^6.23.0",
"babel-plugin-transform-runtime": "^7.0.0-beta.3",
"babel-polyfill": "^6.26.0",
"bootstrap": "^4.4.1",
"bootstrap-vue": "^2.12.0",
"cli": "^1.0.1",
"core-js": "^3.6.4",
"markdown-loader": "^5.1.0",
"marked": "^0.8.2",
"mavon-editor": "^2.8.3",
"register-service-worker": "^1.7.1",
"transform-runtime": "0.0.0",
"uglifyjs-webpack-plugin": "^2.2.0",
"vue": "^2.6.11",
"vue-router": "^3.1.6"
},
"devDependencies": {
"#babel/cli": "^7.8.4",
"#babel/core": "^7.9.0",
"#babel/plugin-proposal-class-properties": "^7.4.4",
"#babel/plugin-transform-runtime": "^7.4.4",
"#babel/preset-env": "^7.9.5",
"#babel/runtime": "^7.4.5",
"#vue/cli-plugin-babel": "^4.3.1",
"#vue/cli-plugin-eslint": "^4.3.1",
"#vue/cli-plugin-pwa": "^4.3.1",
"#vue/cli-plugin-router": "^4.3.1",
"#vue/cli-service": "^4.3.1",
"babel-loader": "^7.1.5",
"compression-webpack-plugin": "^3.1.0",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^6.2.2",
"sass-loader": "^8.0.2",
"sass-resources-loader": "^2.0.3",
"style-loader": "^1.1.4",
"vue-markdown-loader": "^2.4.1",
"vue-template-compiler": "^2.6.11"
}
babel.config.js
module.exports = {
["#babel/preset-env", {
"targets": {
"browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
}
}]
}
vue.config.js
const path = require('path');
const CompressionPlugin = require('compression-webpack-plugin')
// 配置代码压缩
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
/*配置cdn 引用加速*/
const cdn = {
css: ['https://cdn.bootcss.com/element-ui/2.13.1/theme-chalk/index.css',
'https://cdn.bootcss.com/twitter-bootstrap/4.4.1/css/bootstrap.min.css'
],
js: [
'https://cdn.bootcss.com/jquery/3.5.0/jquery.min.js',
'https://unpkg.com/vue/dist/vue.js',
'https://unpkg.com/element-ui/lib/index.js',
'https://cdn.bootcss.com/element-ui/2.13.1/index.js',
]
}
module.exports = {
publicPath: './',
outputDir: 'dist',
lintOnSave: true,
chainWebpack: (config) => {
config.module
.rule('images')
.use('image-webpack-loader')
.loader('image-webpack-loader')
.options({bypassOnDebug: true})
.end()
config.module.rule('md')
.test(/\.md/)
.use('vue-loader')
.loader('vue-loader')
.end()
.use('vue-markdown-loader')
.loader('vue-markdown-loader/lib/markdown-compiler')
.options({
raw: true
})
config.module.rule('js').test(/\.js$/).use('babel-loader').loader('babel-loader')
/* 配置 babel-loader */
const babel_loader = config.module.rule('babel-loader')
babel_loader.exclude.add(/(node_modules|bower_components)/)
babel_loader.test(/\.(e|j)s$/).use('babel-loader').loader('babel-loader')
if (process.env.NODE_ENV === 'production') {
config.plugin('html')
.tap(args => {
args[0].cdn = cdn;
return args;
});
if (process.env.npm_config_report) {
config
.plugin('webpack-bundle-analyzer')
.use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
.end();
config.plugins.delete('prefetch')
}
} else {
config.plugin('html')
.tap(args => {
args[0].cdn = cdn;
return args;
});
}
},
configureWebpack: (config) => {
config.entry.app = ["babel-polyfill", "./src/main.js"];
if (process.env.NODE_ENV === 'production') {
// 为生产环境修改配置...
config.mode = 'production'
return {
optimization: {
minimizer: [
new UglifyJsPlugin({
uglifyOptions: {
warnings: false,
compress: {
pure_funcs: ['console.log', 'console.debug']//移除console
}
}
})
]
},
externals: {
/* 包名 : 全局变量名*/
'vue': 'Vue',
/*
'vuex': 'Vuex',
'vue-router': 'VueRouter',
'axios': 'axios',*/
// "Bootstrap": "bootstrap",
"elementui": 'ElementUI ',
},
plugins: [
//生产环境自动删除console
/* new UglifyJsPlugin({
uglifyOptions: {
compress: {
warnings: false,
pure_funcs: ['console.log']//移除console
},
/!* compress: {
warnings: false,
drop_debugger: true,
drop_console: true,
},*!/
},
sourceMap: false,
parallel: true,
}),*/ new CompressionPlugin({
test: /\.js$|\.html$|\.css/, //匹配文件名
threshold: 10240, //对超过10k的数据进行压缩
deleteOriginalAssets: false //是否删除原文件
})]
}
} else if (process.env.NODE_ENV === 'development') {
config.mode = 'development';
Object.assign(config, {
resolve: {
alias: {
'#': path.resolve(__dirname, './src'),
'#c': path.resolve(__dirname, './src/components')
}
}
});
return {
externals: {
'vue': 'Vue',
"elementui": 'ElementUI ',
},
plugins: [new CompressionPlugin({
test: /\.js$|\.html$|\.css/,
threshold: 10240,
deleteOriginalAssets: false
})]
}
}
},
productionSourceMap: false,
css: {
extract: false,
sourceMap: false,
loaderOptions: {},
requireModuleExtension: false
},
parallel: require('os').cpus().length > 1,
pwa: {},
devServer: {
open: process.platform === 'darwin',
host: '0.0.0.0',
port: 2001,
https: false,
hotOnly: false,
open: true,
proxy: {
'/data': {
target: 'http://localhost:7000',
changeORIGIN: true
}
},
before: (app) => {
}
},
pluginOptions: {}
}
The above is the full configuration of my project. This problem has been bothering me for many days. I have tried many methods, but they have no effect