WebpackでUglifyJsPluginを使ってminifyするとエラーが出力されてしまうので、その回避方法が知りたい

Question

React、Webpackの初心者です。
現在環境構築中（GulpとWebpack3.12.0使用）でして、jsxで叩くと通常通りにjsファイルが生成されるのですが、
ターミナルでは以下のエラーが出力されてしまいます。

エラー出力

[17:12:20] gulp-notify: [Error running Gulp] Error: component.js from UglifyJs
Unexpected token: name (Foo) [./src/js/jsx/component.jsx:10,6][component.js:900,6]

ERROR in component.js from UglifyJs
Unexpected token: name (Foo) [./src/js/jsx/component.jsx:10,6][component.js:900,6]

こちら調査するとwebpack.config.jsでUglifyJsPluginを使ってminifyすると、
reactがエラーを吐いてしまうため、以下のようにwebpack.DefinePluginを使って設定しました。
※process.env.NODE_ENVに'production'の設定。

webpack.config.js

/* ----------------------------------------------------------------------------------
外部ファイル読み込み
---------------------------------------------------------------------------------- */
const path = require('path');
const UglifyJsPlugin = require('../../node_modules/uglifyjs-webpack-plugin');


/* ----------------------------------------------------------------------------------
変数定義
---------------------------------------------------------------------------------- */
var webpack = require('../../node_modules/webpack');
var jsRootDir = './src/js/';


/* ----------------------------------------------------------------------------------
コンパイルの仕方を定義
---------------------------------------------------------------------------------- */
module.exports = {
    entry: {
        main: jsRootDir + 'main.js',
        component: jsRootDir + 'jsx/component.jsx' // JSXページ
    },
    output: {
        path: path.join(__dirname, 'dist'),
        publicPath: './public/js/',
        filename: "[name].js"
    },
    module: {
        loaders: [
            {
                test: /.(js|jsx)$/,
                loader: 'jsx-loader',
                exclude: /node_modules/
            }
        ]
    },
    resolve: {
        extensions: ['.js', '.jsx']
    },

    externals: {
        jQuery: 'jQuery'
    },
    node: {
        setImmediate: false
    },
    plugins: [
        new webpack.optimize.OccurrenceOrderPlugin(),
        new webpack.optimize.AggressiveMergingPlugin(),
        new webpack.ProvidePlugin({
            $: 'jquery',
            jQuery: 'jquery'
        }),

        new webpack.DefinePlugin({
            'process.env': { 'NODE_ENV': '"production"' }
        }),

        new webpack.optimize.UglifyJsPlugin({
            compress: {
                screw_ie8: false,
                dead_code: true,
                warnings: false
            },
            comments: false,
            mangle: false,
            sourceMap: true
        }),
        
        new webpack.HotModuleReplacementPlugin()
    ],

    devtool: 'source-map'
};

ただそれでも上記と同じようなエラーが出力されてしまいます。
new webpack.optimize.UglifyJsPluginを外せばエラーが出なくなりますが、
こちらのご教授のほどお願いいたします。

Answer 1

new webpack.optimize.UglifyJsPluginではなく、new UglifyJsPluginと、npm経由でインストールしたほうを呼んでください。Webpack 3に標準添付されているwebpack.optimize.UglifyJsPluginはES6に非対応です。

---

なお、UglifyJsPluginから呼ばれるuglify-esは開発が打ち切りになっていて、それを引き継いでterserという別プロジェクトとなっています。Webpack 4以上でJavaScriptを圧縮する場合、terser-webpack-pluginを使うのがいいかと思います。

Comments

[komiglas]

早急なご回答をいただきありがとうございます。
なるほどそ非対応でしたか。。

Webpack 4にアップしてterser-webpack-pluginを使用して試してみます。
ありがとうございました。