webpack
Caricatori e plugin
Ricerca…
Osservazioni
Caricatori e plugin costituiscono gli elementi costitutivi di Webpack.
I caricatori sono in genere delegati a una singola attività e tipo di file. Sono più facili da configurare e di solito richiedono un codice di codice inferiore.
I plugin, d'altra parte, hanno accesso al sistema di build interno di Webpack tramite hook e sono quindi più potenti. I plugin possono modificare l'ambiente Webpack completamente configurato e possono eseguire azioni personalizzate durante il processo di compilazione.
Quando si gestiscono i nostri file CSS, ad esempio, è possibile utilizzare un caricatore per aggiungere automaticamente i prefissi dei fornitori alle proprietà, mentre un plug-in può essere utilizzato per produrre un foglio di stile minificato nel processo di creazione del pacchetto.
Iniziare con i caricatori
Per iniziare, npm install i caricatori desiderati per il tuo progetto.
All'interno dell'oggetto di configurazione che viene esportato in webpack.config.js , una proprietà del module manterrà tutti i caricatori.
const source = `${__dirname}/client/src/`;
module.exports = {
// other settings here
module: {
loaders: [
{
test: /\.jsx?$/,
include: source,
loaders: ['babel?presets[]=es2015,presets[]=react', 'eslint']
},
{
test: /\.s?css$/,
include: source,
loaders: ['style', 'css', 'autoprefixer', 'sass']
}
]
},
};
Nella configurazione sopra, stiamo usando tre impostazioni di base per i nostri caricatori:
- test: è qui che associamo i caricatori a estensioni specifiche mediante RegExp. Il primo set di caricatori viene eseguito su tutti i file .js e .jsx. Il secondo set è in esecuzione su tutti i file .css e .scss.
- include: questa è la directory in cui vogliamo che i nostri programmi di caricamento vengano eseguiti. Facoltativamente, potremmo altrettanto facilmente utilizzare la proprietà
excludeper definire le directory che non vogliamo includere. - loader: questo è un elenco di tutti i caricatori che vogliamo eseguire sui file specificati in
testeinclude.
È importante notare che i caricatori vengono eseguiti da destra a sinistra in ciascun array di caricatori e dal basso verso l'alto nelle singole definizioni. Il codice seguente eseguirà i caricatori nel seguente ordine: sass, autoprefixer, css, style .
loaders: [
{
test: /\.s?css$/,
include: source,
loaders: ['style', 'css', 'autoprefixer']
},
{
test: /\.s?css$/,
include: source,
loaders: ['sass']
}
]
Questa è una fonte comune di confusione e bug per gli sviluppatori che sono nuovi al webpack. Ad esempio, quando si utilizza la sintassi JSX ed ES6, si desidera filtrare quel codice, non filtrare il codice compilato fornito dal nostro caricatore babel. Pertanto, il nostro caricatore eslint è posizionato a destra del nostro caricatore babel.
Il suffisso -loader è facoltativo quando si elencano i nostri caricatori.
loaders: ['sass']
... è equivalente a:
loaders: ['sass-loader']
In alternativa, è possibile utilizzare la proprietà loader (singolare) insieme a una stringa che separa l'elenco di caricatori da ! personaggio.
loaders: ['style', 'css']
... è equivalente a:
loader: "style!css"
caricamento di file dattiloscritti
Per usare dattiloscritto con webpack è necessario installare typescript e ts-loader
npm --save-dev install typescript ts-loader
Ora puoi configurare il webpack per usare i file dattiloscritti
// webpack.config.js
module.exports = {
..
resolve: {
// .js is required for react imports.
// .tsx is required for react tsx files.
// .ts is optional, in case you will be importing any regular ts files.
extensions: ['.js', '.ts', '.tsx']
},
module: {
rules: [
{
// Set up ts-loader for .ts/.tsx files and exclude any imports from node_modules.
test: /\.tsx?$/,
loaders: isProduction ? ['ts-loader'] : ['react-hot-loader', 'ts-loader'],
exclude: /node_modules/
}
]
},
...
};