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

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

Official webpack docs for babel-loader

How to use webpack loader?
参考使用webpack的加载器

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

运行npm React JS时显示错误

1 个答案: