Basic Webpack Interview Questions (Freshers & 1-3 Years Experience)
1. What is Webpack and why is it used?
Webpack is a module bundler that takes JavaScript files connected with dependencies and generates static assets like optimized bundles for browsers. It processes JavaScript, CSS, images, and fonts into bundles, enabling stable production deploys and code splitting[1][3].
2. What are the main sections in a webpack.config.js file?
The primary sections are entry, output, and module. Entry specifies starting points, output defines bundle location, and module configures loaders for different file types[1].
3. What does the ‘entry’ property do in Webpack configuration?
The entry property specifies the entry point(s) of the application, like src/index.js. Webpack starts building the dependency graph from these points[1][3].
4. What is the purpose of the ‘output’ configuration in Webpack?
The output section defines where bundles are saved, including path (directory) and filename (bundle name). It controls how bundled files are named and located[1].
5. How do you install Webpack and Webpack CLI for a new project?
Run yarn add -D webpack webpack-cli or npm install -D webpack webpack-cli. This installs Webpack as a development dependency with its command-line interface[1].
6. What are loaders in Webpack?
Loaders transform different module types (CSS, images, Sass) into JavaScript modules. They process files before bundling, like converting Sass to CSS or images to base64[1][5].
7. Name some important Webpack loaders.
Key loaders include css-loader, style-loader, babel-loader, file-loader, url-loader, and sass-loader for handling various assets[5].
8. What is HtmlWebpackPlugin used for?
HtmlWebpackPlugin simplifies HTML file creation to serve Webpack bundles automatically. It generates HTML with correct script tags pointing to bundled files[3].
9. How does Webpack process static assets like images?
Webpack uses require() or import for static assets. Loaders like file-loader or url-loader process images into modules[3].
<img src={require('../../assets/logo.png')} />10. What modules design patterns does Webpack support?
Webpack supports CommonJS, AMD, and ES6 modules out of the box since Webpack 2[5].
Intermediate Webpack Interview Questions (1-3 & 3-6 Years Experience)
11. How do you set up webpack-dev-server?
Install webpack-dev-server, then configure devServer in webpack.config.js with options like port, hot for HMR, and static for serving files[1].
12. What is the order of loader execution in Webpack rules?
Loaders execute from right to left in the rules array. For example, in Sass processing: postcss-loader → sass-loader → css-loader[5].
{
test: /\.scss$/,
use: ['style-loader', 'css-loader', 'postcss-loader', 'sass-loader']
}13. Can loaders work asynchronously in Webpack?
Yes, loaders can work both synchronously and asynchronously. Async loaders use a callback to return transformed results[5].
14. How do you create multiple configurations for development and production?
Create separate files like webpack.config.dev.js and webpack.config.prod.js. Production includes minification and optimization, while dev includes source maps[1].
15. What are the different target environments in Webpack?
Targets include web (browsers), node (Node.js), electron-main, electron-renderer, webworker, and async-node[1].
16. What is code splitting in Webpack?
Code splitting breaks applications into smaller chunks loaded on demand. It reduces initial bundle size and improves load times using dynamic imports[1].
17. How do you implement dynamic imports for code splitting?
Use import() syntax for components not needed immediately. Webpack creates separate chunks automatically[1].
const LazyComponent = () => import('./LazyComponent.js');18. What Webpack CLI flags are useful for builds?
Useful flags include –progress, –profile, –parallel, –watch, and –cached for monitoring and optimizing builds[4].
19. How do you chain multiple loaders in a single rule?
Yes, multiple loaders chain in the use array. Each loader processes the file sequentially from last to first[5].
20. What is ExtractTextWebpackPlugin used for?
ExtractTextWebpackPlugin extracts CSS from bundles into separate files, preventing inline styles in JavaScript bundles[3].
Advanced Webpack Interview Questions (3-6+ Years Experience)
21. How do you optimize Webpack bundle performance at Zoho?
At Zoho, implement code splitting, vendor chunk splitting, minification, and source maps. Set performance budgets and use tree shaking for dead code elimination[1][2].
22. Explain Webpack runtime and manifest.
The runtime is code that handles module loading and chunk fetching. The manifest maps entry points to chunks for dynamic loading[5].
23. Can you use languages other than JavaScript for webpack.config?
Yes, Webpack supports TypeScript, CoffeeScript, Babel, and JSX for configuration files through specific loaders[5].
24. How would you handle large vendor libraries like those used at Salesforce?
Split vendor libraries into separate chunks using splitChunks optimization. This caches shared dependencies across page navigations[1].
25. What is dead asset elimination in Webpack?
Dead asset elimination removes unused assets from builds. Webpack identifies and excludes referenced-but-unused files[3].
26. How do you configure source maps for debugging at Paytm?
At Paytm, use devtool: 'source-map' for production debugging or 'eval-source-map' for development. Source maps trace errors to original code[2].
27. What is the benefit of asset control in Webpack?
Asset control lets you process images differently based on size (base64 for small, URLs for large) and manage CSS/SCSS imports seamlessly[3].
28. How do you set up CompressionWebpackPlugin for Oracle deployments?
For Oracle deployments, use CompressionWebpackPlugin to generate gzipped/brotli versions of assets with Content-Encoding headers[3].
29. Explain how Webpack builds the dependency graph.
Webpack starts from entry points, recursively follows import/require statements, builds a dependency graph, then bundles into optimized chunks[3].
30. For a Swiggy-like application, how would you reduce Time to Interactive (TTI)?
Use dynamic imports for route-based code splitting, vendor splitting, and lazy loading. Configure Webpack to create minimal initial chunks with critical path only[1].
