Rules vs Loaders in Webpack - What's the Difference?
WebpackWebpack Problem Overview
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?
Webpack Solutions
Solution 1 - Webpack
Loaders
are used in Webpack 1
Rules
are used in Webpack 2+
migrating docs at the official Webpack site.
According to the> 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
.
Example of Delta
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: {
// ...
}
}
]
}