webpack的js压缩插件如何使用？

Question

网上很多资料都是压缩混淆过的js文件，他们是用的什么工具来压缩混淆的呢？
查到过一个webpack的插件uglifyjs-webpack-plugin。但是不知道怎么使用。
根据教程一步步走，压缩混淆完之后没法使用了。
我的入口文件是这样的：

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

谢谢。

Answer 1

webpack中每一个文件都是模块，在文件中申明的方法名都会被压缩掉。所以你想达到在页面中直接使用这些方法要改成

window.lottery = (function(){
    function lottery(){
        this.name="lottery name";
    }
    return lottery;
})

Answer 2

原因不是你的reserved没生效，是因为你的compress设置，true会把子属性unused也设置为true，未被运行的代码都被删掉了。

你可以试试

compress: {
    unused: false,
}

Answer 3

new webpack.optimize.UglifyJsPlugin({
    // 最紧凑的输出
    beautify: false,
    // 删除所有的注释
    comments: false,
    compress: {
        // 在UglifyJs删除没有用到的代码时不输出警告
        warnings: false,
        // 删除所有的 `console` 语句
        // 还可以兼容ie浏览器
        drop_console: true,
        // 内嵌定义了但是只用到一次的变量
        collapse_vars: true,
        // 提取出出现多次但是没有定义成变量去引用的静态值
        reduce_vars: true
    }
})