web-dev-qa-db-ja.com

Webpack構成に不明なプロパティ「preLoaders」があります

私は最初からwebpackを学んでいます。 JavaScriptファイルとrequireをリンクする方法を学びました。私は自分のjsファイルを束ねて縮小し、時計で変更を聞いています。ローダーをセットアップして、sassファイルをcssに変換しています。しかし、jshint-loaderを使用してリンティングプロセスをセットアップしようとすると、問題が発生します。

    module: {
preLoaders: [
        {
            test: /\.js$/, // include .js files
            exclude: /node_modules/, // exclude any and all files in the node_modules folder
            loader: "jshint-loader"
        }
],

loaders: [
  {
    test: /\.scss$/,
    loader: 'style-loader!css-loader!sass-loader'
  },
  {
    test: /\.js$/,
    loader: 'babel-loader',
    exclude: /node_modules$/,
    query: {
      presets: ['es2015']
    }
  }
],

}

ここにエラーがあります

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

webpackconfiglintpreloader
28
ronBaker

Webpack v1のサンプルをwebpack v2で使用しようとしているようです。 changelog から直接：

  module: {
-   preLoaders: [
+   rules: [
      {
        test: /\.js$/,
+       enforce: "pre",
        loader: "eslint-loader"
      }
    ]
  }
59
Ivan

v2.1-beta.2から、ローダーセクションの名前がルールに変更され、pre/postLoadersがそれぞれのルールの下で施行プロパティで定義されるようになりました。

したがって、preLoadersの名前をrulesに変更するだけで、準備完了です;-)

27
NetProvoke

webpack 2を使用している場合、forceers：ローダー配列内の 'pre'タグを使用できます。これはプリロードとして機能します。詳細については、以下のコードを参照してください。

module: {
    loaders: [
        {
            test: /\.js$/,
            exclude: /node_modules/,
            loader: 'jshint-loader',
            //this is similar to defining a preloader
            enforce: 'pre'
        },
        {
            test: /\.es6$/,
            exclude: /node_modules/,
            loader: "babel-loader"
        }
    ]

},
1
prasanth shenoy

最初にwebpackをアンインストールします

npm uninstall webpack --save-dev

に続く

npm install [email protected] --save-dev

1
Wasim Malik

代わりにこれを使用してください./webpack.config.js

 var path = require('path');

module.exports = {
   entry: './main.ts',
   resolve: {
     extensions: ['.webpack.js', '.web.js', '.ts', '.js']
   },
   module: {
     rules: [
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/
      }
    ]
   },
   output: {
     filename: 'bundle.js',
     path: path.resolve(__dirname, 'dist')
   }
 }

ドキュメントを見つけることができます here 問題はインストールしたts-loaderのバージョンに関連しています

1
Greko2015 GuFn

私にとっては、「ローダー」を「ルール」に変更するだけで機能しました。

0
Khushboo Gupta