webpack
Lastare och plugins
Sök…
Anmärkningar
Lastare och plugins utgör byggpackarna för Webpack.
Lastare delegeras vanligtvis till en enda uppgift och filtyp. De är lättare att installera och kräver vanligtvis mindre pannplattkod.
Plugins har å andra sidan åtkomst till Webpacks interna build-system via krokar och är därför kraftfullare. Plugins kan modifiera den fullt konfigurerade Webpack-miljön, och de kan utföra anpassade åtgärder under hela sammanställningsprocessen.
När vi till exempel hanterar våra CSS-filer kan en lastare användas för att automatiskt lägga till leverantörsprefix till egenskaper, medan en plugin kan användas för att producera ett minifierat formatmall i paketbyggnadsprocessen.
Komma igång med lastare
För att börja, npm install önskade lastare för ditt projekt.
Insidan av konfigurationsobjekt som exporteras i webpack.config.js , en module kommer egenskap att hålla alla dina lastare.
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']
}
]
},
};
I ovanstående konfiguration använder vi tre grundinställningar för våra lastare:
- test: Det är här vi binder lastare till specifika tillägg med RegExp. Den första uppsättningen av laddare körs på alla .js- och .jsx-filer. Den andra uppsättningen körs på alla .css- och .scss-filer.
- inkludera: Detta är den katalog som vi vill att våra lastare ska köra på. Valfritt kan vi lika enkelt använda egenskapen
excludeatt definiera kataloger som vi inte vill ha med. - lastare: Detta är en lista över alla lastare som vi vill köra på de filer som anges i
testochinclude.
Det är viktigt att notera att lastare körs från höger till vänster i varje lastarray och från botten till topp i de enskilda definitionerna. Koden nedan kör körarna i följande ordning: sass, autoprefixer, css, style .
loaders: [
{
test: /\.s?css$/,
include: source,
loaders: ['style', 'css', 'autoprefixer']
},
{
test: /\.s?css$/,
include: source,
loaders: ['sass']
}
]
Detta är en vanlig källa till förvirring och buggar för utvecklare som är nya för webbpack. Till exempel, när vi använder JSX och ES6-syntax, vill vi föra den koden, inte föra den sammanställda koden som tillhandahålls av vår babelladdare. Därför placeras vår eslint-lastare till höger om vår babel-lastare.
-loader är valfritt när vi listar våra lastare.
loaders: ['sass']
... är ekvivalent med:
loaders: ['sass-loader']
Alternativt kan du använda loader (singular) tillsammans med en sträng som skiljer listan med lastare med ! karaktär.
loaders: ['style', 'css']
... är ekvivalent med:
loader: "style!css"
laddar typsnittsfiler
För att kunna använda typskript med webbpakke behöver du typescript och ts-loader installerat
npm --save-dev install typescript ts-loader
Nu kan du konfigurera webpack så att du använder typskriptfiler
// 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/
}
]
},
...
};