Visual Basic 中学校 掲示板 投稿の管理
タグのない投稿を抽出
統計
RSS
Visual Basic 中学校
投稿一覧
ASP.NET Core MVC webpackを使用してimportしたい
この投稿へのリンク
https://keijiban.umayadia.com/ThreadDetail.aspx?ThreadId=30648#CommentId84706
この投稿の削除
削除パスワード
削除する
コメント本文
投稿者
yu
 (社会人)
投稿日時
2021/9/30 14:45:26
教えて頂いたURLのVue-Cliは実行してみましたがうまくいきませんでした。
ただ、今回はASP.NET Core MVCのVueのjavascript部のVueに置き換えているだけなので、
Vue-Cliでアプリケーション雛形をつくるのは大掛かりすぎるかもしれません。
いまわかっていることは webpackのバンドルファイルでのみ、importがつかえるっぽいです。
Bootstrapのcssは遅延こそするものの、実行されているようです。
その他、importがうまくいってなかったり、エラーしている個所はあるので、うまくいっているわけではありませんが。
- webpack.config.js ----------------------------------------
const path = require("path");
const webpack = require("webpack");
module.exports = {
entry: {
main: "./src/js/app.js"
},
output: {
path: path.resolve(__dirname, "..", "wwwroot", "dist"),
filename: "app.bundle.js"
},
devtool: "source-map",
mode: "development",
resolve: {
extensions: [".js", ".vue"],
alias: {
"vue$": "vue/dist/vue.global.js",
"ag-grid-enterprise$": "ag-grid-enterprise/dist/ag-grid-enterprise.js",
"axios$": "axios/dist/axios.js",
"bootstrap$": "bootstrap/dist/js/bootstrap.js",
"chart.js$": "chart.js/dist/chart.js",
"file-saver$": "file-saver/dist/FileSaver.js",
"jquery$": "jquery/dist/jquery.js",
"jquery-validation$": "jquery-validation/dist/jquery.validate.js",
"jquery-validation-unobtrusive$": "jquery-validation-unobtrusive/dist/jquery.validate.unobtrusive.js",
"luxon$": "luxon/src/luxon.js"
},
},
module: {
rules: [
{
test: /\.css$/,
use: [ "style-loader", "css-loader" ]
},
{
test: /\.js?$/,
use: {
loader: "babel-loader",
options: {
presets: ["@babel/preset-env"]
}
}
},
],
}
}
----------------------------------------
- app.bundle.js -------------------------------------------------
import "bootstrap"
import "bootstrap/dist/css/bootstrap.min.css"
import "jquery"
import "jquery-validation"
import "jquery-validation-unobtrusive"
import "vue"
import "ag-grid-enterprise";
import "axios"
import "chart.js"
import "file-saver"
import "luxon"
// Custom CSS imports
import "../css/site.css"
console.log("The app.js bundle has been loaded!");
--------------------------------------------------
↓
app.bundle.jsをscript type="module"で読み込み
- _Layout.cshtml -------------------------------------------------
<script type="module" src="~/dist/app.bundle.js"></script>
--------------------------------------------------