webpack
Chargeurs & Plugins
Recherche…
Remarques
Les chargeurs et les plug-ins constituent les éléments constitutifs de Webpack.
Les chargeurs sont généralement délégués à une seule tâche et à un type de fichier. Ils sont plus faciles à configurer et nécessitent généralement moins de code standard.
Les plugins, quant à eux, ont accès au système de génération interne de Webpack via des hooks, et sont donc plus puissants. Les plug-ins peuvent modifier l'environnement Webpack entièrement configuré et effectuer des actions personnalisées tout au long du processus de compilation.
Lorsque vous utilisez nos fichiers CSS, par exemple, un chargeur peut être utilisé pour ajouter automatiquement des préfixes de fournisseur aux propriétés, tandis qu'un plug-in peut être utilisé pour produire une feuille de style réduite dans le processus de génération de bundler.
Démarrer avec des chargeurs
Pour commencer, npm install les chargeurs souhaités pour votre projet.
À l'intérieur de l'objet de configuration exporté dans webpack.config.js , une propriété de module contiendra tous vos chargeurs.
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']
}
]
},
};
Dans la configuration ci-dessus, nous utilisons trois paramètres de base pour nos chargeurs:
- test: C'est ici que nous lions les chargeurs à des extensions spécifiques à l'aide de RegExp. Le premier jeu de chargeurs est en cours d'exécution sur tous les fichiers .js et .jsx. Le deuxième ensemble est en cours d'exécution sur tous les fichiers .css et .scss.
- include: Ceci est le répertoire sur lequel nos chargeurs doivent fonctionner. Si vous le souhaitez, vous pouvez également utiliser la propriété
excludepour définir les répertoires que vous ne souhaitez pas inclure. - loaders: C'est une liste de tous les chargeurs que nous voulons exécuter sur les fichiers spécifiés dans
testetinclude.
Il est important de noter que les chargeurs sont exécutés de droite à gauche dans chaque tableau de chargeurs et de bas en haut dans les définitions individuelles. Le code ci-dessous exécutera les chargeurs dans l'ordre suivant: sass, autoprefixer, css, style .
loaders: [
{
test: /\.s?css$/,
include: source,
loaders: ['style', 'css', 'autoprefixer']
},
{
test: /\.s?css$/,
include: source,
loaders: ['sass']
}
]
Ceci est une source fréquente de confusion et de bogues pour les développeurs qui sont nouveaux dans Webpack. Par exemple, lorsque vous utilisez la syntaxe JSX et ES6, nous souhaitons lisser ce code, et non pas le code compilé fourni par notre chargeur Babel. Par conséquent, notre chargeur eslint est placé à droite de notre chargeur babel.
Le suffixe -loader est facultatif lors de la liste de nos chargeurs.
loaders: ['sass']
... est équivalent à:
loaders: ['sass-loader']
Alternativement, vous pouvez utiliser la propriété loader (singulier) avec une chaîne séparant la liste des chargeurs par le ! personnage.
loaders: ['style', 'css']
... est équivalent à:
loader: "style!css"
chargement de fichiers typographiques
Pour utiliser typecript avec webpack, il vous faut typescript et ts-loader installés
npm --save-dev install typescript ts-loader
Maintenant, vous pouvez configurer webpack pour utiliser des fichiers dactylographiés
// 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/
}
]
},
...
};