Front-End Build Tools

Chapter 4: Webpack Loaders and Plugins

4.1 Common Loaders

Loaders transform files as they're imported into your application.

// Common loaders
module: {
    rules: [
        // JavaScript/JSX
        {
            test: /.jsx?$/,
            exclude: /node_modules/,
            use: 'babel-loader'
        },
        // CSS
        {
            test: /.css$/,
            use: ['style-loader', 'css-loader']
        },
        // SASS/SCSS
        {
            test: /.s[ac]ss$/,
            use: ['style-loader', 'css-loader', 'sass-loader']
        },
        // Images
        {
            test: /.(png|jpg|jpeg|gif|svg)$/,
            type: 'asset/resource'
        },
        // Fonts
        {
            test: /.(woff|woff2|eot|ttf|otf)$/,
            type: 'asset/resource'
        }
    ]
}

4.2 Common Plugins

// Essential plugins
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const TerserPlugin = require('terser-webpack-plugin');

plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
        template: './src/index.html',
        minify: true
    }),
    new MiniCssExtractPlugin({
        filename: '[name].[contenthash].css'
    })
]