vue.js3のimportがうまくできなくて困ってます。webpack.config.jsの設定を教えて下さい。

Question

vue.js3のimportがうまくできなくて困ってます。webpack.config.jsの設定を教えて下さい。

私の環境ではvue-cliでvueプロジェクトは使えない環境なので、それを前提にしてほしいです。

そのため、いまのところ.vueファイルについては使用しないです。typescriptも使ってません。

htmlファイルとjavascriptファイルのみ使っています。

実施したこと
①Node.js v14をインストール
②package.configを作成

③npm installを実行
"vue": "^3.2.19"
"webpack": "^5.54.0",
"webpack-cli": "^4.8.0"

④webpack.config.jsを作成
⑤npx webpackを実行
⑥site.bundle.jsをscript type="module"で読み込みするように設定
⑦htmlファイルから自分で使うjavascriptファイルにもscript type="module"を追加

利用ブラウザはGoogle Chromeです。

よろしくお願いします。

// ルート構成　(wwwrootはweb上の親ルートなので urlの時も　"/" と同じ扱いです)
/MyProject
    /wwwroot
        /dist
            - site.bundle.js
            - site.bundle.js.map
        /js
            - site.js　※これは何も書いてません。
        /node_modules
            /vue
        - package.json
        - webpack.config.js

// package.json

{
  "name": "myproject",
  "version": "1.0.0",
  "description": "test",
  "repository": "test",
  "main": "test",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "vue": "^3.2.19"
  },
  "devDependencies": {
    "webpack": "^5.54.0",
    "webpack-cli": "^4.8.0"
  }
}

// webpack.config.js

const path = require("path");

module.exports = {
    entry: {
        main: "./js/site.js"
    },
    output: {
        path: path.resolve(__dirname, "..", "wwwroot", "dist"),
        filename: "site.bundle.js"
    },
    devtool: "source-map",
    mode: "development"
}

候補にvueが表示されるのですが、使用できていません。

Uncaught TypeError: Failed to resolve module specifier "vue". Relative references must start with either "/", "./", or "../".

Answer 1

難しい質問のため終了します