Question

无处不在，我开始收到此错误消息，

无效的配置对象。 Webpack已使用a初始化   与API架构不匹配的配置对象。     - 配置具有未知属性＆＃39; devserver＆＃39;。这些属性是有效的：object {amd？，bail？，cache？，context？，dependencies？，   devServer？，devtool ?, entry，externals？，loader？，module？，name？，   node？，output？，performance？，plugins？，profile？，recordsInputPath ?,   recordsOutputPath？，recordsPath？，resolve？，resolveLoader？，stats？，   目标？，观看？，观看选项？错别字：请纠正它们。
  对于加载程序选项：webpack 2不再允许自定义属性   组态。        应该更新加载程序以允许通过module.rules中的加载程序选项传递选项。        在加载器更新之前，可以使用LoaderOptionsPlugin将这些选项传递给加载器：        插件：[          new webpack.LoaderOptionsPlugin（{            // test：/.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” - ＆gt; devServer不是devserver！

Webpack，babel和React错误消息

1 个答案: