Minify/Uglify my app

Question

My app that I want to run in Chrome/Firefox is:

• written in typescript
• uses react
• written with es next features (modules, imports, etc)
• has some import that are plain js files
• webpack 3

I can build and run my app fine without minifying but when I try to minify/uglify, thatis call webpack with --optimize-minimize , I get:

ERROR in ./dist/app.js from UglifyJs Unexpected token: name (App) [./src/app.tsx:34,0][./dist/app.js:40677,6]

What could be causing this?

I know this one might be a tough one to answer, but what I'm looking for is the config for an app that uses the same list of items that I am so that I can replicate it. How do I transpile to current Ecmascript in browsers and also minify my app? Thanks.

Here is my webpack.config.js:

const resolve = require('path').resolve;
const webpack = require('webpack');

module.exports = {
  entry: "./src/app.tsx",
  output: {
      filename: "app.js",
      path: __dirname
  },

  devtool: 'source-map',

  module: {
    rules: [
      {
        test: /\.js$/,
        loader: 'babel-loader',
        include: [resolve('src')],
        exclude: [/node_modules/]
      },
      { test: /\.tsx?$/, include: /src/, loader: "awesome-typescript-loader" },
      { enforce: "pre", test: /\.js$/, loader: "source-map-loader" },
      { test: /\.css?$/, loader: "style-loader!css-loader" }
    ]
  },

  resolve: {
    alias: {
      'mapbox-gl$': resolve('./node_modules/mapbox-gl/dist/mapbox-gl.js')
    },
    extensions: [".ts", ".tsx", ".js", ".json"]
  }
};

My tsconfig.json:

{
    "compilerOptions": {
        "sourceMap": true,
        "noImplicitAny": true,
        "module": "esnext",
        "target": "esnext",
        "jsx": "react",
        "allowJs": true,
        "baseUrl": ".",
        "paths": {
            "*": ["src/typings/*", "*"]
        }
    },
    "include": [
        "./src/**/*"
    ]
}

My .babelrc file:

{
    "presets":  [
        ["env", {
            "modules": false,
            "forceAllTransforms": true
        }]
      ],
    "plugins": ["transform-object-assign"]
}

UPDATE: Thanks to comments by Niba and post by Sebastian, I got rid of --optimize-minimize and installed the uglifyjs-webpack-plugin and added it to my webpack.config.js (below). The error went away however the page didn't display everything (specifically mapbox tiles), showing an ambiguous t is undefined console error. Setting compress: false fixed the issue however the files obviously aren't as small as they could be. There's a lot of compression options so I feel it's going to be difficult to track this issue down.

My updated webpack.config.js:

const resolve = require('path').resolve;
const webpack = require('webpack');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin')

module.exports = (env) => {
  const isDevBuild = !(env && env.prod);
  return {
    entry: "./src/app.tsx",
    output: {
        filename: "app.js",
        path: __dirname
    },

    devtool: 'source-map',

    module: {
      rules: [
        {
          test: /\.js$/,
          loader: 'babel-loader',
          include: [resolve('src')],
          exclude: [/node_modules/]
        },
        { test: /\.tsx?$/, include: /src/, loader: "awesome-typescript-loader" },
        { enforce: "pre", test: /\.js$/, loader: "source-map-loader" },
        { test: /\.css?$/, loader: "style-loader!css-loader" }
      ]
    },

    resolve: {
      alias: {
        'mapbox-gl$': resolve('./node_modules/mapbox-gl/dist/mapbox-gl.js')
      },
      extensions: [".ts", ".tsx", ".js", ".json"]
    },

    plugins: isDevBuild ? [
    ] : [
      new UglifyJSPlugin({
        sourceMap: true,
        uglifyOptions: {
          compress: false,
          mangle: true
        }
      })
    ]
  }
};

Answer 1

Using --optimize-minimize will use UglifyJS to minimize your code. My guess is that the default configuration tries to minimize Es5, bus since your target for TypeScript is set to esnext , UglifyJS can not handle that.

You have two options:

1. Set your target to ES5
2. Play with theconfiguration (in your webpack config), set ecma to 8 or something.

---

Even though webpack's documentation says that webpack.optimize.UglifyJsPlugin uses the uglifyjs-webpack-plugin under the hood, I am not sure with what version of webpack that is. Also, maybe the default configuration just does not work in your case :)