webpackを使用した時のimportの方法がわからなくて困っています。

Question

初歩的な質問ですみませんが、webpackを使用した時のimportの方法がわからなくて困っています。

(追記)経緯としてはscript srcで使っていたものを、webpackを使用してimportを使うように切替したいです。

プロジェクトフォルダの中のnode_modulesフォルダにはnpmで必要なものをインストール済みです。

"webpack.config.js"に下記の設定をし、> npx webpackを実行すると、
"/wwwroot/js/bundle.js"が作成されました。

ブラウザで実行するとエラーしてしまいました。

Uncaught SyntaxError: Cannot use import statement outside a module : index.js(importを実行したファイル)

どなたかご教授お願いします。

・package.json

{
  "name": "xxx",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "ag-grid-enterprise": "^26.0.1",
    "ag-grid-vue3": "^26.0.1",
    "axios": "^0.21.4",
    "bootstrap": "^5.1.1",
    "chart.js": "^3.5.1",
    "file-saver": "^2.0.5",
    "luxon": "^2.0.2",
    "vue": "^3.2.9"
  },
  "devDependencies": {
    "@babel/core": "^7.15.5",
    "@babel/preset-env": "^7.15.6",
    "@vue/cli": "^4.5.9",
    "babel-loader": "^8.2.2",
    "css-loader": "^6.3.0",
    "style-loader": "^3.3.0",
    "webpack": "^5.9.0",
    "webpack-cli": "^4.8.0"
  }
}

・webpack.config.js ※webpack.config.jsを修正

const path = require("path");
const webpack = require("webpack");

module.exports = {
    entry: path.join(__dirname, "wwwroot", "source", "app.js"),
    output: {
        path: path.join(__dirname, "wwwroot", "dist"),
        filename: "bundle.js" // filename: "../wwwroot/js/bundle.js"
    },
    devtool: "source-map",
    mode: "development",
    resolve: {
        extensions: [".js", ".ts", ".css", ".vue"],
        alias: {
            "vue$": "vue/dist/vue.global.js",
            "ag-grid-enterprise$": "ag-grid-enterprise/dist/ag-grid-enterprise.min.js",
            "ag-grid-vue$": "ag-grid-vue/dist/ag-grid-vue3.umd.min.js",
            "axios$": "axios/dist/axios.min.js",
            "bootstrap$": "bootstrap/dist/js/bootstrap.min.js",
            "chart.js$": "chart.js/dist/chart.min/js",
            "file-saver$": "file-saver/dist/FileSaver.min.js",
            "luxon$": "luxon/src/luxon.js",

            "bootstrap-css$": "bootstrap/dist/css/bootstrap.min.css",
            "ag-grid-enterprise-css$": "ag-grid-enterprise/dist/styles/ag-grid.min.css",
            "ag-grid-enterprise-ag-theme-balham-css$": "ag-grid-enterprise/dist/styles/ag-theme-balham.min.css",
        },
    },
    module: {
        rules: [
            {
                test: /.css$/,
                exclude: /node_modules/,
                use: [ "style-loader", "css-loader" ]
            }
        ],
    }
}

Comments

[Lhankor_Mhy]

index.js と index.js を読み込んでいる部分をご提示ください。

[退会済みユーザー]

コメントありがとうございます。
初歩的な部分ですみませんが、mainに指定しているindex.jsは存在していないです。そのため読み込んでいるファイルはありません。

①mainで指定しているindex.js
②webpack.config.jsのエントリポイントである　../wwwroot/source/app.js

の違いが分かっていない状況です。
ご指摘のmainの設定が正しくないのかもしれませんが。

下記については読込設定をしています。
<script src="../wwwroot/dist/bundle.js"></script>

[退会済みユーザー]

importが通りました、app.jsのファイルが空だったので、

require("vue");のみ追加してみたところ、bundle.jsに追加されました。
これが原因だったようです。

いままでscript srcで使っていたのですが、これはエントリポイントのapp.js　の中に

require("vue")のように、全て記述するのでしょうか？

[退会済みユーザー]

vueは実行されているのに、import文で同じエラーがでていました。

You are running a development build of Vue.
Make sure to use the production build (*.prod.js) when deploying for production.
index.js:51 Uncaught SyntaxError: Cannot use import statement outside a module

requireはできるみたいですが、importが失敗していました。
requireをimportで使いたいのですが。

[Lhankor_Mhy]

ご解決されて何よりです。
すみません、私ではお役に立てないようです。

[退会済みユーザー]

ごめんなさい。解決できていなかったです。
もし気になる点がなにかあれば教えて下さい。

Answer 1

間違えて一度退会してしまいましたので、完了できませんでした。