Loadere în Webpack
Pentru a extinde capacitățile Webpack de asemenea se folosesc loadere. Ele permit luarea fișierelor de un anumit tip și efectuarea anumitor operații cu acestea.
De exemplu, poți lua toate fișierele cu extensia
.less, să transformi textul lor în CSS,
apoi CSS-ul obținut să fie minimizat
și salvat într-un singur fișier comun.
Să analizăm schema generală de lucru cu un loader folosind exemplul a două loadere imaginare.
Să instalăm primul loader:
npm install test-loader1 --save-dev
Să instalăm al doilea loader:
npm install test-loader2 --save-dev
După instalarea loaderelor putem să le utilizăm în fișierul de configurare (nu este nevoie să le importăm). Vedeți sintaxa:
export default {
entry: './src/index.js',
module: {
rules: [
{
test: /\.css$/i, // tipul fișierului
use: ['test-loader1', 'test-loader2'], // loadere
},
],
},
};
Elementele array-ului pot fi scrise nu într-un șir, ci într-o coloană:
export default {
entry: './src/index.js',
module: {
rules: [
{
test: /\.css$/i,
use: [
'test-loader1',
'test-loader2'
],
},
],
},
};
Pentru diferite tipuri de fișiere se pot scrie reguli diferite:
export default {
entry: './src/index.js',
module: {
rules: [
{
test: /\.sass$/i,
use: [
'test-loader1',
'test-loader2'
],
},
{
test: /\.less$/i,
use: [
'test-loader3',
'test-loader4'
],
},
],
},
};
Loaderele se execută pe rând. În acest sens, rândul începe de la sfârșitul array-ului. Adică primul se execută loaderul, indicat ca ultimul element al array-ului, apoi penultimul și așa mai departe.
