Webpack vue error

Question

我已經在全球安裝了webpack，並且在本地安裝了vue和loader，並嘗試過在全球範圍內安裝它們。當我運行的WebPack

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'; 

main.js我不斷收到此錯誤

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

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

配置

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

的package.json

{ 
    "name": "vue-test", 
    "version": "1.0.0", 
    "dependencies": { 
     "vue": "^1.0.16" 
    }, 
    "devDependencies": { 
     "babel-core": "^6.1.2", 
     "babel-loader": "^6.1.0", 
     "babel-plugin-transform-runtime": "^6.1.2", 
     "babel-preset-es2015": "^6.1.2", 
     "babel-preset-stage-0": "^6.1.2", 
     "babel-runtime": "^5.8.0", 
     "webpack": "^1.12.2", 
     "css-loader": "^0.23.0", 
     "style-loader": "^0.13.0", 
     "vue-loader": "^7.3.0", 
     "vue-html-loader": "^1.0.0", 
     "vue-hot-reload-api": "^1.2.0" 
    } 
} 

不知道我是什麼缺少

Answer 1

您錯過了es-2015轉型。

Pre-6.x，Babel默認啓用了某些轉換。但是，Babel 6.x不附帶任何啓用的轉換。您需要明確告訴它要運行的轉換。最簡單的方法是使用預設，例如ES2015預設。

配置：

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