ERROR in app.bundle.js from UglifyJs Unexpected token: name «element», expected: punc «;» 的错误处理

遇到问题

webpack打包时使用UglifyJs（github地址）来压缩美化JS代码，在npm run build时报错了：

// webpack.prod.js 内容
const merge = require('webpack-merge')
const UglifyJSPlugin = require('uglifyjs-webpack-plugin')
const common = require('./webpack.common.js')

module.exports = merge(common, {
    plugins: [
        new UglifyJSPlugin()
    ]
})

报错截图：

解决方法

需要安装babel-preset-es2015，若babel-core、babel-loader没有安装的话也要安装上：

npm install --save-dev babel-loader babel-core babel-preset-es2015

安装完以后，再修改webpack.prod.js中添加rules规则：

const merge = require('webpack-merge')
const UglifyJSPlugin = require('uglifyjs-webpack-plugin')
const common = require('./webpack.common.js')

module.exports = merge(common, {
    plugins: [
        new UglifyJSPlugin()
    ],
    module: {
        rules: [
            {
                test: /\.js$/,
                use: [{
                    loader: 'babel-loader',
                    options: {
                        presets: ['es2015']
                    }
                }],
                exclude: /node_modules/
            }
        ]
    }
})

再执行npm run build，如果出现了以下错误（babel相关的错误）：

这个错误日志指出了原因：找不到'@babel/core'，再按照错误提示的操作说明可以知道：babel-loader@8 需要 Babel 7（里面的包'@babel/core'），如果你想要使用 Babel 6.x版本，你应该安装'babel-loader@7'。在package.json文件中可以看到我们安装的版本：

那我们就按照提示进一步处理：

npm install --save-dev babel-loader@7

此时package.json文件中安装的版本：

此时再执行npm run build即可成功构建了。

参考文章：
https://segmentfault.com/a/1190000011212544