webpack
Lader
Suche…
Bemerkungen
Webpack Loader können als "PreLoader", "Loader" und "PostLoader" konfiguriert werden. Obwohl dies nicht unbedingt der Fall sein muss, können Konfigurationen, die Flusen oder andere zwingende oder serielle Vorgänge verwenden, diese Erstellungsphasen in der Pipeline nutzen.
Der Schlüssel zum Verständnis der Loader und ihrer Verwendung ist, dass Webpack jedes Modul in der erforderlichen Grafik über das Loader-System ausführt. Wenn Sie dem obigen Beispiel folgen, bedeutet dies, dass Webpack beim Durchsuchen der Importe Ihrer Anwendung die erforderlichen Dateien identifiziert und mithilfe einer einfachen Regex ermittelt, für welche Datei bzw. welcher Dateityp welcher Lader oder welche Lader-Reihe benötigt wird.
Oben können Sie sehen, dass alle ".js" - oder ".jsx" -Dateien vom eslint-loader in der preLoader-Phase gelinst werden. Andere js|x Dateitypen werden in der Hauptladerphase auch durch den Babel-Loader laufen. In derselben Phase werden alle .scss Dateien in den sass-loader geladen. Auf diese Weise können Sie Sass-Dateien in Ihre JS-Module importieren und in das resultierende JS-Bundle oder sogar in ein anderes separates Standalone-CSS-Bundle (mithilfe eines Plugins ) ausgeben.
Hinweis: Das Importieren von .scss Dateien funktioniert nur mit Webpack und einem entsprechenden Loader. Der Knoten kann diese Art des Imports ohne Pre-Prozessor oder Transpiler nicht verstehen.
Bemerkenswert im .scss Beispiel ist auch die Möglichkeit, Lader mit der ! Ausrufezeichen als "Rohr" zwischen verschiedenen Ladern. Das obige Beispiel leitet die Ausgabe des "sass-loader" in den "css-loader" und schließlich an den "style-loader". Dies könnte auch mit einem Array von loaders: ['style-loader', 'css-loader', 'sass-loader'] . Verschiedene Optionen sind ebenfalls verfügbar loader Definitionen inline und die Abfrage folgen Parameter Syntax häufig in URLs gefunden.
Siehe auch: https://webpack.github.io/docs/loaders.html
Konfiguration mit preLoader für eslint, babel für jsx und css loader
Die folgende Konfiguration kann als Basiskonfiguration verwendet werden, um Ihr Projekt als Bibliothek zu bündeln. Beachten Sie, dass die Modulkonfiguration eine Liste von PreLoadern und Ladern enthält.
// 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'),
}
};