Webpack config has an unknown property 'preLoaders'

Question

I'm learning webpack from scratch. I've learned how to link javascript files with require. I'm bundling and minifying my js files and i'm listening for changes with watch. I'm setting up loaders to convert my sass files to css. But when I try to setup a linting process with jshint-loader, i'm running into issues.

    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']
    }
  }
],

}

Here is the 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 'preLoaders'. These properties are valid: object { exprContextCritical?, exprContextRecursive?, exprContextRegExp?, exprContextRequest?, loaders?, noParse?, rules?, unknownContextCritical?, unknownContextRecursive?, unknownContextRegExp?, unknownContextRequest?, unsafeCache?, wrappedContextCritical?, wrappedContextRecursive?, wrappedContextRegExp? } Options affecting the normal modules (NormalModuleFactory).

Answer 1

You are apparently trying to use examples for webpack v1 with webpack v2. Straight from the changelog:

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

Answer 2

From v2.1-beta.23 the loaders section is renamed to rules and pre/postLoaders is now defined under each rule with the enforce property.

So just rename preLoaders to rules and you should be good to go ;-)

Answer 3

if you are using webpack 2 then you may use the enforce: 'pre' tag inside the loaders array and this will work as a preload please refer code below for details

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"
        }
    ]

},

Answer 4

First uninstall webpack

npm uninstall webpack --save-dev

followed by

npm install webpack@2.1.0-beta.22 --save-dev

Answer 5

use this one instead ./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')
   }
 }

the documentation can be found here the problem is related to the version of ts-loader you installed

Answer 6

For me it worked by simply changing the "loaders" to "rules".