vue文件中的ES6语法在webpack压缩时报错?

大致的问题就像题目说的那样

我用vue单文件的方式来抽离项目中的组件,众所周知,一个vue文件有三个“模块”:template, script, style
用webpack构建项目,webpack配置如下:

var path = require('path');
var webpack = require('webpack');

module.exports = {
    entry: './src/main.js',
    output: {
        path: path.resolve(__dirname, './dist'),
        publicPath: '/dist/',
        filename: 'bundle.js'
    },
    module: {
        rules: [
            {
                test: /\.vue$/,
                loader: 'vue-loader'
            },
            {
                test: /\.js$/,
                loader: 'babel-loader',
                exclude: /node_modules/,
                query: {
                    presets: ['es2015', 'stage-0']
                }
            }
        ]
    },
    resolve: {
        alias: {
        'vue$': 'vue/dist/vue.js'
        }
    },
    plugins: [
        new webpack.optimize.UglifyJsPlugin({
            test: /(\.js|\.vue)$/,
            compress: {
                warnings: false
            },
            comments: false
        })
    ]
}

那么问题来了,我在vue文件中的script标签了用了一些es6的语法,诸如:

//eg1
for (let i = 0; i < someArray.length; i_++){
    //process...
}

//eg2
export default{
    methods: {
        someFunction(){
            //process...
        }
    }
}

在用webpack进行构建的时候,在命令行中提示我:
对应eg1↓
图片描述

对应eg2↓
图片描述

试着把eg1中的let改为var,把eg2中的函数声明改成完成的someFunction: function(){}就不会报错并且成功压缩了。

虽然说最后不报错了,但是不能写es6心里还是有点sad,所以来此跪求各位大神的赐教~

阅读 5.3k
1 个回答

能贴代码别贴图!

把 babel 相关的配置放到 .babelrc 文件中试试

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题