大致的问题就像题目说的那样
我用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,所以来此跪求各位大神的赐教~
能贴代码别贴图!
把 babel 相关的配置放到 .babelrc 文件中试试