当先锋百科网

首页 1 2 3 4 5 6 7

问 题

不能用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'],

],

}

扫一扫关注IT屋

微信公众号搜索 “ IT屋 ” ,选择关注与百万开发者在一起