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
        }
    }]
}