带有webpack的VueJS空白页

Question

我正在尝试使用webpack和typescript的VueJS 2.0。该示例非常基本，但它总是返回一个空白页面。控制台中没有错误。

最初的项目是在Django，但我提取出相关部分。以下是相关文件，

webpack.config.js

var path = require("path");
var webpack = require("webpack");

module.exports = {
    entry: {
        pageIndex: './frontend/index.ts',
        pageVisit: './frontend/visit.ts'
    },
    output: {
        path: path.join(__dirname, "dist"),
        filename: "[name].bundle.js",
        chunkFilename: "[id].chunk.js"
    },
    module: {
        rules: [
            {
                test: /\.vue$/,
                loader: 'vue-loader',
                options: {
                    esModule: true
                }
            },
            {
                test: /\.tsx?$/,
                loader: 'ts-loader',
                exclude: /node_modules|vue\/src/,
                options: {
                    appendTsSuffixTo: [/\.vue$/]
                }
            }
        ]
    },
    plugins: [
        new webpack.optimize.CommonsChunkPlugin({
            filename: "commons.js",
            name: "commons"
        })
    ],
    resolve: {
        alias: {
            'vue$': 'vue/dist/vue.common.js'
        },
        extensions: [".tsx", ".ts", ".js"]
    }
};

index.ts

import Vue from 'vue'
import Component from 'vue-class-component'

// mount
new Vue({
  render: h => h(MyComponent),
  components: {MyComponent}
}).$mount("#app");


@Component({
  template: '<button @click="onClick">Click!</button>'
})

export default class MyComponent extends Vue {
  message: string = 'In visit!'
  onClick (): void {
    window.alert(this.message)
  }
}

HTML页面

    <div id="app"></div>

  <script src="{% static 'frontend/js/commons.js' %}" type="text/javascript"></script>
  <script src="{% static 'frontend/js/pageIndex.bundle.js' %}" type="text/javascript"></script>