reactjs configuration.module 有一个未知的属性 'loaders'

configuration.module has an unknown property 'loaders'

提问by S.M_Emamian

my output of error:

我的错误输出：

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).

无效的配置对象。Webpack 已使用与 API 架构不匹配的配置对象进行初始化。- configuration.module 有一个未知的属性 'loaders'。这些属性是有效的： object { exprContextCritical?、exprContextRecursive?、exprContextRegExp?、exprContextRequest?、noParse?、rules?、defaultRules?、unknownContextCritical?、unknownContextRecursive?、unknownContextRegExp?、unknownContextRequest?、wrappedContextRecursive?、wrappedContextRecursive?、 ?,strictExportPresence?,strictThisContextOnImports? } -> 影响正常模块的选项 ( NormalModuleFactory)。

my webpack.config.js:

我的 webpack.config.js：

var webpack = require('webpack');
var path = require('path');

var BUILD_DIR = path.resolve(__dirname, 'src/client/public');
var APP_DIR = path.resolve(__dirname, 'src/client/app');

var config = {
  entry: APP_DIR + '/index.jsx',
  module : {
    loaders : [
      {
        test : /\.jsx?/,
        include : APP_DIR,
        loader : 'babel-loader'
      }
    ]
  },
  output: {
    path: BUILD_DIR,
    filename: 'bundle.js'
  }

};


module.exports = config;

my webpack version:

我的 webpack 版本：

[email protected]

回答by S.M_Emamian

You should change loadersto rulesin webpack 4:

您应该在 webpack 4 中更改loaders为rules：

change:

改变：

loaders 

to:

到：

rules

source: Loaders

来源：装载机

Example:

例子：

module.exports = {
  module: {
    rules: [
      { test: /\.css$/, use: 'css-loader' },
      { test: /\.ts$/, use: 'ts-loader' }
    ]
  }
};

回答by Shawn Stephens

Use rulesin webpack 4 instead of loaders.

rules在 webpack 4 中使用而不是loaders.

https://webpack.js.org/concepts/loaders/

https://webpack.js.org/concepts/loaders/

回答by Anshul

Above given answers are working but we can resolve this issue by changing webpack and webpack-dev-server version to

上面给出的答案是有效的，但我们可以通过将 webpack 和 webpack-dev-server 版本更改为

"webpack": "3.8.1",
"webpack-dev-server": "2.9.4"

It can also solve the issue. Hope it will help.

它也可以解决问题。希望它会有所帮助。

回答by MattG

You should use the migration utilityto migrate your webpack config files, it worked for me.

您应该使用迁移实用程序来迁移您的 webpack 配置文件，它对我有用。

The migration documentationis also useful.

该迁移文档也很有用。