webpack - UgifyJS失败

Question

我想添加一个UglifyJS插件到我的webpack配置。入口点是简单的，看起来像这样：

import Vue from 'vue'; 
import Comp from './components/comp.vue'; 
Vue.component('somecomponent', { 
    render: h => h(Comp) 
}); 

，当我尝试运行的WebPack它抛出一个错误：

ERROR in source1.bundle.js from UglifyJs 
Unexpected token: operator (>) [./frontend/source1.js:7,0][source1.bundle.js:80,15] 

我缺少什么？这是我的配置

const path = require('path'); 
const webpack = require('webpack'); 
const CleanWebpackPlugin = require('clean-webpack-plugin'); 

module.exports = { 
    entry: { 
     source1: './frontend/source1.js', 
     source2: './frontend/source2.js' 
    }, 
    output: { 
     filename: '[name].bundle.js', 
     path: path.resolve(__dirname, 'static/bundles') 
    }, 
    plugins: [ 
     new CleanWebpackPlugin(['static/bundles']), 
     new webpack.optimize.UglifyJsPlugin({ 
      sourceMap: true, 
      compress: { 
       warnings: false 
      } 
     }) 
    ], 
    module: { 
     rules: [ 
      { 
       test: /\.vue$/, 
       loader: 'vue-loader', 
       options: { 
        loaders: { 
        } 
       } 
      } 
     ] 
    }, 
    resolve: { 
     alias: { 
      vue$: 'vue/dist/vue.esm.js' 
     } 
    } 
}; 

Answer 1

Uglify目前不处理ES6，所以在通过UglifyJS放置任何东西之前，您需要首先将其转换为ES5。一般来说，你会用babel-loader来做到这一点。

检查https://github.com/babel/babel-loader

module: { 
    rules: [ 
    { 
     test: /\.js$/, 
     exclude: /(node_modules|bower_components)/, 
     use: { 
     loader: 'babel-loader', 
     options: { 
      presets: ['env'] 
     } 
     } 
    } 
    ] 
} 

Answer 2

UglifyJS确实支持箭头功能，但也许它不喜欢你的简短写作方式。你是否...

Vue.component('somecomponent', { 
    render: (h) => { h(Comp) } 
}); 

得到相同的结果你不应该这样做，如果这个工程，而不是其他方式，它是最有可能Uglify.js的错误。