webpack
laders
Zoeken…
Opmerkingen
Webpack-laders kunnen worden geconfigureerd als "preLoaders", "loaders" en "postLoaders". Hoewel dit niet hoeft te zijn, kunnen configuraties die linting of andere imperatieve of seriële bewerkingen gebruiken, profiteren van deze bouwfasen in de pijplijn.
De sleutel tot het begrijpen van laders en hun gebruik is dat Webpack elke module in de vereiste grafiek via het ladersysteem zal uitvoeren. Volgens het bovenstaande voorbeeld betekent dit dat wanneer Webpack door de import van uw applicatie begint te kruipen, het de benodigde bestanden zal identificeren en met een eenvoudige regex zal bepalen welk bestand of bestandstype vereist welke lader of reeks laders.
Hierboven ziet u dat alle ".js" of ".jsx" bestanden door de eslint-loader in de preLoader-fase worden verwijderd. Andere js|x bestandstypen zullen ook worden uitgevoerd door de babel-loader in de hoofdlader fase. In dezelfde fase worden ook .scss bestanden in de sass-loader geladen. Hiermee kunt u Sass-bestanden in uw JS-modules importeren en deze naar de resulterende JS-bundel of zelfs een andere zelfstandige CSS-bundel laten uitvoeren (met een plug-in ).
Opmerking: het importeren van .scss bestanden werkt alleen met Webpack en een geschikte lader. Node zal dit soort import niet begrijpen zonder een pre-processor of transpiler.
Ook in het .scss voorbeeld is de mogelijkheid om laders te "ketenen" met behulp van de ! uitroepteken als een "pijp" tussen verschillende laders. Het bovenstaande voorbeeld stuurt de uitvoer van de "sass-loader" naar de "css-loader" en tenslotte naar de "style-loader" Dit kan ook worden uitgevoerd met een reeks loaders: ['style-loader', 'css-loader', 'sass-loader'] . Verschillende opties zijn ook beschikbaar voor loader definities inline en volg de query parameter syntax vaak gevonden in URL's.
Configureer het gebruik van preLoader voor eslint, babel voor jsx en css loader chaining.
De volgende configuratie kan worden gebruikt als basisconfiguratie voor het bundelen van uw project als een bibliotheek. Merk op hoe de module-configuratie een lijst van preLoaders en laders bevat.
// 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'),
}
};