Webpack：无效的配置对象/无效的模块条目答案

【问题标题】：Webpack : Invalid configuration object/ Invalid Module EntryWebpack：无效的配置对象/无效的模块条目
【发布时间】：2019-12-17 23:19:18
【问题描述】：

无法成功编译 webpack 并生成 bundle.js 文件。据我了解，我的 src_dir 和 dist_dir 变量能够指向正确的路径，但在尝试编译时我仍然始终收到两个错误之一。

配置对象无效。 Webpack 已使用与 API 模式不匹配的配置对象进行初始化。 - configuration.module 有一个未知的属性 'loaders'。

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

我的 package.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"
  }
}

我的 webpack 配置文件

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 可能是正确的，除了index.jsx 的路径。
@laptou 刚刚进行了编辑，谢谢
尝试将您的AddressForm.jsx 更改为小写（记住在任何导入时也要更改它）。过去它给我带来了麻烦。

标签： javascript webpack babeljs babel-loader

【解决方案1】：

试试path.resolve 而不是path.join。

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']
          }
        }
      }
    ]
  }
};

【讨论】：

感谢您的建议，但不幸的是，如果向我抛出此错误：``` 错误：EACCES：权限被拒绝，mkdir '/client' ``

【解决方案2】：

webpack documentation 意味着context 是必需的，entry 应该是到context 的相对路径。

module.exports = {
  context: path.resolve(__dirname, 'app'),
  entry: "./home.js"
};

尝试将 webpack.config.js 修改为如下所示：

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

【讨论】：

做到了，非常感谢！上下文对于最新版本的 webpack 来说是新的东西吗？
@Ian 我不这么认为，我只是觉得一直是“推荐”，而“推荐”慢慢变成了“必需”
另外，context 默认设置为进程的当前工作目录，因此有时您可以在配置中不指定它而侥幸……但这是拍摄的好方法自己在脚下