Difference between module.loaders and module.rules in webpack.config.js

Question

I am looking to use a typescript loader with Babel, I see this:

module.exports = {
  module: {
    rules: [
      { 
        test: /\.tsx?$/, 
        use: [
          {
            loader: 'ts-loader', 
            options: {
              transpileOnly: true
            }
          }
        ]
      }
    ]
  }
}

why use module.rules instead of module.loaders? For example, I would have expected to see this instead:

module.exports = {
  module: {
    loaders: [    // loaders instead of rules
      { 
        test: /\.tsx?$/, 
        use: [
          {
            loader: 'ts-loader', 
            options: {
              transpileOnly: true
            }
          }
        ]
      }
    ]
  }
}

what's the difference?

See if can get some help from https://webpack.js.org/guides/migrating/#module-loaders-is-now-module-rules — Imran Ahmad, Oct 23 '17 at 19:00
Possible duplicate of https://stackoverflow.com/questions/43002099/rules-vs-loaders-in-webpack-whats-the-difference — Imran Ahmad, Oct 23 '17 at 19:02

score 3 · Answer 1 · answered Oct 23 '17 at 19:04

3

Rules were interduced webpack 2. Loaders you are seeing is a part of webpack 1.

answered Oct 23 '17 at 19:04

Jorawar Singh

7,463
4
26
39

Difference between module.loaders and module.rules in webpack.config.js

1 Answers1