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

UglifyJS确实支持箭头功能，但也许它不喜欢你的简写方式。你得到的结果是......

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

你不应该这样做，如果这有效，而不是其他方式，它很可能是Uglify.js的错误。

Answer 2

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']
        }
      }
    }
  ]
}

webpack - UgifyJS失败

2 个答案: