Front-End Build Tools

Chapter 10: Development vs Production Builds

10.1 Build Modes

Different build configurations optimize for development speed or production performance.

// Development build
// - Fast compilation
// - Source maps for debugging
// - Hot module replacement
// - No minification

// webpack.dev.js
module.exports = {
    mode: 'development',
    devtool: 'eval-source-map',
    devServer: {
        hot: true,
        open: true
    }
};

// Production build
// - Minification
// - Tree shaking
// - Code splitting
// - Optimized assets

// webpack.prod.js
module.exports = {
    mode: 'production',
    devtool: 'source-map',
    optimization: {
        minimize: true,
        usedExports: true
    }
};