Правила проти завантажувачів у Webpack - в чому різниця?

У деяких прикладах Webpack ви бачите посилання на масив "правила":

module.exports = {
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          //resolve-url-loader may be chained before sass-loader if necessary
          use: ['css-loader', 'sass-loader']
        })
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin('style.css')
    //if you want to pass in options, you can do so:
    //new ExtractTextPlugin({
    //  filename: 'style.css'
    //})
  ]
}

( https://github.com/webpack-contrib/extract-text-webpack-plugin )

А в іншому масив навантажувачів:

var ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
    module: {
        loaders: [
            {
                test: /\.css$/,
                loader: ExtractTextPlugin.extract({
                    loader: "css-loader"
                })
            },
            { test: /\.png$/, loader: "file-loader" }
        ]
    },
    plugins: [
        new ExtractTextPlugin({
            filename: "style.css",
            allChunks: true
        })
    ]
};

( https://github.com/webpack/webpack/tree/master/examples/css-bundle )

Яка різниця? Що слід використовувати?

Loadersвикористовуються у Webpack 1
Rulesвикористовуються у Webpack 2+

Згідно з мігруючими документами на офіційному веб-сайті Webpack.

module.loaders зараз module.rules

Стару конфігурацію навантажувача замінила більш потужна система правил, яка дозволяє конфігурувати навантажувачі тощо. З міркувань сумісності, старий module.loadersсинтаксис все ще діє, а старі імена проаналізовані. Нові правила іменування легше зрозуміти і є вагомою причиною оновити конфігурацію до використання module.rules.

Приклад Дельти

  module: {
-   loaders: [
+   rules: [
      {
        test: /\.css$/,
-       loaders: [
-         "style-loader",
-         "css-loader?modules=true"
+       use: [
+         {
+           loader: "style-loader"
+         },
+         {
+           loader: "css-loader",
+           options: {
+             modules: true
+           }
+         }
        ]
      },
      {
        test: /\.jsx$/,
        loader: "babel-loader", // Do not use "use" here
        options: {
          // ...
        }
      }
    ]
  }