Issue bundling vuejs 2 components with webpack
<p>I am migrating to vuejs 2 and am having a very peculiar issue with my vue components. When I require() a component, I am receiving the following error in the webpack bundling process:</p>

<pre><code>ERROR in Unexpected token &gt;
</code></pre>

<p>The line number for the error is where the require() call is to load the component.</p>

<p>Here is an example of a test component that I am receiving the error for:</p>

<pre><code>&lt;template&gt;
    &lt;div&gt;
        &lt;button&gt;test&lt;/button&gt;
    &lt;/div&gt;
&lt;/template&gt;

&lt;script&gt;
    module.exports = {
        data: function () {
            return {

            }
        }
    }
&lt;/script&gt;
</code></pre>

<p>My webpack.config.js file is:</p>

<pre><code>const webpack = require('webpack');
require('es6-promise').polyfill();
var path = require("path");

module.exports = {
    entry: {
        ...
    },
    output: {
        //path: path.join(__dirname, "./dist/js"),
        path: './',
        filename: "[name].bundle.js",
        chunkFilename: "[id].chunk.js"
    },
    devServer: {
        ...
    },
    module: {
        loaders: [
            {
                test: /\.vue$/,
                loader: 'vue'
            },
            {
                test: /\.js$/,
                loader: 'babel-loader',
                // make sure to exclude 3rd party code in node_modules
                exclude: /node_modules/
            },
            {
                test: /\.css$/,
                loader: "style-loader!css-loader"
            },
            {
                test: /\.(jpe?g|png|gif|svg)$/i,
                loaders: [
                    'file?hash=sha512&amp;digest=hex&amp;name=[hash].[ext]',
                    'image-webpack?bypassOnDebug&amp;optimizationLevel=7&amp;interlaced=false'
                ]
            },
            {
                test: /\.(eot|svg|ttf|woff|woff2)$/,
                loader: 'file?name=public/fonts/[name].[ext]'
            }
        ]
    },
    vue: {
        loaders: {
            js: 'babel-loader'
        }
    },
    resolveLoader: {
        root: __dirname + '/node_modules'
    },
    resolve: {
        alias: {
            'vue': 'vue/dist/vue'
        }
    }
};
</code></pre>

<p>Any help would be very much appreciated. I have been stumped on this for several hours now.</p>