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

Question

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

配置对象无效。Webpack 已使用与 API 架构不匹配的配置对象进行初始化。 - 配置模块具有未知属性"加载器"。

&&

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

我的包.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 文档暗示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']
}
}
}
]
}
};