Webpack Loaders
Using loaders to process files
Babel Loader
module: {
rules: [
{
test: /\.js$/, # match .js files
exclude: /node_modules/,
use: {
loader: 'babel-loader', # transpile JS
options: {
presets: ['@babel/preset-env']
}
}
}
]
}
CSS Loader
npm install style-loader css-loader # install loaders
{
test: /\.css$/,
use: ['style-loader', 'css-loader'] # right to left
}
Sass Loader
npm install sass-loader sass # install
{
test: /\.scss$/,
use: ['style-loader', 'css-loader', 'sass-loader']
}
File Loader
npm install file-loader # install
{
test: /\.(png|jpg|gif)$/,
use: ['file-loader'] # handle images
}
URL Loader
npm install url-loader # install
{
test: /\.(png|jpg|gif)$/,
use: [{
loader: 'url-loader',
options: {
limit: 8192 # inline if < 8kb
}
}]
}