Javascript 网页包：配置对象无效/模块条目无效

无法成功编译Web包并生成bundle.js文件。据我所知，我的src_dir和dist_dir变量能够指向正确的路径，但在尝试编译时，我始终会收到两个错误中的一个

无效的配置对象。已使用与API架构不匹配的配置对象初始化Web包。 -configuration.module具有未知属性“loaders”

&&

未找到输入模块：~我的index.jsx文件的完整路径~

mypackage.json

{
  "name": "mypetstore",
  "version": "1.0.0",
  "description": "BoxKnight developer challenge ",
  "main": "index.js",
  "scripts": {
    "build": "webpack -d --watch"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/ianlennymatthews/MyPetStore.git"
  },
  "author": "Ian Lenny Matthews",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/ianlennymatthews/MyPetStore/issues"
  },
  "homepage": "https://github.com/ianlennymatthews/MyPetStore#readme",
  "dependencies": {
    "@babel/plugin-proposal-class-properties": "^7.4.4",
    "@babel/preset-react": "^7.0.0",
    "axios": "^0.19.0",
    "babel": "^6.23.0",
    "babel-core": "^6.26.3",
    "babel-loader": "^8.0.6",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "express": "^4.17.1",
    "react": "^16.8.6",
    "react-bootstrap": "^1.0.0-beta.9",
    "react-dom": "^16.8.6",
    "webpack": "^4.35.0"
  },
  "devDependencies": {
    "@babel/core": "^7.4.5",
    "@babel/preset-env": "^7.4.5",
    "webpack-cli": "^3.3.5"
  }
}

我的网页包配置文件

var path = require('path');
var SRC_DIR = path.join(__dirname, '/client/src');
var DIST_DIR = path.join(__dirname, '/client/dist');

module.exports = {
  entry: path.join(SRC_DIR, '/index.jsx'),
  output: {
    filename: 'bundle.js',
    path: DIST_DIR
  },
  module: {
    rules: [
      {
        test: /\.jsx?/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          query: {
            presets: ['@babel/preset-env', '@babel/preset-react'],
            plugins: ['@babel/plugin-proposal-class-properties']
          }
        }
      }
    ]
  }
};

**添加文件结构

.
├── client
│   ├── dist
│   │   ├── index.html
│   │   └── style.css
│   └── src
│       ├── components
│       │   └── AddressForm.jsx
│       └── index.jsx
├── package.json
├── package-lock.json
├── README.md
├── server
│   └── index.js
└── webpack.config.js

这意味着

上下文

是必需的，

条目

应该是

上下文

的相对路径

尝试修改webpack.config.js，使其如下所示：

module.exports = {
  context: SRC_DIR,
  entry: "./index.jsx",
  // ...
};

---

尝试

path。解析
而不是
path。加入

var SRC_DIR = path.resolve(__dirname, '/client/src');
var DIST_DIR = path.resolve(__dirname, '/client/dist');

然后在配置中

module.exports = {
  entry: {
    'bundle': `${SRC_DIR}/index.jsx`,
  },
  output: {
    path: `${DIST_DIR}`,
    filename: '[name].js',
  },
  module: {
    rules: [
      {
        test: /\.jsx?/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          query: {
            presets: ['@babel/preset-env', '@babel/preset-react'],
            plugins: ['@babel/plugin-proposal-class-properties']
          }
        }
      }
    ]
  }
};

请显示您的目录结构。您发布的
webpack.config.js
可能是正确的，除了
index.jsx
@laptou刚刚编辑的路径，谢谢您尝试将
AddressForm.jsx
更改为小写（记住在任何导入中也要更改它）。这在过去给我带来了麻烦。就是这样，非常感谢！对于最新版本的webpack来说，上下文是新的吗？@Ian我不这么认为，我只是认为它一直是“推荐的”，而且“推荐的”也慢慢变为“必需的”，默认情况下，
context
设置为流程的当前工作目录，因此，有时您可以不在配置中指定它而不受影响。。。但是这是一个很好的自杀方式谢谢你的建议但不幸的是如果我犯了这个错误：``错误：EACCES:权限被拒绝，mkdir'/client'```
module.exports = {
  entry: {
    'bundle': `${SRC_DIR}/index.jsx`,
  },
  output: {
    path: `${DIST_DIR}`,
    filename: '[name].js',
  },
  module: {
    rules: [
      {
        test: /\.jsx?/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          query: {
            presets: ['@babel/preset-env', '@babel/preset-react'],
            plugins: ['@babel/plugin-proposal-class-properties']
          }
        }
      }
    ]
  }
};