webpack
lastmaskiner
Sök…
Anmärkningar
Webpack-laddare kan konfigureras som "preLoaders", "loaders" och "postLoaders". Även om de inte behöver vara det, kan konfigurationer som använder fodring eller andra nödvändiga eller seriella operationer dra nytta av dessa byggningssteg i rörledningen.
Nyckeln till att förstå lastare och deras användning är att Webpack kommer att köra varje modul i kravgrafen genom lastningssystemet. Genom att följa exemplet ovan betyder det att när Webpack börjar genomsöka genom importen av din applikation, kommer den att identifiera de filer som krävs och med hjälp av en enkel regex, kommer att avgöra vilken fil eller filtyp som kräver vilken lastare eller serie lastare.
Ovanför kan du se att alla ".js" eller ".jsx" -filer kommer att fodras av eslint-loader i preLoader-fasen. Andra js|x filtyper körs också genom babel-loader i huvudlastfasen. I samma fas kommer alla .scss filer att laddas i sass-loader . Detta gör att du kan importera Sass-filer i dina JS-moduler och få dem att matas ut till det resulterande JS-paketet eller till ett annat separat fristående CSS-paket (med ett plugin ).
Obs! Importera .scss filer fungerar bara med Webpack och en lämplig lastare. Noden förstår inte den här typen av import utan en förprocessor eller transpilerare.
Notera också i .scss exemplet är förmågan att "kedja" lastare med hjälp av ! utropstecken som ett "rör" mellan olika lastare. Exemplet ovan rör utgången från "sass-loader" till "css-loader" och slutligen till "style-loader". Detta kan också utföras med en rad loaders: ['style-loader', 'css-loader', 'sass-loader'] . Olika alternativ finns också att inline lastar definitioner och följ frågeparametern syntax vanligt förekommande i webbadresser.
Konfigurera med preLoader för eslint, babel för jsx och css loader chaining.
Följande konfiguration kan användas som en baskonfigur för att paketera ditt projekt som ett bibliotek. Lägg märke till hur modulkonfigurationen innehåller en lista med preLoaders och lastare.
// 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'),
}
};