Reactjs 如何配置Webpack 2.2.1?错误与API架构不匹配的配置对象

Reactjs 如何配置Webpack 2.2.1?错误与API架构不匹配的配置对象,reactjs,webpack-dev-server,webpack-2,Reactjs,Webpack Dev Server,Webpack 2,我已经为我的React.js应用程序安装了webpack和webpack dev server,配置webpack.base.js文件时遇到问题 const webpack = require('webpack'); const path = require('path'); const fs = require('fs'); var config = { entry: [ 'webpack-dev-server/client?http://localhost:8888',

我已经为我的React.js应用程序安装了webpack和webpack dev server,配置webpack.base.js文件时遇到问题

const webpack = require('webpack');
const path = require('path');
const fs = require('fs');

var config = {
  entry: [
    'webpack-dev-server/client?http://localhost:8888',
    'webpack/hot/only-dev-server',
    './index.jsx'
  ],
  output: {
    publicPath: 'http://localhost:8888/',
    path: './build',
    filename: 'bundle.js',
  },
  module: {
    rules: [{
      test: /\.(jsx|js)?$/,
      exclude: /(node_modules|bower_componenets)/,
      loader: 'babel-loader',
      options: {
        plugins: 'transform-runtime',
        presets: ['es2015']
      }
    }, {
      test: /\.css$/,
      use: [
        "style-loader",
        "css-loader"
      ]
    }, {
      test: /\.scss$/,
      use: ['style-loader', 'css-loader', 'sass-loader']
    }, {
      // inline base64 URLs for <=8k images, direct URLs for the rest
      test: /\.(png|jpg)$/,
      use: {
        loader: 'url-loader',
        options: {
          limit: 8192,
          name: '/resources/images/[name].[ext]',
        }
      }
    }]
  },
  resolve: {
    modules: [
      path.resolve(__dirname),
      "node_modules"
    ],
    extensions: ['.js', '.jsx', '.ts'],
    alias: {
      $prefetch: 'src/prefetch',
      $fetchData: 'src/fetchData',
      $language: 'src/text/lang',
      $beforeEnter: 'src/beforeEnter',
      $components: 'src/temp',
      $svg: 'src/svg/index',
      $style: 'scss',
      $containers: 'src/containers',
      $actions: 'src/actions',
      $util: 'src/util',
      $reducers: 'src/reducers',
      $themes: 'src/theme',
      $auth: 'src/auth',
      $home: 'src/',
      $resources: 'resources',
      $navbarSelected: 'resources/images/navbar/selected',
      $navbarUnselected: 'resources/images/navbar/unselected',
      $plugins: 'src/plugins',
      $vendor: 'vendor',
      $test: 'tests',
      $testStore: 'tests/stores'
    },
  },
  resolveLoader: {
    modules: [
      path.resolve(__dirname),
      "node_modules"
    ]
  },
  plugins: [
    new webpack.ProvidePlugin({
      Promise: 'promise-polyfill',
      fetch: 'imports-loader?this=>global!exports-loader?global.fetch!whatwg-fetch',
    }),
  ],
  node: {
    fs: 'empty',
  },
};

module.exports = config;
然而,当我在我的目录根目录中运行webpack dev server时,我得到了以下错误

Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
 - 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
        },
        "data": [
          "/usr/local/lib/node_modules/webpack-dev-server/client/index.js?http://localhost:8888",
          "webpack/hot/dev-server",
          "/Users/tormod/Desktop/smartzer/panda/ReactFiles/editor/node_modules/webpack-dev-server/client/index.js?http://localhost:8888",
          "webpack/hot/dev-server",
          "webpack-dev-server/client?http://localhost:8888",
          "webpack/hot/only-dev-server",
          "./index.jsx"
        ]
      }).
      [non-empty string]
    * configuration.entry should be an instance of function
      function returning an entry object or a promise..
这对我来说毫无意义,因为config.entry中没有重复项。有人知道如何克服这个错误吗

威瑞森

网页包开发服务器2.4.1

webpack 2.2.1

根据,输入路径需要是字符串或对象

所以应该是这样的

entry: `/index.jsx`


我可能只是将index.jsx文件作为条目,并将webpack dev server config选项作为单独的键移动到webpack.config.js文件中。你有很多种方法

当我使用与你类似的数组从1.14移动到2.5时,我遇到了相同的错误。解决这个问题的方法是从阵列中删除“webpack/hot/dev server”。就我所知,即使删除了该选项,所有内容的表现仍然相同。

能否将配置中的输出publicPath更改为“/”并查看其是否正常工作?谢谢您的回复。尝试了这个,但得到了相同的错误,你是怎么想的?你是如何运行webpack开发服务器的?看起来本地安装的软件包和全局安装的软件包之间存在冲突,尽管它不应该同时包含这两个软件包。尝试在package.json:dev:webpack dev server-config webpack.base.js中创建一个脚本,并使用npm run dev运行它。如果仍然出现错误,您可以尝试使用npm uninstall-g webpack-dev-server删除全局安装的脚本。感谢您的帮助,但仍然会出现相同的错误。我在文档中看到了他们使用的条目:['webpack dev server/client?http://localhost:8888“,”webpack/hot/only dev server“,”/index.jsx“]这对我来说是有效的,摘自create react app:entry:[require.resolve'webpack-dev-server/client'+'?/”,require.resolve'webpack/hot/dev server',“./src/index.js']
entry: 
   {
          dev-server: 'webpack-dev-server/client?http://localhost:8888',
          hot: 'webpack/hot/only-dev-server',
          index: '/index.jsx',
    }