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 watc

Answer 1

First uninstall webpack

npm uninstall webpack --save-dev

followed by

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

Answer 2

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

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

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 5

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 6

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