npm启动不运行react项目

Question

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! newreact@1.0.0 start: webpack npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the newreact@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\\Designer\\AppData\\Roaming\\npm-cache_logs\\2018-05-16T08_09_23_588Z-debug.log

Answer 1

You really need to tell us the version of webpack you are using and post your webpack.config.js file, but I'll try and help. I'm assuming webpack 4.

This bit of the log says there is something wrong with how you have written your webpack.config.js file.

Webpack has been initialized using a configuration object that does not match the API schema.

This line further describes the problem.

configuration.module has an unknown property 'loaders'.

Then it goes on to tell you what properties are valid, and you'll see loaders is not listed. In webpack 4 you need to use 'rules', not 'loaders'.

These properties are valid: object { exprContextCritical?, exprContextRecursive?, exprContextRegExp?, exprContextRequest?, noParse?, rules?, defaultRules?, unknownContextCritical?, unknownContextRecursive?, unknownContextRegExp?, unknownContextRequest?, unsafeCache?, wrappedContextCritical?, wrappedContextRecursive?, wrappedContextRegExp?, strictExportPresence?, strictThisContextOnImports? }

Your modules object should look something like the following, so perhaps take a look at this page and compare the modules object to your own.

module: {
  rules: [
    {
      test: /\.css$/,
      use: [
        { loader: 'style-loader' },
        {
          loader: 'css-loader',
          options: {
            modules: true
          }
        }
      ]
    }
  ]
}

Hope that helps.