Vue单个文件组件-'您可能需要适当的加载程序来处理此文件类型'

Question

我正在尝试使用Vue SFC并收到错误消息：

  

您可能需要适当的加载程序来处理此文件类型

在我的版本中包含.vue文件时，我的webpack配置如下：

var path = require('path');
var webpack = require('webpack');
const VueLoaderPlugin = require('vue-loader/lib/plugin');

module.exports = {
module: {
    rules: [
        {
            test: /\.vue$/,
            loader: 'vue-loader',
        },
        {
            test: /\.js$/,
            loader: "babel-loader",
            include: [
                path.resolve(__dirname, '_assets/scripts'),
                path.resolve(__dirname, 'node_modules/foundation-sites')
            ],
            options: {
                compact: false,
                plugins: [
                    [
                        "transform-runtime",
                        {
                            "helpers": false,
                            "polyfill": false,
                            "regenerator": true
                        },
                        new webpack.ProvidePlugin({
                            $: "jquery",
                            jQuery: "jquery",
                            "window.jQuery": 'jquery'
                        })
                    ],
                    "transform-es2015-destructuring",
                    "transform-async-to-generator",
                    "transform-class-properties"
                ]
            }
        },
        {
            test: /\.css$/,
            use: [
                'vue-style-loader',
                'css-loader'
            ]
        }
    ]
},
plugins: [
    new VueLoaderPlugin(),
    new webpack.EnvironmentPlugin([
        'NODE_ENV',
    ])
],
resolve: {
    alias: {
        jquery: "jquery/src/jquery",
        'vue$': 'vue/dist/vue.esm.js'
    },
    extensions: ['*', '.js', '.vue', '.json']
},
output: {
    "path": __dirname + "/sitefiles/scripts",
    "filename": "main.js"
},
entry: {
    "bundle": "./_assets/scripts/main.js",
}
};

我遵循了getting started guide，并且一切似乎都正确，有人能发现为什么它不起作用吗？