vue.jsをwebpackが上手くできません

Question

###前提・実現したいこと
単一ファイルコンポーネントをwebpackを用いて一から環境構築を行っています。
バンドル自体はできるのですが、できたファイルが上手く動作していません。
よろしくお願いします。

###発生している問題・エラーメッセージ

Uncaught TypeError: Vue is not a constructor
    at Object.defineProperty.value (main.js:4)
    at __webpack_require__ (bootstrap fe6a50a69091bed6b855:19)
    at module.exports (bootstrap fe6a50a69091bed6b855:62)
    at bootstrap fe6a50a69091bed6b855:62

###該当のソースコード

### package.json ###
{
	"scripts": {
		"start": "node app.js",
		"webpack": "webpack",
	},
	"dependencies": {
		"express": "3.2.6",
		"pug": "^2.0.0-rc.4",
		"vue": "^2.5.13"
	},
	"devDependencies": {
		"babel-core": "^6.26.0",
		"babel-loader": "^7.1.2",
		"babel-preset-env": "^1.6.1",
		"css-loader": "^0.28.9",
		"html-loader": "^0.5.5",
		"vue-loader": "^13.7.0",
		"vue-template-compiler": "^2.5.13",
		"webpack": "^3.10.0"
	}
}

### webpack.config.js ###
var path = require("path");

module.exports = {
	entry: "./src/js/main.js",
	output: {
		path : path.join(__dirname, "/public/js"),
		filename: "bundle.js"
	},
	devtool: "source-map",
	module: {
		rules: [
			{
				test: /.jsx?$/,
				exclude: /node_modules/,
				loader: "babel-loader"
			},
			{
				test: /.vue$/,
				loader: "vue-loader"
			}
		]
	}
};

### main.js ###
var Vue = require("vue");
var appOptions = require("./app.vue")

var app = new Vue(appOptions).$mount("#app")

### app.vue ###
<style scoped>
  h1 {
    color: #f00;
  }
</style>

<template>
  <h1>{{message}}</h1>
</template>

<script>
  module.exports = {
    data: function () {
      return {
        message: 'Hello world!'
      }
    }
  }
</script>

### index.pug ###
extends layout

block content
  h1= title
  p Welcome to #{title}
  div(id="app")
  script(src="/js/bundle.js")

###試したこと
vue-cliを使って、vuejs-templatesからの構築はできていました。

Answer 1

webpack.config.jsに下記を記述しても駄目ですか？

  resolve: {
    alias: {
      'vue': 'vue/dist/vue',
    }
  },

Comments

[iride]

記述を追加致しましたら、
エラーは表示されませんが、仮想DOMに切り替わっていないのか、
Hello world!の表示がされておりません。
引き続き問題をご指摘いただけると幸いです。

また、webpack3を使っているので、
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js'
}
}
にしてみましたが、エラーが表示されたままになっております。
今回のケースではこちらのやり方ではない理由についてもご教授いただけると幸いです。

今回の構築ではこちらの記事を参考にしたつもりです。
https://qiita.com/m0a/items/34df129d6d8991ebbf86

[hiro]

参考のURLだと、Vue1.x時代の設定のようなので main.js を見直した方が良いかと思います。

```js
new Vue({
el: '#app',
render: h => h(appOptions)
})
```

こんな感じにするとか…

[iride]

ありがとうございました。
おかげで無事同作させることができました。

Answer 2

公式ドキュメントのVuewのインストールを読むと何かわかるかもしれません。