webpack
caricatori
Ricerca…
Osservazioni
I caricatori di Webpack possono essere configurati come "preLoaders", "loaders" e "postLoaders". Sebbene non debbano esserlo, le configurazioni che utilizzano il linting o altre operazioni imperative o seriali possono trarre vantaggio da queste fasi di costruzione nella pipeline.
La chiave per comprendere i caricatori e il loro utilizzo è che Webpack eseguirà ciascun modulo nel grafico dei requisiti tramite il sistema del caricatore. Seguendo l'esempio sopra, questo significa che quando Webpack inizia a scansionare le importazioni della tua applicazione, identifica i file richiesti e usa una semplice regex, determinerà quale tipo di file o file richiede quale loader o serie di caricatori.
Qui sopra puoi vedere che tutti i file ".js" o ".jsx" verranno laccati da eslint-loader nella fase di preLoader. Altri tipi di file js|x verranno eseguiti anche attraverso il babel-loader nella fase di caricamento principale. Inoltre, nella stessa fase, tutti i file .scss verranno caricati nel sass-loader . Questo ti permette di importare file Sass nei tuoi moduli JS e di farli emettere sul bundle JS risultante o anche su un altro bundle CSS autonomo separato (usando un plugin ).
Nota: l' importazione di file .scss funzionerà solo con Webpack e un caricatore appropriato. Il nodo non capirà questo tipo di importazione senza un pre-processore o un transpiler.
Inoltre, nell'esempio .scss è possibile .scss i "loader" con il .scss ! punto esclamativo come un "tubo" tra caricatori diversi. L'esempio sopra collega l'output del "sass-loader" nel "css-loader" e infine nello "style-loader" Questo potrebbe anche essere eseguito con una serie di loaders: ['style-loader', 'css-loader', 'sass-loader'] . Diverse opzioni sono anche disponibili per le definizioni caricatore in linea e seguono la sintassi dei parametri di query che si trova comunemente negli URL.
Vedi anche: https://webpack.github.io/docs/loaders.html
Config usando preLoader per eslint, babel per jsx e css loader.
La seguente configurazione può essere utilizzata come configurazione di base per raggruppare il progetto come libreria. Si noti come la configurazione del modulo contenga un elenco di pre-caricatori e caricatori.
// webpack.config.js
var path = require('path');
module.exports = {
entry: path.join(__dirname, '..', 'src/index.js'),
output: {
path: path.join(__dirname, '..', '/lib'),
filename: outputFile,
library: 'myCoolBundle.js',
libraryTarget: 'umd',
umdNamedDefine: true
},
module: {
preLoaders: [
{
test: /(\.jsx|\.js)$/,
loader: "eslint-loader",
exclude: /node_modules/,
}
],
loaders: [
{
test: /(\.jsx|\.js)$/,
loader: ['babel'],
exclude: /(node_modules)/,
include: path.join(__dirname, '..'),
query: {
presets: [ 'es2015', 'react']
}
},
{
test: /\.scss$/,
loaders: ["style-loader", "css-loader!sass-loader"]
}
]
},
resolve: {
root: path.resolve(__dirname, '..', './src'),
extensions: ['', '.js', '.jsx', '.scss'],
fallback: path.join(__dirname, '../node_modules')
},
eslint: {
configFile: path.resolve(__dirname, '..', '.eslintrc'),
}
};