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

Question

无法成功编译 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

Answer 1

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",
  // ...
};

Answer 2

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

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

Webpack : Invalid configuration object/ Invalid Module Entry

javascript

webpack

babeljs

babel-loader