webpack.dev.js 文件错误未知属性 '模块。选项对象与 API 架构不匹配

Question

无效选项对象错误

预期行为

成功的HTML捆绑

实际行为

终端错误消息-[webpack-cli]选项对象无效。开发人员服务器已使用与API架构不匹配的选项对象进行初始化。选项具有未知属性"module"。这些属性有效。。。

复制步骤

• npm i-g webpack、webpack-cli、webpack-dev服务器
• npm i webpack、webpack-cli、webpack-dev-server、html加载程序、文件加载程序、提取加载程序
• 触摸src/main.js index.html
• 为html文件写出一些内容
• 触摸配置/webpack.dev.js
• 将以下内容放入webpack.dev.js

const path = require('path')

module.exports = {
entry: {
main: "./src/main.js",
},
mode: "development",
output: {
filename: "[name]-bundle.js",
path: path.resolve(__dirname, "../dist"),
publicPath: "/",
},
devServer: {
static: "dist",
allowedHosts: ['localhost:8080'],
module: {
rules: [
{
test: /.css$/i,
use: [
{
loader: 'style-loader',
},
{
loader: 'css-loader',
}
]
},
{
test: /.html$/i,
use: [
{
loader: 'file-loader',
options: {
name: '[name].html',
}
},
{
loader: 'extract-loader',
},
{
loader: 'html-loader',
},
]
}
]
}
},
};

我的环境：

• 浏览器：Chrome
• 操作系统：Windows_NT，Windows 10 Home 10.0.190944
• 节点Js:16.17.0
• NPM:8.19.2

依赖项

"dependencies": {
"css-loader": "^6.7.1",
"dotenv": "^16.0.2",
"extract-loader": "^5.1.0",
"file-loader": "^6.2.0",
"html-loader": "^4.2.0",
"style-loader": "^3.3.1",
"webpack": "^5.74.0",
"webpack-cli": "^4.10.0",
"webpack-dev-server": "^4.11.1"
}

附加上下文

这个错误发生在我在本地安装了html加载程序、文件加载程序和提取加载程序之后。在此之后，我更新了我的webpack.dev.js文件(如图所示(

脚本。。。

"scripts": {
"start": "webpack-dev-server --config=config/webpack.dev.js",
}

可能的解决方案

浏览之前的文章，我认为这是一个版本控制问题，但由于我只使用node-js，我很感激能澄清webpack 5何时是最佳的。

Answer 1

[webpack-cli]选项对象无效。开发人员服务器已使用与API架构不匹配的选项对象进行初始化。选项具有未知属性"module"。

将module上移到父配置中，因为devServer.module无效，正如错误所示。