运行 npm React JS 时显示错误答案

【问题标题】：Error displaying when run npm React JS运行 npm React JS 时显示错误
【发布时间】：2018-10-10 13:56:59
【问题描述】：

我遵循了一个反应配置步骤。我终于尝试运行它显示错误。谁能帮帮我。

这是配置文件 webpack.config.js

var config = {
   entry: './main.js',
   output: {
      path:'/',
      filename: 'index.js',
   },
   devServer: {
      inline: true,
      port: 8080
   },
   module: {
      loaders: [
         {
            test: /\.jsx?$/,
            exclude: /node_modules/,
            loader: 'babel-loader',
            query: {
               presets: ['es2015', 'react']
            }
         }
      ]
   }
}
module.exports = config;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
> reactapp@1.0.0 start C:\Users\Muhammed Suhail\Desktop\reactApp
> webpack-dev-server --hot

× ｢wds｣: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
 - configuration.module has an unknown property 'loaders'. These properties are valid:
   object { exprContextCritical?, exprContextRecursive?, exprContextRegExp?, exprContextRequest?, noParse?, rules?, defaultRules?, unknownContextCritical?, unknownContextRecursive?, unknownContextRegExp?, unknownContextRequest?, unsafeCache?, wrappedContextCritical?, wrappedContextRecursive?, wrappedContextRegExp?, strictExportPresence?, strictThisContextOnImports? }
   -> Options affecting the normal modules (`NormalModuleFactory`).
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! reactapp@1.0.0 start: `webpack-dev-server --hot`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the reactapp@1.0.0 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Muhammed Suhail\AppData\Roaming\npm-cache\_logs\2018-04-30T12_46_31_216Z-debug.log

这是错误信息

【问题讨论】：

粘贴配置文件
您好，先生。我刚刚添加了配置文件。请检查一下。
您添加了package.json 文件。请添加 Webpack 配置文件。
Webpack config has an unknown property 'preLoaders'的可能重复
是的。对不起。我会上传

标签： javascript reactjs npm

【解决方案1】：

这是正确的做法

module: {
  rules: [ // Change this line
    {
      test: /\.jsx?$/,
      exclude: /node_modules/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['es2015', 'react']
        }
      }
    }
  ]
}

如果不写在下面，这应该可以解决问题。

Official webpack docs for babel-loader

How to use webpack loader?
在 webpack 中使用 loader 的参考

Babel loader with webpack
babel-loader 插件的用法

【讨论】：

哦。好的。谢谢。
我为你添加了参考（Y）