webpackのwebpack.config.jsの設定方法がわからなくて困っています。

私の今設定している、webpack.config.js(下記ご参照ください)でnpx webpackを実行すると、下記のエラーが出てしまい困っています。

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

Console
1> npx webpack
2[webpack-cli] Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema.
3 - configuration.mode should be one of these:
4   "development" | "production" | "none"
5   -> Enable production optimizations or development hints.

package.json

json
1{
2  "version": "1.0.0",
3  "name": "xxx",
4  "dependencies": {
5    "ag-grid-community": "^26.0.1",
6    "ag-grid-vue3": "^26.0.1",
7    "axios": "^0.21.4",
8    "bootstrap": "^5.1.1",
9    "chart.js": "^3.5.1",
10    "luxon": "^2.0.2",
11    "vue": "^3.2.9"
12  },
13  "devDependencies": {
14    "@babel/core": "^7.15.5",
15    "@babel/preset-env": "^7.15.6",
16    "@vue/cli": "^4.5.9",
17    "babel-loader": "^8.2.2",
18    "css-loader": "^6.3.0",
19    "style-loader": "^3.3.0",
20    "webpack": "^5.9.0",
21    "webpack-cli": "^4.8.0"
22  }
23}

webpack.config.js (パスはプロジェクトに合わせて設定しています。私の場合は./wwwroot/js/site.jsがエントリーポイントです)

javascript
1module.exports = {
2    entry: "./wwwroot/js/site.js",
3    output: {
4        filename: "../wwwroot/js/bundle.js"
5    },
6    devtool: "source-map",
7    mode: "development",
8    module: {
9        rules: [
10            {
11                test: /.css$/,
12                exclude: /node_modules/,
13                use: "css-loader"
14            },
15            {
16                test: /.js$/,
17                exclude: /node_modules/,
18                loader: "babel-loader"
19            }
20        ]
21    }
22}

行動規範の内容に同意します

回答1件

ベストアンサー

すみませんが、Rulesの書き方に間違いがありましたので自己解決しました。

webpack.config.js

javascript
1module.exports = {
2    entry: "./wwwroot/js/site.js",
3    output: {
4        filename: "../wwwroot/js/bundle.js"
5    },
6    devtool: "source-map",
7    mode: "development",
8    module: {
9        rules: [
10            {
11                test: /.css$/,
12                exclude: /node_modules/,
13                use: [
14                    "style-loader"
15                    "css-loader"
16                ]
17            },
18            {
19                test: /.js$/,
20                exclude: /node_modules/,
21                loader: "babel-loader"
22            }
23        ]
24    }
25}