webpack
Chargeurs
Recherche…
Remarques
Les chargeurs Webpack peuvent être configurés comme "pré-chargeurs", "chargeurs" et "post-chargeurs". Bien qu'elles ne soient pas obligées, les configurations qui utilisent le linting ou d'autres opérations impératives ou en série peuvent tirer parti de ces étapes de construction dans le pipeline.
La clé de la compréhension des chargeurs et de leur utilisation est que Webpack exécutera chaque module du graphe de besoin via le système de chargement. Suivant l'exemple ci-dessus, cela signifie que lorsque Webpack commence à explorer les importations de votre application, il identifiera les fichiers requis et, à l'aide d'une simple expression régulière, déterminera quel type de fichier ou de fichier requiert quel chargeur ou série de chargeurs.
Vous pouvez voir ci-dessus que tous les fichiers ".js" ou ".jsx" seront écrits par eslint-loader dans la phase preLoader. D'autres types de fichiers js|x seront également exécutés par l'intermédiaire de babel-loader dans la phase de chargement principale. De plus, dans la même phase, tous les fichiers .scss seront chargés dans le sass-loader . Cela vous permet d'importer des fichiers Sass dans vos modules JS et de les envoyer dans le bundle JS résultant ou même dans un autre bundle CSS autonome (en utilisant un plugin ).
Remarque: L' .scss fichiers .scss ne fonctionne qu'avec Webpack et un chargeur approprié. Node ne comprendra pas ce type d'importation sans pré-processeur ni transpiler.
A noter également dans le .scss exemple est la capacité de chargement « chaîne » en utilisant le ! point d'exclamation comme "pipe" entre différents chargeurs. L'exemple ci-dessus conduit la sortie du "sass-loader" dans le "css-loader" et enfin au "style-loader". Cela pourrait aussi être fait avec un tableau de loaders: ['style-loader', 'css-loader', 'sass-loader'] . Différentes options sont également disponibles pour les définitions de chargeur en ligne et suivent la syntaxe du paramètre de requête généralement trouvée dans les URL.
Voir aussi: https://webpack.github.io/docs/loaders.html
Config en utilisant preLoader pour eslint, babel pour jsx et chaînage de chargeur css.
La configuration suivante peut être utilisée comme configuration de base pour regrouper votre projet en tant que bibliothèque. Notez comment la configuration du module contient une liste de pré-chargeurs et de chargeurs.
// 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'),
}
};