Regeln gegen Lader im Webpack - Was ist der Unterschied?

In einigen Webpack-Beispielen sehen Sie Verweise auf ein "Regeln" -Array:

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 )

Und in anderen Fällen ein Lader-Array:

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 )

Was ist der Unterschied? Welches sollte verwendet werden?

Loader werden in Webpack 1 und Regeln in Webpack 2 verwendet. Sie sagen, dass "Loader" in Zukunft zugunsten von module.rules veraltet sein werden.

Siehe Migrieren von Versionen auf der offiziellen Webpack-Website.

module.loaders ist jetzt module.rules

Die alte Laderkonfiguration wurde durch ein leistungsfähigeres Regelsystem ersetzt, das die Konfiguration von Ladern und mehr ermöglicht. Aus Kompatibilitätsgründen ist die alte Syntax von module.loaders weiterhin gültig und die alten Namen werden analysiert. Die neuen Namenskonventionen sind einfacher zu verstehen und ein guter Grund, die Konfiguration auf die Verwendung von module.rules zu aktualisieren.