I did npm run build and got a lot of ERRORS-CodePudding

I am a student new to JavaScript. https://qiita.com/EZ_Denta/items/9e6a47f330b5a01806ae I've been using this as a reference, but it doesn't work. I'm sure I've put the built in package.json, but I'm getting a lot of errors and don't know where to start.

Error Messages

> webpack

[webpack-cli] Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema.
 - configuration.module.rules[1] should be one of these:
   ["..." | object { assert?, compiler?, dependency?, descriptionData?, enforce?, exclude?, generator?, include?, issuer?, issuerLayer?, layer?, loader?, mimetype?, oneOf?, options?, parser?, realResource?, resolve?, resource?, resourceFragment?, resourceQuery?, rules?, scheme?, sideEffects?, test?, type?, use? }, ...]
   -> A rule.
   Details:
    * configuration.module.rules[1].loader should be a non-empty string.
      -> A loader request.
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! react_drill@1.0.0 build: `webpack`
npm ERR! Exit status 2
npm ERR! 
npm ERR! Failed at the react_drill@1.0.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/yamaguchishuuhei/.npm/_logs/2021-08-28T17_30_34_922Z-debug.log

package.json

{
  "name": "react_drill",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "build": "webpack"
  },
  "repository": {
    "type": "git",
   omitted

webpack.config.js

module.exports = {
    entry: {
      app: "./src/index.js"
    },
    output: {
      path: __dirname   '/public/js',
      filename: "[name].js"
    },
      devServer: {
      contentBase: __dirname   '/public',
      port: 8080,
      publicPath: '/js/'
    },
    devtool: "eval-source-map",
    mode: 'development',
    module: {
      rules: [{
        test: /\.js$/,
        enforce: "pre",
        exclude: /node_modules/,
        loader: "eslint-loader"
      }, {
        test: /\.css$/,
        loader: ["style-loader","css-loader"]
      }, {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader'
       }]
    }
  };

CodePudding user response：

Your webpack.config.js is in the wrong format, rule.loader doesn't support passing in array, try using use like this

module.exports = {
    entry: {
      app: "./src/index.js"
    },
    output: {
      path: __dirname   '/public/js',
      filename: "[name].js"
    },
      devServer: {
      contentBase: __dirname   '/public',
      port: 8080,
      publicPath: '/js/'
    },
    devtool: "eval-source-map",
    mode: 'development',
    module: {
      rules: [{
        test: /\.js$/,
        enforce: "pre",
        exclude: /node_modules/,
        loader: "eslint-loader"
      }, {
        test: /\.css$/,
        use: ["style-loader","css-loader"]
      }, {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader'
       }]
    }
  };