Webpack loaders kan bruges til at ændre hente bestemte filer ind i Webpack, ændre filer og bruges bl.a. til at transpile JSX, TypeScript og lignende.
Loaders installeres, som alt andet i NodeJS, med en package manager som f.eks. npm.
I eksemplet herunder installeres Babel til Webpack og Babel-Core. Her installeres også presettet env. Env er et preset til Babel, der sørger for at kode transpiles til at kunne bruges til de fleste browsere.
npm install babel-loader @babel/core @babel/preset-env --save-devConfig
For at bruge en loade skal den sættes op i config-filen. Herunder bruges config-filen fra et tidligere indlæg, Webpack: config, hvor her tilføjes yderligere indstillinger
const path = require("path");
module.exports = {
entry: "./src/index.js",
output: {
filename: "main.js",
path: path.resolve(__dirname, "dist")
},
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules)/,
use: {
loader: 'babel-loader',
options: {
presets: [
'@babel/preset-env'
]
}
}
}
]
}
}- test: sætter, at det er filer med endelsen .js, der skal indlæses
- exclude: for at undgå at alle filer i mappen node_modules indhentes og giver lange load-tider
Læs mere om forskellige Webpack loaders
