webpack
Laders en plug-ins
Zoeken…
Opmerkingen
Laders en plug-ins vormen de bouwstenen van Webpack.
Laders worden doorgaans gedelegeerd aan een enkele taak en bestandstype. Ze zijn eenvoudiger in te stellen en vereisen meestal minder boilerplate-code.
Plug-ins daarentegen hebben via haken toegang tot het interne build-systeem van Webpack en zijn daarom krachtiger. Plug-ins kunnen de volledig geconfigureerde Webpack-omgeving wijzigen en ze kunnen tijdens het compilatieproces aangepaste acties uitvoeren.
Bij het omgaan met onze CSS-bestanden kan bijvoorbeeld een loader worden gebruikt om automatisch leveranciersvoorvoegsels aan eigenschappen toe te voegen, terwijl een plug-in kan worden gebruikt om een verkleinde stylesheet in het bundlerbouwproces te produceren.
Aan de slag met laders
Om te beginnen npm install de gewenste laders voor uw project.
Binnen het configuratieobject dat wordt geëxporteerd in webpack.config.js , bevat een module eigenschap al uw laders.
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 de bovenstaande configuratie gebruiken we drie basisinstellingen voor onze laders:
- test: hier binden we laders aan specifieke extensies met RegExp. De eerste set laders wordt uitgevoerd op alle .js en .jsx-bestanden. De tweede set wordt uitgevoerd op alle .css- en .scss-bestanden.
- include: dit is de map waar onze laders op moeten draaien. Optioneel kunnen we net zo gemakkelijk de eigenschap
excludegebruiken om mappen te definiëren die we niet willen opnemen. - laders: dit is een lijst met alle laders die we willen uitvoeren op de bestanden die in de
testincludeopgegeven en dieinclude.
Het is belangrijk op te merken dat laders van rechts naar links worden uitgevoerd in elke array met laders, en van onder naar boven in de afzonderlijke definities. De onderstaande code voert de laders in de volgende volgorde uit: sass, autoprefixer, css, style .
loaders: [
{
test: /\.s?css$/,
include: source,
loaders: ['style', 'css', 'autoprefixer']
},
{
test: /\.s?css$/,
include: source,
loaders: ['sass']
}
]
Dit is een veel voorkomende bron van verwarring en bugs voor ontwikkelaars die nieuw zijn bij webpack. Wanneer we bijvoorbeeld de syntaxis van JSX en ES6 gebruiken, willen we die code pluisen, niet de gecompileerde code die door onze babel-lader wordt geleverd. Daarom staat onze eslint-lader rechts van onze babel-lader.
Het achtervoegsel -loader is optioneel bij het vermelden van onze laders.
loaders: ['sass']
... is gelijk aan:
loaders: ['sass-loader']
Als alternatief kunt u de loader (enkelvoud) gebruiken samen met een tekenreeks die de lijst met laders scheidt door de ! karakter.
loaders: ['style', 'css']
... is gelijk aan:
loader: "style!css"
typescript-bestanden laden
Om typescript te gebruiken met webpack moet je typescript en ts-loader geïnstalleerd hebben
npm --save-dev install typescript ts-loader
Nu kunt u webpack configureren om typescript-bestanden te gebruiken
// 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/
}
]
},
...
};