title: Minify/Uglify my app
body: <p>My app that I want to run in Chrome/Firefox is:</p>
  
  <ul>
  <li>written in typescript</li>
  <li>uses react</li>
  <li>written with es next features (modules, imports, etc)</li>
  <li>has some import that are plain js files</li>
  <li>webpack 3</li>
  </ul>
  
  <p>I can build and run my app fine without minifying but when I try to minify/uglify, thatis call webpack with <code>--optimize-minimize</code>, I get:</p>
  
  <blockquote>
    <p>ERROR in ./dist/app.js from UglifyJs
    Unexpected token: name (App) [./src/app.tsx:34,0][./dist/app.js:40677,6]</p>
  </blockquote>
  
  <p>What could be causing this?</p>
  
  <p>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.</p>
  
  <p>Here is my webpack.config.js:</p>
  
  <pre><code>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"]
    }
  };
  </code></pre>
  
  <p>My tsconfig.json:</p>
  
  <pre><code>{
      "compilerOptions": {
          "sourceMap": true,
          "noImplicitAny": true,
          "module": "esnext",
          "target": "esnext",
          "jsx": "react",
          "allowJs": true,
          "baseUrl": ".",
          "paths": {
              "*": ["src/typings/*", "*"]
          }
      },
      "include": [
          "./src/**/*"
      ]
  }
  </code></pre>
  
  <p>My .babelrc file:</p>
  
  <pre><code>{
      "presets":  [
          ["env", {
              "modules": false,
              "forceAllTransforms": true
          }]
        ],
      "plugins": ["transform-object-assign"]
  }
  </code></pre>
  
  <p><strong>UPDATE:</strong>
  Thanks to comments by Niba and post by Sebastian, I got rid of <code>--optimize-minimize</code> and installed the <code>uglifyjs-webpack-plugin</code> 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 <code>t is undefined</code> console error. Setting <code>compress: false</code> 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.</p>
  
  <p>My updated webpack.config.js:</p>
  
  <pre><code>const resolve = require('path').resolve;
  const webpack = require('webpack');
  const UglifyJSPlugin = require('uglifyjs-webpack-plugin')
  
  module.exports = (env) =&gt; {
    const isDevBuild = !(env &amp;&amp; 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
          }
        })
      ]
    }
  };
  </code></pre>