用webpack的uglifyJS压缩ES6代码报错

问题描述

问 题

不能用webpack压缩ES6的代码吗？去掉ES6代码就正常了

出错的代码处，都是对象属性简写，箭头函数等ES6代码

module.exports = {
    mounted(){this.ready = true} //出错代码行
}

补充：
下载的npm包都是刚下的

再次补充：
发现问题出在babel没把代码转成ES5

"babel-core": "^6.17.0",
"babel-loader": "^6.2.5",
"babel-plugin-transform-runtime": "^6.15.0",
"babel-preset-es2015": "^6.16.0",
"babel-runtime": "^6.11.6",
"webpack": "^1.13.2",
"webpack-dev-server": "^1.16.2"

babel的配置，配置在webpack.config.js的loader

loaders: [
        { test: /\.vue$/, loader: 'vue' },
        { test: /\.less$/, loader: "style!css!less" },
        { test: /\.(png|jpg|gif)$/, loader: 'url-loader?limit=233&name=images/[name].[hash:6].[ext]' },
        { test: /\.js$/, exclude: /node_modules/, loader: 'babel', query: { presets: ['es2015']}},
    ]

uglifyJS的配置：

new webpack.optimize.UglifyJsPlugin({
    compress: {
        warnings: false,
        drop_console: true
    },
})

解决方案

webpack真是越来越搞不懂了，试着试着bug就被解决了
webpack.config.js改成这样就行了

module: {
        loaders: [
            { test: /\.js$/, exclude: /node_modules/, loader: 'babel'},
            { test: /\.vue$/, loader: 'vue' },
            { test: /\.less$/, loader: "style!css!less" },
            { test: /\.(png|jpg|gif)$/, loader: 'url-loader?limit=233&name=images/[name].[hash:6].[ext]' },
        ],

    },
    babel: {
        babelrc: false,
        presets: [
            ['es2015'],
        ],
    }

这篇关于用webpack的uglifyJS压缩ES6代码报错的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！