Question

我已经为我的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中没有重复项。有谁知道如何克服这个错误。

Verisons

webpack-dev-server 2.4.1

webpack 2.2.1

Answer 1

当我从1.14移动到2.5并使用类似于你的阵列时，我得到了同样的错误。为我解决的是从阵列中删除'webpack / hot / dev-server'。就我所知，即使被移除，一切仍然表现得相同。

Answer 2

根据latest docs，输入路径必须是字符串或对象。

所以它应该是像这样的事情

entry: `/index.jsx`

或

entry: 
   {
          dev-server: 'webpack-dev-server/client?http://localhost:8888',
          hot: 'webpack/hot/only-dev-server',
          index: '/index.jsx',
    }

我可能只包含index.jsx文件作为条目，并将webpack-dev-server配置选项作为webpack.config.js文件中的单独键移动。你可以通过以下几种方式accomplish this

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

2 个答案: