的WebPack，巴貝爾和應對錯誤消息

Question

從哪兒冒出來，我開始收到此錯誤信息，

無效的配置對象。 Webpack已使用不匹配API模式的 配置對象進行初始化。 - 配置有一個未知屬性'devserver'。這些屬性是有效的：object {amd？，bail？，cache ?, context？，dependencies ?, devServer ?, devtool ?, entry，externals ?, loader ?, module ?, name ?, node ?, output ?,性能？，插件？，配置文件？，recordsInputPath ?, recordsOutputPath ?, recordsPath ?, resolve ?, resolveLoader ?, stats ?, target ?, watch ?, watchOptions？ }對於錯別字：請糾正它們。
對於加載器選項：webpack 2不再允許 配置中的自定義屬性。 應該更新加載器以允許通過module.rules中的加載器選項傳遞選項。 直到裝載機更新一個可以使用LoaderOptionsPlugin通過這些選項裝載機： 插件：[ 新webpack.LoaderOptionsPlugin（{// 測試：/.xxx$/，//可以應用此僅針對某些模塊 選項：{ devserver：... }} ） ]

我一直在網上淘了近2小時，試圖找到一個解決方案，但我轉圈圈！

這裏是我的.babelrc，webpack.config.js，.js文件和文件的package.json。

任何幫助將是驚人的。由於

.babelrc

{ 
    "presets":[ 
    "react", 
    ["es2015", {"modules": false, "loose": true}] 
    ] 
} 

的package.json

{ 
    "name": "complete-intro-to-react", 
    "version": "1.0.0", 
    "description": "A two day workshop on a complete intro to React", 
    "main": "index.js", 
    "author": "Brian Holt <btholt@gmail.com>", 
    "license": "MIT", 
    "scripts": { 
    "test": "NODE_ENV=test jest", 
    "update-test": "npm run test -- -u", 
    "build": "webpack", 
    "dev": "webpack-dev-server", 
    "lint": "eslint js/**/*.js webpack.config.js", 
    "watch": "webpack --watch" 
    }, 
    "dependencies": { 
    "axios": "0.15.2", 
    "express": "4.14.0", 
    "history": "^4.4.0", 
    "lodash": "4.16.2", 
    "preact": "^6.4.0", 
    "preact-compat": "^3.9.3", 
    "react": "15.3.2", 
    "react-dom": "15.3.2", 
    "react-redux": "4.4.0", 
    "react-router": "4.0.0-alpha.5", 
    "redux": "3.3.1", 
    "redux-thunk": "^2.1.0" 
    }, 
    "devDependencies": { 
    "babel-core": "^6.16.0", 
    "babel-jest": "16.0.0", 
    "babel-loader": "^6.2.7", 
    "babel-plugin-transform-es2015-modules-commonjs": "^6.18.0", 
    "babel-polyfill": "^6.16.0", 
    "babel-preset-es2015": "^6.24.1", 
    "babel-preset-es2017": "6.16.0", 
    "babel-preset-react": "^6.16.0", 
    "babel-register": "6.16.0", 
    "css-loader": "0.25.0", 
    "enzyme": "2.0.0", 
    "enzyme-to-json": "^1.3.0", 
    "eslint": "3.6.1", 
    "eslint-config-standard": "6.1.0", 
    "eslint-config-standard-jsx": "3.1.0", 
    "eslint-config-standard-react": "4.1.0", 
    "eslint-loader": "1.3.0", 
    "eslint-plugin-promise": "2.0.1", 
    "eslint-plugin-react": "6.3.0", 
    "eslint-plugin-standard": "2.0.0", 
    "jest": "15.1.1", 
    "jsdom": "9.5.0", 
    "json-loader": "0.5.4", 
    "react-addons-test-utils": "15.3.2", 
    "react-test-renderer": "15.3.2", 
    "style-loader": "0.13.1", 
    "webpack": "^2.1.0-beta.22", 
    "webpack-dev-server": "1.16.2" 
    }, 
    "directories": { 
    "test": "test" 
    }, 
    "repository": { 
    "type": "git", 
    "url": "git+https://github.com/btholt/complete-intro-to-react.git" 
    }, 
    "keywords": [ 
    "react", 
    "workshop", 
    "intro", 
    "redux" 
    ], 
    "bugs": { 
    "url": "https://github.com/btholt/complete-intro-to-react/issues" 
    }, 
    "homepage": "https://github.com/btholt/complete-intro-to-react#readme" 
} 

webpack.config.js

const path = require('path') 

module.exports = { 
    context: __dirname, 
    entry: './js/ClientApp.js', 
    devtool: 'source-map', 
    output: { 
    path: path.join(__dirname, '/public'), 
    filename: 'bundle.js' 
    }, 
    devserver: { 
    publicPath: '/public/' 
    }, 
    resolve: { 
    extensions: ['.js', '.json'] 
    }, 
    stats: { 
    colors: true, 
    reasons: true, 
    chunks: false 
    }, 
    module: { 
    rules: [ 
     { 
     enforce: 'pre', 
     test: /\.js$/, 
     loader: 'eslint-loader', 
     exclude: /node_modules/ 
     }, 
     { 
     test: /\.(js|jsx)$/, 
     loader: 'babel-loader', 
     exclude: /node_modules/ 
     }, 
     { 
     test: /\.css$/, 
     use: [ 
      'style-loader', 
      { 
      loader: 'css-loader', 
      options: { 
       url: true 
      } 
      } 
     ] 
     } 
    ] 
    } 
} 

和js文件

import React from 'react' 
import { render } from 'react-dom' 

import '../public/normalize.css' 
import '../public/style.css' 

const App = React.createClass({ 
    render() { 
    return (
      <div className='app'> 
       <div className="landing"> 
        <h1>svideo</h1> 
        <input type="text" placeholder='search' /> 
        <a>or Browse All</a> 
       </div> 
      </div> 
     ) 
    } 
}) 

render(<App/>, document.getElementById('app')); 

Answer 1

首都「S」 - >devServer不是devserver！