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

Question

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

• configuration.module 有一个未知属性“loaders”。这些属性是有效的： object { defaultRules?, exprContextCritical?, exprContextRecursive?, exprContextRegExp?, exprContextRequest?, noParse?, rules?, strictExportPresence?, strictThisContextOnImports?, unknownContextCritical?, unknownContextRecursive?, unknownContextRegExp?, unknownContextRequest?, unsafeCache?, WrappedContextCritical?, WrappedContextRecursive?, WrappedContextRegExp? } -> 影响正常模块的选项 (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!!

Answer 1

这里有几个问题：

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"]
      }
    }
  ]
}