问Vue.js代码不适用于Webpack

EN

<div id="msg">
    <h1>{{msg}}</h1>
</div>

new Vue({
   el: '#msg',
   data:{
       msg:'Hello'
   }
});

const webpack = require('webpack');
const paths = require('path');
module.exports = {
entry: './js/index.js',
output: {
    filename: 'shop.js',
    path: paths.resolve(__dirname, 'files/js')
},
module: {
    rules: [
        {
            test:/\*.vue$/,
            loader: 'vue-loader'
        },

        /* Babel For ES 6*/
        {
            test: /\.js$/,
            exclude: /node_modules/,
            use: {
                loader: 'babel-loader',
                options: {
                    "presets": ["es2017"]
                }
            }
        },
        //Sass Loader
        {
            test: /\.s[ac]ss$/,
            use: ['style-loader', 'css-loader', 'sass-loader']
        },
        //File Loader For Fonts
        {
            test: /\.(eot|svg|ttf|woff|woff2)$/,
            use: [
                {
                    loader: 'file-loader',
                    options: {
                        name:`[path][name].[ext]`,
                    }
                }
            ]
        },
        //File Loader For IMG
        {
            test: /\.(jpg|jpeg|png|gif)$/,
            use: [
                {
                    loader: 'file-loader',
                    options: {
                        name:`[path][name].[ext]`,
                    }
                }
            ]
        }
    ]
  }
 };