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