Real-world applications और best practices

Production-ready configuration

Production Webpack config को bundles minify करने चाहिए, debugging के लिए source maps enable करने चाहिए, vendor और application code अलग करने चाहिए, code splitting और caching के लिए contenthash का उपयोग करना चाहिए, performance budgets सेट करने चाहिए, और CI में builds validate करने चाहिए।

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 क्या बनाता है?

• सबसे बड़े bundle size का उपयोग करना।
• Minification, sourcemaps, caching, code splitting।
• सभी optimizations को disable करना।
• Hard-coded absolute paths और बिना hashing।

अंतिम क्विज़ 1/8

अंतिम क्विज़

त्वरित जाँच: Dependency graph बनाना Webpack कहाँ से शुरू करे, यह कौन-सा option बताता है?

• output
• entry
• resolve
• devtool

अंतिम क्विज़ 2/8

अंतिम क्विज़

त्वरित जाँच: Rule के use array में CSS को सही तरह process करने वाला loader order कौन-सा है?

• ['css-loader', 'style-loader']
• ['style-loader', 'css-loader']
• ['css-loader'] only
• ['babel-loader', 'style-loader']

अंतिम क्विज़ 3/8

अंतिम क्विज़

त्वरित जाँच: Loader और plugin में मुख्य अंतर क्या है?

• Loaders hook into the whole build lifecycle; plugins transform single files.
• Loaders transform individual files; plugins hook into the build lifecycle.
• Plugins run only in development.
• There is no difference.

अंतिम क्विज़ 4/8

अंतिम क्विज़

त्वरित जाँच: Production bundle से unused exports कौन-सी technique हटाती है?

• Tree-shaking
• Hot module replacement
• Source mapping
• Aliasing

अंतिम क्विज़ 5/8

अंतिम क्विज़

त्वरित जाँच: भारी module को केवल तब कैसे load करें जब user को उसकी जरूरत हो?

• Use a dynamic import()
• Use a static import at the top
• Set mode to development
• Rename the entry file

अंतिम क्विज़ 6/8

अंतिम क्विज़

त्वरित जाँच: Output filenames में [contenthash] क्यों उपयोग करें?

• It encrypts the bundle.
• It changes only when content changes, enabling long-term caching.
• It speeds up the dev server.
• It enables source maps.

अंतिम क्विज़ 7/8

अंतिम क्विज़

त्वरित जाँच: webpack-dev-server में HMR क्या करता है?

• Minifies code on save.
• Replaces changed modules without a full page reload.
• Uploads source maps to production.
• Splits vendor chunks.

अंतिम क्विज़ 8/8

अंतिम क्विज़

त्वरित जाँच: Bundle बड़ा होने का कारण खोजने में कौन-सा tool मदद करता है?

• webpack-bundle-analyzer
• html-webpack-plugin
• css-loader
• fork-ts-checker-webpack-plugin