Question

我一直在尝试关注如何使用webpack设置最小反应应用程序的最简单示例...但我似乎无法让webpack-dev-server工作..我已经尝试了很多这里的建议，他们似乎没有工作。我开始使用webpack 3。-.-版本，现在更改为webpack 2.6.2仍然是同样的问题。

这是我的package.json文件：

{
  "name": "react-tutorial",
  "version": "1.0.0",
  "description": "app to learn how to make react apps",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified...leave no be by force to test\" && exit 1",
    "start": "webpack-dev-server --hot"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/davidsbelt/react-tutorial.git"
  },
  "author": "Chuka-ogwude David",
  "license": "ISC",
  "bugs": {
    "url": "****"
  },
  "homepage": "****",
  "dependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-env": "^1.6.0",
    "babel-preset-react": "^6.24.1",
    "react": "^15.6.1",
    "react-dom": "^15.6.1"

  },
  "devDependencies": {
    "webpack": "^2.3.2",
    "webpack-dev-server": "^2.4.2"
  }
}

这是webpack.config.js文件：

 var config = {
entry: './index.js',

output: {//make sure to install 
    path: '/',
    filename: 'bundle.js'
},

devServer: {
    inline: true,
    port: 8080
},

module: {
    loaders: [
        {
            test: /\.jsx?$/,
            exclude: /node_modules/,
            loader: 'babel-loader',

            query: {
                presets: ['es2015', 'react']
            }
        }
    ]
}
}

module.exports = config

这是我在运行npm start时得到的错误：

Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API sche
ma.
 - configuration.entry should be one of these:
   object { <key>: non-empty string | [non-empty string] } | non-empty string | [non-empty string] | function
   The entry point(s) of the compilation.
   Details:
    * configuration.entry should be an object.
    * configuration.entry should be a string.
    * configuration.entry should NOT have duplicate items (items ## 1 and 3 are identical) ({
        "keyword": "uniqueItems",
        "dataPath": ".entry",
        "schemaPath": "#/definitions/common.nonEmptyArrayOfUniqueStringValues/uniqueItems",
        "params": {
          "i": 3,
          "j": 1
        },
        "message": "should NOT have duplicate items (items ## 1 and 3 are identical)",
        "schema": true,
        "parentSchema": {
          "items": {
            "minLength": 1,
            "type": "string"
          },
          "minItems": 1,
          "type": "array",
          "uniqueItems": true
        },
        *********
    * configuration.entry should be an instance of function
      function returning an entry object or a promise..

“

我的所有文件（index.js，App.js，index.html，webpack.config.js，package.json）都在同一个目录中......

请帮助......这个看似简单的配置花了我很多时间。

...谢谢

Answer 1

看起来您正在运行与旧版本1的webpack匹配的配置文件。特别是，webpack中的module.loaders语句不再存在＆gt; 2，已被module.rules替换为： https://webpack.js.org/guides/migrating/#module-loaders-is-now-module-rules

请注意，从webpack 2迁移到3时的更改次数较少，因此我想迁移指南对您的情况会有所帮助。

希望这有帮助！

Answer 2

奇怪，我无法使用您的webpack.config.js文件重现您的问题。但是，将entry行修改为以下内容会转储相同的错误消息：

  entry:
  [
    "./index.js",
    "webpack/hot/dev-server",
  ],

您确定在这里使用了正确的webpack配置文件吗？希望这可以帮助您解决问题。

注意，在我的系统上，我有webpack@2.7.0，webpack-dev-server@2.8.2

webpack 2.6.2，javascript

2 个答案: