webpackでvueを使用したい。

前提

https://ics.media/entry/16028/#webpack-babel-vue
上記サイトを参考にwebpack構築を行ったのですが、ビルドがうまくいかない、ビルドされたものが動かないなどあり、困っています。

実現したいこと

webpackを使用してvueを動かす。

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

同サイトで提供しているサンプルフォルダから「npm run build」してもエラーが出る。
https://github.com/ics-creative/170330_webpack/tree/master/tutorial-babel-vue

Module not found: Error: Can't resolve 'vue' in '〇〇～'

該当のソースコード

webpack.config.js

const { VueLoaderPlugin } = require("vue-loader"); module.exports = { // モード値を production に設定すると最適化された状態で、 // development に設定するとソースマップ有効でJSファイルが出力される mode: "production", module: { rules: [ { test: /\.css$/, use: ["vue-style-loader", "css-loader"], }, { test: /\.vue$/, loader: "vue-loader", }, { test: /\.js$/, loader: "babel-loader", // Babel のオプションを指定する options: { presets: [ // プリセットを指定することで、ES2020 を ES5 に変換 "@babel/preset-env", ], }, }, ], }, // import 文で .ts ファイルを解決するため resolve: { // Webpackで利用するときの設定 alias: { vue$: "vue/dist/vue.esm.js", }, extensions: ["*", ".js", ".vue", ".json"], }, plugins: [ // Vueを読み込めるようにするため new VueLoaderPlugin(), ], // ES5(IE11等)向けの指定 target: ["web", "es5"], };

試したこと

webpack.conjig.jsの中のaliasに指定しているファイルが見当たらなかったので「vue/dist/vue.global.js」にして、rulesの「vue-style-loader」を「file-loader」に変えたらビルドは成功したように思えます。
しかし、index.htmlをみても何も表示されません。
さらに検証モードでは以下のエラーが表示されていました。

Uncaught TypeError: t.n(...)() is not a constructor

補足情報（FW/ツールのバージョンなど）

package.json

{ "name": "test", "version": "1.0.0", "scripts": { "build": "webpack", "watch": "webpack --watch" }, "dependencies": { "@vue/cli": "^5.0.8", "vue": "^3.2.34" }, "devDependencies": { "@babel/core": "^7.17.12", "@babel/preset-env": "^7.17.12", "babel-loader": "^8.2.5", "css-loader": "^6.7.1", "file-loader": "^6.2.0", "vue-loader": "^17.0.0", "vue-template-compiler": "^2.6.14", "webpack": "^5.72.1", "webpack-cli": "^4.9.2" }, "private": true }