在 REACT 上安装 webpack 时出错：无效的配置对象。 Webpack 已使用配置对象初始化

Question

无效的配置对象。 Webpack 已使用与 API 架构不匹配的配置对象进行初始化。

configuration.module has an unknown property 'loaders'. These properties are valid: object { defaultRules?, exprContextCritical?, exprContextRecursive?, exprContextRegExp?, exprContextRequest?, noParse?, rules?, strictExportPresence?, strictThisContextOnImports?, unknownContextCritical?, unknownContextRecursive?, unknownContextRegExp?, unknownContextRequest?, unsafeCache?, wrappedContextCritical?, wrappedContextRecursive?, wrappedContextRegExp? } -> Options affecting the normal modules (NormalModuleFactory).
configuration.output.path: The provided value "dist/assets" is not an absolute path! -> The output directory as absolute path (required).

在 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!!

Answer 1

这里有几个问题：

您使用的密钥无效，loaders。应该是rules。这是从 Webpack v2 开始改变的。有关详细信息，请参阅此页面：
https://webpack.js.org/migrate/3/#module-loaders-is-now-module-rules
query 已被弃用，取而代之的是 options:
https://webpack.js.org/configuration/module/#ruleoptions--rulequery
loader 键的值不应为数组。

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

在 REACT 上安装 webpack 时出错：无效的配置对象。 Webpack 已使用配置对象初始化

Error in installing webpack on REACT: Invalid configuration object. Webpack has been initialised using a configuration object that

reactjs

webpack

cmd

webpack-dev-server