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的錯誤。