configuration.moduleに不明なプロパティ「ローダー」があります


136

エラーの私の出力:

無効な構成オブジェクト。Webpackは、APIスキーマと一致しない構成オブジェクトを使用して初期化されました。-configuration.moduleに不明なプロパティ「ローダー」があります。次のプロパティは有効です:オブジェクト{exprContextCritical?、exprContextRecursive?、exprContextRegExp?、exprContextRequest?、noParse?、rules、defaultRules?、unknownContextCritical?、unknownContextRecursive?、unknownContextRegExp?、unknownContextRequest?、unsafeCache?、wrappedContextCritical?、wrappedContextRecursive ?、strictExportPresence?、strictThisContextOnImports?}->通常のモジュールに影響するオプション(NormalModuleFactory)。

私の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;

私のwebpackバージョン:

webpack@4.1.1

回答:


317

あなたは変更する必要loadersrulesWebPACKの4:

変化する:

loaders 

に:

rules

ソース:ローダー

例:

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

1
タイプミスですか?それはする必要がありますrulesWebPACKの4に

あなたはWebPACKの4でルールを使用する必要があります
S.M_Emamian

2
ローダーのルールをwebpack 4のルールに変更します。もう一度言う必要がある場合に備えて:/
Helmut Granda

1
あなたは、変更の理由はWebPACKの4であることをあなたの答えに説明しなければならない
kojow7


2

上記の回答は機能していますが、webpackとwebpack-dev-serverのバージョンを次のように変更することでこの問題を解決できます

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

問題を解決することもできます。お役に立てば幸いです。


私はあなたに上向きを与えました。唯一の問題は、構成ファイルを変更する必要がないようにするためだけに、フレームワークとツールのバージョンを更新して新しい機能を古いバージョンに戻さないことです。おそらく、ツールが機能する新しい方法に合わせて設定ファイルを変更するのに苦労することは悪くありません。それが不可能でない限り。
Eniola

ありがとう@Eniola、そうだね。私が述べたように、S.M_Emamianの答えは正しいですが、誰かが古いバージョンのwebpackで動作することに同意する場合、私の答えは動作します。
Anshul


0

webpack.config.jsの下で私のために働いています

module.exports = {
    entry: [
        '.src/index.js'
    ],
    output:{
        path: __dirname,
        filename: 'app/js/main.js'
    },
    module:{
        rules: [
          { test: /\.css$/, use: 'css-loader' },
          { test: /\.ts$/, use: 'ts-loader' }
        ]
    }
}
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.