運行npm React JS時顯示錯誤

Question

我遵循了反應配置步驟。 我終於嘗試運行它顯示了一個錯誤。 任何可以幫助我的人。

這是配置文件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 

這是錯誤消息

Answer 1

這是正確的方法

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

如果沒有在下面寫下來，這應該可以解決問題。

適用於babel-loader的官方Webpack文檔

如何使用webpack加載器？
關於在Webpack中使用加載程序的參考

帶Webpack的Babel裝載機
babel-loader插件的用法