concepts - Reglas vs Cargadores en Webpack: ¿cuál es la diferencia?

webpack react

Question

En algunos ejemplos de Webpack, verá referencias a una matriz de "reglas":

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 )

Y en otro, una matriz de cargadores:

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 )

¿Cuál es la diferencia? ¿Cuál debería ser usado?

Answer 1

Loaders se usa en Webpack 1 y las Reglas en Webpack 2. Dicen que "Loaders" en el futuro quedará en desuso a favor de module.rules.

Consulte webpack.js.org/migrate/3/#module-loaders-is-now-module-rules en el sitio web oficial de Webpack.

module.loaders ahora es module.rules

La antigua configuración del cargador fue reemplazada por un sistema de reglas más potente, que permite la configuración de los cargadores y más. Por razones de compatibilidad, la sintaxis antigua de module.loaders sigue siendo válida y los nombres antiguos se analizan. Las nuevas convenciones de nomenclatura son más fáciles de entender y son una buena razón para actualizar la configuración al uso de module.rules.