Конфигурация Webpack имеет неизвестное свойство 'preLoaders'

Я изучаю webpack с нуля. Я узнал, как связать файлы javascript с требованием. Я собираю и уменьшаю файлы 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?, exprContextRecursive?, exprContextRecExp?, exprContextRequest?, loaders?, noParse?, rules?, unknownContextCritical?, unknownContextRecursive?, unknownContextRegExp?, unknownContextRequest?, unsafeCache?, wrappedContextCritical?, wrappedContextRecursive?, wrappedContextRegExp? }    Опции, влияющие на нормальные модули (NormalModuleFactory).

Ответы

Ответ 1

Вы, очевидно, пытаетесь использовать примеры для webpack v1 с webpack v2. Прямо из журнала изменений:

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

Ответ 2

Начиная с v2.1-beta.23, раздел загрузчиков переименовывается в правила, а pre/postLoaders теперь определяется для каждого правила со свойством принудительного применения.

Так что просто переименуйте preLoaders в rules и вам будет хорошо ;-)

Ответ 3

Сначала удалите веб-пакет

npm uninstall webpack --save-dev

с последующим

npm install [email protected] --save-dev

Ответ 4

если вы используете webpack 2, тогда вы можете использовать тег "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"
        }
    ]

},

Ответ 5

используйте вместо этого. /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')
   }
 }

документацию можно найти здесь, проблема связана с установленной вами версией ts-loader

Ответ 6

Для меня это сработало, просто изменив "загрузчики" на "правила".