ユーザー登録で「300円クーポン」プレゼント!まずは無料登録から!
募集をシェアしてメンターを探そう
シェア
エンジニア

asp.net core mvc(.NET5)での、webpackとjavascriptのimportの使い方

15日前
予算
3,000円 〜
提案数
提案待ち

asp.net core mvc(.NET5)での、webpackとjavascriptのimportの使い方を調べてます。

Google usで海外サイト等も調べましたが、答えとなるものが見つかりませんでした。

バンドルしたjsファイルのみ、importができるっぽいです。

やりたいことは、以下のwebpack.config.jsの中のjsとcssをASP.NET Core MVC内のjavascriptのmoduleとして、importで使用したいです。(Vue-Cliは使いません)

ただし、このままmoduleとして実行すると、jQueryもエラーするし、importがうまくいかないjsライブラリもあったし、BootstrapのCSSが遅延して実行されますので、その改善も必要です。

また、バンドルしたjsファイル以外でも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",
//"bootstrap-css$": "bootstrap/dist/css/bootstrap.min.css",
"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",
//"popperjs$": "@popperjs/core"
},
},
module: {
rules: [
{
test: /\.css$/,
use: [ "style-loader", "css-loader" ]
},
{
test: /\.js?$/,
use: {
loader: "babel-loader",
options: {
presets: ["@babel/preset-env"]
}
}
},
],
}
}
--

メンティーに提案してみましょう
募集をシェアしてメンターを探そう
シェア