Hello!
Please tell me if you like.

If it's close to the ASP.NET Core MVC (.NET6) default configuration,
How do I set up webpack?

Currently, I can run up to npm run build,
I'm having a problem because import doesn't work in the javascript to be executed.

// Project structure
Project
- wwwroot
- css (omit)
- dist
main.js
- js
- views
- Test1
- index.js // Import does not work
- node_moludes

- src
- index.html
- index.js

- Controllers
- Test1Controllers.cs

- Views
- Test1
- Index.cshtml

// webpack-congig.js
const path = require("path");
const webpack = require("webpack");

const HtmlWebpackPlugin = require("html-webpack-plugin");
const { VueLoaderPlugin } = require("vue-loader");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
entry: {
main: "./src/index.js",
Test1: "./js/views/Test1/index.js"
},
output: {
filename: "[name].js",
path: __dirname + "/dist"
},
devtool: "source-map",
mode: "development",
module: {
rules: [
{
test: /\.js$/,
loader: "babel-loader",
include: path.resolve(__dirname, "/js"),
options: { presets: ["@babel/preset-env"] }
},
{
test: /\.vue$/,
loader: "vue-loader"
},
{
test: /\.css$/,
use: [MiniCssExtractPlugin.loader, "css-loader"],
}
],
},
resolve: {
alias: {
"ag-grid-enterprise$": path.resolve("./node_modules/ag-grid-enterprise"),
"axios$": path.resolve("./node_modules/axios/dist/axios.js"),
"bootstrap$": path.resolve("./node_modules/bootstrap/dist/js/bootstrap.js"),
"chart.js$": path.resolve("./node_modules/chart.js/dist/chart.js"),
"file-saver$": path.resolve("./node_modules/file-saver/dist/FileSaver.js"),
"mathjs": path.resolve("./node_modules/mathjs/lib/browser/math.js"),
"localforage$": path.resolve("./node_modules/localforage/dist/localforage.js"),
"luxon$": path.resolve("./node_modules/luxon/src/luxon.js"),
"popperjs$": path.resolve("./node_modules/@popperjs/core"),
"vue$": path.resolve("./node_modules/vue/dist/vue.esm-bundler.js")
},
extensions: ["*", ".js", ".vue"],
},

plugins: [
new HtmlWebpackPlugin({
template: "./src/index.html",
}),
new MiniCssExtractPlugin({
filename: "./css/site.css",
chunkFilename: "[name].css"
}),
new VueLoaderPlugin(),
new webpack.DefinePlugin({
__VUE_OPTIONS_API__: false,
__VUE_PROD_DEVTOOLS__: false,
})
],
};