javascript - 网页包 2.6.2、JavaScript

Question

我一直在尝试遵循最简单的示例来了解如何使用 webpack 设置最小的 React 应用程序...但我似乎无法让 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 匹配的配置文件。特别是，module.loaders 语句在 webpack > 2 中不再存在，并已被替换为module.rules 请参阅: https://webpack.js.org/guides/migrating/#module-loaders-is-now-module-rules

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

希望这有帮助!