Front-End Build Tools

Chapter 2: Webpack Fundamentals

2.1 Webpack Basics

Webpack is a module bundler that processes JavaScript and other assets.

Core Concepts:

• Entry: Starting point of the application
• Output: Where bundled files are saved
• Loaders: Transform files (e.g., JSX to JS, SASS to CSS)
• Plugins: Perform tasks like minification, HTML generation
• Mode: Development or production optimization

// Basic webpack.config.js
module.exports = {
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    },
    module: {
        rules: [
            {
                test: /.js$/,
                exclude: /node_modules/,
                use: 'babel-loader'
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html'
        })
    ]
};

2.2 Entry Points

// Single entry
entry: './src/index.js'

// Multiple entries
entry: {
    main: './src/index.js',
    vendor: './src/vendor.js'
}

// Dynamic entries
entry: () => './src/index.js'

2.3 Output Configuration

output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].[contenthash].js',
    clean: true, // Clean output directory
    publicPath: '/'
}