How to uglify javascript using webpack

Question

Here is my webpack config:

var path = require('path');
var webpack = require('webpack');
var CompressionPlugin = require("compression-webpack-plugin");
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');

module.exports = {
    entry: './index.js',
    output: {
        path: __dirname,
        filename: 'public_html/assets/js/bundle.js'
    },
    resolveLoader: {
        modules: ["node_modules"]
    },

    module: {

        rules: [
            {
                enforce: 'pre',
                test: /\.tag$/,
                exclude: /node_modules/,
                loader: 'riotjs-loader',
            },

            {
                test: /\.js$/,
                loader: 'babel-loader',
                exclude: /node_modules/,
                options: {
                    presets: [
                    'es2015',
                    ],
                    "babelrc": false
                }
            },

            {
                test: /\.css$/,
                use: [
                    {
                        loader: "css-loader",
                        options: {
                            modules: false
                        }
                    }
                ]
            }
        ]
    },
    plugins: [
        new webpack.LoaderOptionsPlugin({debug: true}),
        new UglifyJSPlugin(),
        new webpack.ProvidePlugin({
            riot: 'riot'
        }),
        new CompressionPlugin({
                asset: "[path].gz[query]",
                algorithm: "gzip",
                test: /\.(js|html)$/,
                threshold: 10240,
                minRatio: 0.8
        })
    ]
}

This completely uglifies the bundle js but the problem is global variables references are lost. I mean the properties of global object DataMixin are lost.

For example, inside index.html I have:

<script>
    window.onload = function () {
        DataMixin.get_data_page_load(); //DataMixin defined in other js file
    };
</script>

After uglifying, I get error:

Cannot read property 'get_data_page_load' of undefined

How do I fix this? I am using webpack 2.

Answer 1

Removing presets fixed it but also had to remove arrow functions from my code.

Here is the solution I found: http://www.rootscopeblog.com/blog/post?=uglifying-riotjs-files-using-webpack-2

Answer 2

For webpack 2 you don't need to install the external uglify plugin.
In your webpack config replace this new UglifyJSPlugin(), with the following:

new webpack.optimize.UglifyJsPlugin({
      sourceMap: true,
      minimize: true,
      compressor: {
        warnings: false,
      },
    }),