Rules vs Loaders in Webpack - What's the Difference?

问题:

In some Webpack examples, you see reference to a "rules" 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)

And in other, a loaders 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)

What is the difference? Which should be used?

回答1:

Loaders is used in Webpack 1, and Rules in Webpack 2. They say that "Loaders" in the future it will be deprecated in favour of module.rules.

See Migrating Versions at the official Webpack site.

module.loaders is now module.rules

The old loader configuration was superseded by a more powerful rules system, which allows configuration of loaders and more. For compatibility reasons, the old module.loaders syntax is still valid and the old names are parsed. The new naming conventions are easier to understand and are a good reason to upgrade the configuration to using module.rules.

文章来源: Rules vs Loaders in Webpack - What's the Difference?