webpack

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 失败

webpack - UgifyJS fails

uglifyjs