Question

我正在与webpack一起建立一个React项目。但在执行以下命令后

npm start

我在终端中遇到以下错误

× ｢wds｣: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
 - configuration.entry['main'] should not contain the item '—' twice.
   -> A non-empty array of non-empty strings

这是我的webpack.config.js文件

const path = require('path');
const HWP = require('html-webpack-plugin');
module.exports = {
    entry: path.join(__dirname, '/src/index.js'),
    output: {
        filename: 'build.js',
        path: path.join(__dirname, '/dist')},
    module:{
        rules:[{
           test: /\.js$/,
           exclude: /node_modules/,
           loader: 'babel-loader'
        }]
    },
    plugins:[
        new HWP(
           {template: path.join(__dirname,'/src/index.html')}
        )
    ]
}

下面是package.json的代码

{
  "name": "aragon-connect-1.1",
  "version": "1.0.0",
  "description": "",
  "scripts": {
    "start": "webpack-dev-server — mode development — open — hot",
    "build": "webpack — mode production"
  },
  "author": "Author Name",
  "license": "ISC",
  "dependencies": {
    "react": "^16.13.1",
    "react-dom": "^16.13.1"
  },
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^8.1.0",
    "babel-preset-env": "^1.7.0",
    "babel-preset-react": "^6.24.1",
    "html-webpack-plugin": "^4.3.0",
    "webpack": "^4.44.1",
    "webpack-cli": "^3.3.12",
    "webpack-dev-server": "^3.11.0"
  }
}

有人可以让我知道我哪里出错了吗？预先感谢

Answer 1

您可以尝试使用此脚本吗？

"scripts": {
  "start": "webpack-dev-server --mode development --open --hot",
  "build": "webpack --mode production"
}

还要确定webpack的配置名为webpack.config.js吗？

Answer 2

问题出在脚本中使用的选项格式

  "scripts": {
    "start": "webpack-dev-server — mode development — open — hot",
    "build": "webpack — mode production"
  },

在运行webpack构建中传递的选项应该像--mode那样使用，但是您在上面使用过-。

Answer 3

entry假定具有相对路径而不是绝对路径。

entry: {  main: "./src/index.js" },

如何避免“无效的配置对象。已使用与API架构不匹配的配置对象初始化了Webpack。”

3 个答案: