webpack
Lader und Plugins
Suche…
Bemerkungen
Loader und Plugins bilden die Bausteine von Webpack.
Lader werden normalerweise an einen einzelnen Task- und Dateityp delegiert. Sie sind einfacher einzurichten und erfordern normalerweise weniger Code für die Platten.
Plugins hingegen haben über Hooks Zugriff auf das interne Buildsystem von Webpack und sind daher leistungsfähiger. Plugins können die vollständig konfigurierte Webpack-Umgebung ändern und während des Kompilierungsvorgangs benutzerdefinierte Aktionen ausführen.
Wenn Sie beispielsweise mit unseren CSS-Dateien arbeiten, kann ein Loader verwendet werden, um den Eigenschaften automatisch Herstellerpräfixe hinzuzufügen, während ein Plugin verwendet wird, um im Bundler-Buildprozess ein verkleinertes Stylesheet zu erstellen.
Erste Schritte mit Ladern
Zu Beginn npm install die gewünschten Loader für Ihr Projekt.
Innerhalb des Konfigurationsobjekts , das in exportiert wird webpack.config.js , ein module wird Eigentum alle Ihre Lader halten.
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']
}
]
},
};
In der obigen Konfiguration verwenden wir drei grundlegende Einstellungen für unsere Lader:
- test: Hier binden wir Loader mithilfe von RegExp an bestimmte Erweiterungen. Der erste Satz von Ladern wird für alle JS- und JSX-Dateien ausgeführt. Der zweite Satz wird für alle .css- und .scss-Dateien ausgeführt.
- include: Dies ist das Verzeichnis, in dem unsere Lader laufen sollen. Optional können Sie die Eigenschaft
excludegenauso einfach verwenden, um Verzeichnisse zu definieren, die nicht enthalten sein sollen. - Lader: Dies ist eine Liste aller Lader wir uns auf die angegebenen Dateien in ausführen möchten
testundinclude.
Es ist wichtig zu beachten, dass Loader in jedem Loader-Array von rechts nach links und in den einzelnen Definitionen von unten nach oben ausgeführt werden. Mit dem folgenden Code werden die Loader in der folgenden Reihenfolge ausgeführt: sass, autoprefixer, css, style .
loaders: [
{
test: /\.s?css$/,
include: source,
loaders: ['style', 'css', 'autoprefixer']
},
{
test: /\.s?css$/,
include: source,
loaders: ['sass']
}
]
Dies ist eine häufige Quelle von Verwirrung und Fehlern für Entwickler, die mit Webpack noch nicht vertraut sind. Wenn Sie beispielsweise JSX- und ES6-Syntax verwenden, möchten wir diesen Code lint, nicht den kompilierten Code, den unser Babel Loader bereitstellt. Deshalb befindet sich unser eslint loader rechts von unserem babel loader.
Das Suffix -loader ist optional, wenn unsere Lader -loader .
loaders: ['sass']
... ist äquivalent zu:
loaders: ['sass-loader']
Alternativ können Sie die loader -Eigenschaft (Singular) zusammen mit einer Zeichenfolge verwenden, die die Liste der Loader durch die ! Charakter.
loaders: ['style', 'css']
... ist äquivalent zu:
loader: "style!css"
Laden von Typoscript-Dateien
Zur Nutzung Typoskript mit webpack benötigen Sie typescript und ts-loader installiert
npm --save-dev install typescript ts-loader
Jetzt können Sie das Webpack für die Verwendung von Typoskriptdateien konfigurieren
// 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/
}
]
},
...
};