Real-world applications और best practices

Production-ready configuration

Production Webpack configs को: bundles को minify करना, sourcemaps enable करना, vendor और application code को separate करना, code splitting implement करना, caching के लिए contenthash का उपयोग करना चाहिए।

Production configuration template

एक comprehensive production-ready Webpack configuration।

const HtmlPlugin = require('html-webpack-plugin');
const TerserPlugin = require('terser-webpack-plugin');
const path = require('path');

module.exports = {
  mode: 'production',
  entry: './src/index.js',
  output: {
    path: path.join(__dirname, 'dist'),
    filename: '[name].[contenthash].js',
    clean: true
  },
  optimization: {
    minimize: true,
    minimizer: [new TerserPlugin()],
    runtimeChunk: 'single',
    splitChunks: {
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendors',
          priority: 10
        }
      }
    }
  },
  plugins: [
    new HtmlPlugin({ template: './src/index.html' })
  ]
};

Output:

Ready for production deployment with optimal caching and performance

Continuous improvement

Production में bundle sizes, build times, runtime performance को monitor करें। Performance budgets set करें। Dependencies को regularly audit करें। Team members के लिए configuration को document करें।

Complete project setup

Production deployment के लिए तैयार एक fully configured project देखें।

npm init -y
npm install --save-dev webpack webpack-cli webpack-dev-server
npm install --save-dev html-webpack-plugin mini-css-extract-plugin
npm install --save-dev babel-loader @babel/core @babel/preset-env
npm run build
# Result: optimized bundles in dist/ with cache-busting hashes

Output:

asset main.[contenthash].js 45.2 KiB [compared for emit]
asset vendors.[contenthash].js 12.1 KiB
asset index.html 0.5 KiB

त्वरित जाँच

त्वरित जाँच: एक configuration को production-ready क्या बनाता है?

• Minification, sourcemaps, caching, code splitting।
• सबसे बड़े bundle size का उपयोग करना।
• सभी optimizations को disable करना।