webpack

webpack is a module bundler. Starting from one or more entry files, it follows every import or require, builds a dependency graph and writes out bundles the browser can load. Loaders let it process other file types such as CSS, images and TypeScript, and plugins extend the build.

Why it matters

For years webpack was the default way to ship modern front-end code. It enables code splitting, so users download only the JavaScript a route needs, plus minification, tree shaking and content-hashed filenames for long-term caching. Many frameworks used it internally. Newer tools such as Vite start faster in development, but large existing projects still depend on webpack.

Example

// webpack.config.js
module.exports = {
  entry: './src/index.js',
  output: { filename: '[name].[contenthash].js' },
  module: {
    rules: [{ test: /\.css$/, use: ['style-loader', 'css-loader'] }],
  },
};

The hash in the filename changes only when the content changes, so browsers can cache bundles for a long time.

Common mistakes

• Shipping one giant bundle instead of splitting by route.
• Leaving development mode and source maps on in production.
• Configuring loaders in the wrong order; they run from last to first.

Related

• Bundler
• Tree shaking
• Minification
• Vite

यह पेज सामान्य जानकारी है, जिसे हमारी संपादकीय टीम ने लिखा है और दस्तावेज़ीकरण बदलने पर अपडेट किया जाता है। सर्वर और प्रदाता अलग-अलग होते हैं, इसलिए बदलाव पहले सुरक्षित तरीके से जाँचें। देखें: संपादकीय नीति और अस्वीकरण.