在REACT上安装Webpack时出错：无效的配置对象 Webpack已使用以下配置对象进行了初始化：

问题描述

无效的配置对象。已使用与API模式不匹配的配置对象初始化了Webpack。

• configuration.module具有未知的属性'loaders'。这些属性有效： 对象{defaultRules？，exprContextCritical？，exprContextRecursive？，exprContextRegExp？，exprContextRequest？，noparse ?、规则？，strictExportPresence？，strictThisContextOnImports？，unkNownContextCritical？，unkNownContextRecursive？，unkNownContextRegExp？，unkNownContextRequest？，unsafeCache？，wrappedContextReritive？ wrapperContextRegExp？ } ->影响普通模块（normalModuleFactory）的选项。

• configuration.output.path：提供的值“ dist / assets”不是绝对路径！ ->输出目录为绝对路径（必需）。

---

在React教程课程中（“使用webpack构建”） （我使用Windows，但当然是在Linux上

my webpack.config.js

var webpack = require("webpack");
module.exports = {
    entry: "./src/index.js",output: {
        path: "dist/assets",filename: "bundle.js",publicPath: "assets"
    },devServer: {
        inline: true,contentBase: './dist',port: 3000
    },module: {
        loaders: [
            {
                test: /\.js$/,exclude: /(node_modules)/,loader: ["babel-loader"],query: {
                    presets: ["latest","react","stage-0"]
                }
            }
        ]
    }
}

project directories

my index.js

const { createElement } = React
const { render } = ReactDOM

const style = {
    backgroundColor: 'orange',color:'white',fontFamily: 'verdana'
}

const title = createElement(
    'h1',{id:'title',className:'header',style: style},'hello world'
)

render(
    <h1 id='title'
        className='header'
        style={{backgroundColor:'orange'}}>
    hello world
    </h1>,document.getElementById('react-container')
)

my cmd with command "webpack" to convert index.js to bundle.js

tutorial's terminal that run webpack successfully!!

解决方法

这里有几个问题：

1. 您正在使用无效的密钥loaders。它应该是rules。 从Webpack v2开始更改。有关更多信息，请参见此页面：
   https://webpack.js.org/migrate/3/#module-loaders-is-now-module-rules

2. query已弃用，而赞成options：
   https://webpack.js.org/configuration/module/#ruleoptions--rulequery

3. loader键的值不应为数组。

module: {
  rules: [
    {
      test: /\.js$/,exclude: /(node_modules)/,loader: "babel-loader",options: {
        presets: ["latest","react","stage-0"]
      }
    }
  ]
}