Webpack vue错误

时间:2016-02-14 03:20:02

标签: webpack babeljs vue.js

我在全球安装了webpack,并在本地安装了vue和loaders,并尝试在全球范围内安装它们。我运行webpack时不断收到此错误

SIGABRT

main.js

top

配置

Module parse failed: /Users/joebob/Development/vue-test/node_modules/babel-loader/index.js!/Users/joebob/Development/vue-test/src/main.js Line 1: Unexpected token
You may need an appropriate loader to handle this file type.
| import Vue from 'vue';

的package.json

import Vue from 'vue'
import App from './app.vue'

new Vue({
    el: 'body',
    components: { App }
})

不确定我缺少什么

1 个答案:

答案 0 :(得分:6)

你错过了es-2015转型。

Pre-6.x,Babel默认启用了某些转换。但是,Babel 6.x不附带任何启用的转换。您需要明确告诉它要运行什么转换。最简单的方法是使用预设,例如ES2015预设。您可以使用

进行安装
npm install babel-preset-es2015 --save-dev

然后设置 babel-loader 来使用它:

配置:

module.exports = {
    entry: './src/main.js',      
    output: {              
        path: './dist',
        publicPath: 'dist/',
        filename: 'build.js'
    },
    module: { 
        loaders: [
            {
                test: /\.js$/,
                loader: 'babel-loader',
                exclude: /node_modules/
                query: {
                  presets: ['es2015']
                }
            },
            {
                test: /\.vue$/,
                loader: 'vue'
            }
        ]
    },
    vue: {
        loaders: {
            js: 'babel'
        }
    }
}

参考:

https://babeljs.io/docs/setup/#webpack