>>るきおさん
お返事遅くなってすみません。

いま、ある情報からvue-cliを使わずにwebpack経由でimportを利用できる方法を教えていただきました。
bundleで圧縮する必要もないようです。

また、ASP.NET Core MVCの設定次第で、wwwroot以外にも置ける可能性があります。
とりあえず試行なので、wwwrootフォルダに置いたまま試しています。


以下のコードが入手できたものです。
課題として、HtmlWebpackPluginの使い方を調べているのですが、ちょっとわかっていないです。

もしわかれば教えていただきたいですが、これは使用したいファイルのパスを全て指定する必要があるのでしょうか？



また、これは.vueファイルを使う前提となっているので、そもそもsrcフォルダを置かないといけないのかもしれません。
そもそも、Viewのhtmlとjavascriptを別フォルダにするというのが、Vueの流儀にあっていないかも。

教えてもらったVueの基本はこのようでした。

/src
 - App.vue　　・・・ templateとjavascript、cssの本体(よくある　templateとimport, exportを使用しているコード)

 - index.html　・・・ vueの<div id="app">の指定と.vueファイルのtemplateタグの使用
　　　　　　　　　　　main.jsを読み込んでいるところが見当たらなかった。

 - main.js　　　・・・ vueをrequiredで読み込み、App.vueをimport、createAppだけしていた。


実現したかった事はhtmlで簡単にjavascript moduleとして使いたいと思ってましたが、Vueの基本から考えないといけないかもです。



-package.json-
{
  "name": "vue3webpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "npm test",
    "start": "webpack-dev-server --mode development"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.15.8",
    "@babel/preset-env": "^7.15.8",
    "@vue/compiler-sfc": "^3.2.20",
    "babel-loader": "^8.2.2",
    "css-loader": "^6.4.0",
    "html-webpack-plugin": "^5.3.2",
    "rimraf": "^3.0.2",
    "vue": "^3.2.20",
    "vue-loader": "^16.8.1",
    "vue-style-loader": "^4.1.3",
    "webpack": "^5.58.2",
    "webpack-cli": "^4.9.0",
    "webpack-dev-server": "^4.3.1"
  },
  "dependencies": {
    "@vue/reactivity": "^3.2.20",
    "vue-class-component": "8.0.0-rc.1"
  }
}
--

-.babelrc.js-
module.exports = {
    presets: ['@babel/preset-env'],
}
--

-webpack.config.js-
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { VueLoaderPlugin } = require('vue-loader')

module.exports = {
  entry: './src/main.js',
  module: {
    rules: [
      { test: /\.js$/, use: 'babel-loader' },
      { test: /\.vue$/, use: 'vue-loader' },
      { test: /\.css$/, use: ['vue-style-loader', 'css-loader']},
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',
    }),
    new VueLoaderPlugin(),
  ]
};
--