webpack vue-loader 无效

Question

webpack 编译成功 打开index.html出现错误：

编译成功提示：

webpack.config.js

var path = require('path');

module.exports = {
    entry: path.resolve(__dirname, '../app/index/index.js'),
    output: {
        path: path.resolve(__dirname, '../public/static'),
        publicPath: 'static/',
        filename: '[name].[hash].js',
        chunkFilename: '[id].[chunkhash].js'
    },
    resolve: {
        extensions: ['', '.js', '.vue'],
    },
    module: {
        loaders: [
            {
                test: /\.vue$/, 
                loader: 'vue' ,
                exclude: /node_modules/
                  
            },
            {
                test: /\.js$/,
                loader: 'babel?presets=es2015',
                exclude: /node_modules/
            }
        ]
    }
}

index.js

import Vue from 'Vue'
import Favlist from './components/Favlist'

new Vue({
    el: '#app', 
    components: { Favlist }
})

Favlist.vue

<template>
    <div>{{ msg }}</div>
</template>

<script>
    export default {
        data () {
            return {
                msg: 'Hello World!!!'
            }
        }
    }
</script>

<style>
    html{
        background: red;
    }
</style>

Answer 1

应该是es2015的presets没有生效，建议babel的配置放在项目根目录的.babelrc中。可以看看这篇文章

Answer 2

使用 vue-cli：

$ vue list
$ vue init webpack my_project

Answer 3

export default 不支持放在函数内

Answer 4

这么写试试看

module: {
preLoaders：[
{
            test: /\.js$/,
            loader: 'babel?presets=es2015',
            exclude: /node_modules/
        }
       
    ]，
    loaders: [
         {
            test: /\.vue$/, 
            loader: 'vue' ,
            exclude: /node_modules/
              
        }
    ]
}