webpack的js壓縮插件如何使用？

網(wǎng)上很多資料都是壓縮混淆過的js文件，他們是用的什么工具來壓縮混淆的呢？
查到過一個webpack的插件uglifyjs-webpack-plugin。但是不知道怎么使用。
根據(jù)教程一步步走，壓縮混淆完之后沒法使用了。
我的入口文件是這樣的：

function abc(){
    console.log("abc");
}
console.log(12);
var first="first name";
console.log(first);
var lottery=(function(){
    function lottery(){
        this.name="lottery name";
    }
    return lottery;
})

壓縮混淆完之后定義的變量成了一個字符，abc(),first,lottery這些自定義的方法或者變量都沒有了，但是我在頁面中都使用引用了這些方法。
是哪里的代碼有問題呢？
我的配置代碼如下：

const uglifyWebpackPlugin=require("uglifyjs-webpack-plugin");
const path=require("path")
module.exports={
    entry:"./src/index",
    output:{
        path: path.resolve(__dirname, 'dist'),
        filename: 'build.js'
    },
    plugins:[
        new uglifyWebpackPlugin(
            {
            uglifyOptions:{
                mangle:{
                    reserved:["abc","first","lottery"]
                },
                compress:true
            }
        })
    ]
}

謝謝。