webpact+react报错Invalid configuration object. Webpack has been initialised using a configuration obj

原创于 2018-05-28 22:47:52 发布 · 2.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#webpack

react 同时被 2 个专栏收录

13 篇文章

订阅专栏

webpack

5 篇文章

订阅专栏

在学习React与Webpack基本配置时遇到问题，报错信息指出配置对象无效，具体为Webpack初始化时使用的配置对象不匹配API。错误源于`module.loaders`属性不再被支持，现在应改为`module.rules`。这是由于Webpack版本升级导致的规则变更。解决方案是将原有的`loaders`配置项替换为`rules`，以适配新版本Webpack的模块规则。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

React系列学习笔记：1.React与webpack基本配置：https://www.jianshu.com/p/eb2da4fe7f5b 可参考目录分配，但是webpack.config.js配置中loaders写法已不能再使用。

会一直报无效的配置，如下：

F:\node.js\5-3\5-4>webpack

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?, wrappedContextCri

tical?, wrappedContextRecursive?, wrappedContextRegExp?, strictExportPresence?, strictThisContextOnImports? }

-> Options affecting the normal modules (`NormalModuleFactory`).

原因： webpack版本更新，新的规则改变。

解决：

把module里的那个loaders改成rules

module: {
 rules: [
        {
        test: /\.scss$/,
        loader: ('style!css!sass')
        }
  ]
},

参考官方文档：

现在的webpack的loader是配置在rule里的

https://doc.webpack-china.org/configuration/module/#module-rules