A loader transforms a file from another language or format into a module webpack can bundle. That is how an import can pull in CSS, TypeScript or modern JavaScript that older browsers cannot run.
Loaders run during the build, one file at a time. When a file matches a rule's test in module.rules, webpack runs that rule's loaders on its source. The exclude option skips paths such as node_modules.
module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
}
]
}
};
Here babel-loader compiles modern JavaScript with the @babel/preset-env preset passed in its options. Loaders in a use array run right to left, or bottom to top, and each receives the previous loader's output. So css-loader reads the CSS first, then style-loader injects it into the page.
This answer doesn't lend itself to a diagram - it reads best . No credits were charged.
Why there's no diagram: “”
The interactive diagram is below the answer - jump to diagram ↓ · Below it, the related concept . Jump to it ↓
The diagram below the answer is the concept . Jump to it ↓