Download OpenJS Foundation webpack Practice Exam and more Exams Technology in PDF only on Docsity!
Question 1. Which property in a webpack configuration defines the entry file(s) for the dependency graph? A) output B) entry C) resolve D) mode Answer: B Explanation: The entry property tells webpack where to start building the internal dependency graph; it can be a string, array, or object for multiple entry points. Question 2. In a multi-page application, how can you configure separate bundles for each HTML page? A) Use a single entry point with code splitting B) Define multiple entry points in the entry object and use HtmlWebpackPlugin for each page C) Set target: "web" D) Enable devServer.hot Answer: B Explanation: By providing an object with multiple entry points and instantiating HtmlWebpackPlugin per page, webpack creates distinct bundles linked to each HTML file. Question 3. Which option correctly sets the output directory to dist and enables cleaning of that folder before each build? A) output: { path: path.resolve(__dirname, "dist"), clean: true } B) output: { filename: "bundle.js", clean: true } C) output: { path: "./dist", clean: true } D) output: { path: path.resolve(__dirname, "dist") } Answer: A
Explanation: path must be an absolute path; clean: true tells webpack to remove old files from the output directory before emitting new assets. Question 4. Which loader would you use to import SCSS files and compile them to CSS? A) css-loader B) style-loader C) sass-loader D) file-loader Answer: C Explanation: sass-loader processes .scss files, converting Sass syntax to standard CSS; it is usually combined with css-loader and style-loader. Question 5. To load image assets and emit them as separate files with hashed filenames, which webpack 5 feature is most appropriate? A) url-loader B) file-loader C) asset/resource D) raw-loader Answer: C Explanation: In webpack 5, the asset/resource type replaces file-loader, automatically emitting a separate file with a content hash in the filename. Question 6. Which plugin is primarily responsible for extracting CSS into separate files in production builds? A) HtmlWebpackPlugin B) MiniCssExtractPlugin C) DefinePlugin
B) plugins: [new HotModuleReplacementPlugin()] only C) output: { hot: true } D) mode: "hot" Answer: A Explanation: Setting devServer.hot to true activates HMR; you can also add the plugin for older webpack versions, but the dev server flag is sufficient in webpack 5. Question 10. When you need to inject environment‑specific constants at build time, which plugin should you use? A) HtmlWebpackPlugin B) ProvidePlugin C) DefinePlugin D) BundleAnalyzerPlugin Answer: C Explanation: DefinePlugin replaces identifiers in the source code with compile‑time values, allowing you to embed environment variables like process.env.NODE_ENV. Question 11. Which of the following is the correct way to import a JSON file directly into a module? A) import data from "./data.json" B) require("./data.json") only works in Node.js, not webpack C) import "./data.json" without a variable D) JSON files cannot be imported; they need a loader Answer: A Explanation: Webpack includes a built‑in JSON loader, allowing you to import JSON files as modules using the standard import syntax.
Question 12. To automatically add vendor prefixes to CSS, which post‑processing tool should be integrated? A) autoprefixer via PostCSS B) sass-loader C) css-loader with modules: true D) style-loader Answer: A Explanation: autoprefixer is a PostCSS plugin that adds vendor prefixes based on browser support criteria defined in browserslist. Question 13. Which output.filename pattern ensures that each emitted JavaScript file receives a content‑based hash for long‑term caching? A) [name].js B) [name].[hash].js C) [name].[contenthash].js D) [name].[chunkhash].js Answer: C Explanation: [contenthash] changes only when the file content changes, making it ideal for cache busting in production. Question 14. What does the splitChunks optimization do by default? A) It bundles all node_modules into a single file called vendors.js B) It extracts common modules shared between entry points into separate chunks C) It disables code splitting entirely D) It only works with dynamic import() statements Answer: B
D) Use resolve.alias Answer: B Explanation: ProvidePlugin automatically loads modules when identifiers are used, effectively shimming legacy libraries that expect globals. Question 18. Which field in package.json signals to webpack that a package’s side effects are safe to prune during tree shaking? A) "main" B) "module" C) "sideEffects" D) "browser" Answer: C Explanation: Setting "sideEffects": false tells webpack that the package has no side effects, allowing dead‑code elimination for unused exports. Question 19. When building for Node.js, which target value should be used? A) "web" B) "node" C) "electron-main" D) "async-node" Answer: B Explanation: target: "node" configures webpack to emit code suitable for Node.js, using Node’s module system and leaving built‑in modules (e.g., fs) external. Question 20. Which plugin visualizes bundle composition and size distribution? A) HtmlWebpackPlugin B) BundleAnalyzerPlugin
C) DefinePlugin D) MiniCssExtractPlugin Answer: B Explanation: webpack-bundle-analyzer creates an interactive treemap showing the size of each module, helping developers identify optimization opportunities. Question 21. What is the primary purpose of module.rules in a webpack config? A) To define environment variables B) To specify how different file types are transformed using loaders C) To set the output directory D) To configure the dev server Answer: B Explanation: module.rules contains an array of objects that match file patterns and assign appropriate loaders for processing those files. Question 22. Which loader would you use to import raw text files (e.g., .txt) as a string? A) raw-loader B) file-loader C) json-loader D) csv-loader Answer: A Explanation: raw-loader returns the file content as a string, useful for importing plain text or shader code. Question 23. To support TypeScript in a webpack project, which combination of loader and configuration is required? A) ts-loader with resolve.extensions including .ts and .tsx
Question 26. How can you ensure that CSS imported in a JavaScript module is injected into the DOM during development? A) Use MiniCssExtractPlugin only B) Use style-loader together with css-loader C) Set output.inject to true D) Use HtmlWebpackPlugin Answer: B Explanation: style-loader injects CSS into <style> tags at runtime, while css-loader resolves @import and url() statements. Question 27. Which option in optimization controls the minimum size for a chunk to be generated by splitChunks? A) minSize B) minChunks C) maxAsyncRequests D) chunks Answer: A Explanation: splitChunks.minSize defines the smallest size (in bytes) a chunk must have before webpack creates a separate file for it. Question 28. When using DefinePlugin to replace process.env.NODE_ENV, which syntax must be used to keep the value as a string? A) new DefinePlugin({ "process.env.NODE_ENV": "production" }) B) new DefinePlugin({ "process.env.NODE_ENV": JSON.stringify("production") }) C) new DefinePlugin({ NODE_ENV: "production" }) D) new DefinePlugin({ NODE_ENV: JSON.stringify("production") }) Answer: B
Explanation: DefinePlugin performs a direct text substitution; wrapping the value with JSON.stringify ensures it is quoted in the emitted code. Question 29. Which loader enables importing CSV files as arrays of objects? A) csv-loader B) json-loader C) raw-loader D) file-loader Answer: A Explanation: csv-loader parses CSV content and returns a JavaScript array, optionally using headers as object keys. Question 30. What does the publicPath option control in the output configuration? A) The local filesystem path where assets are written B) The URL prefix used for loading assets at runtime C) The name of the generated bundle D) The environment variable for the build Answer: B Explanation: output.publicPath defines the base path for all assets referenced in the generated bundles, affecting how browsers request those files. Question 31. Which plugin is used to generate an index.html file that automatically includes all webpack bundles? A) HtmlWebpackPlugin B) CleanWebpackPlugin C) DefinePlugin D) CopyWebpackPlugin
C) target D) resolve.fallback Answer: A Explanation: Setting externals: { "fs": "commonjs fs" } (or using nodeExternals) tells webpack not to bundle Node built‑ins, leaving them to be required at runtime. Question 35. Which loader would you use to import SVG files as React components? A) file-loader B) url-loader C) @svgr/webpack D) raw-loader Answer: C Explanation: @svgr/webpack transforms SVG files into React components, allowing you to use <SvgIcon /> directly in JSX. Question 36. What does the cache option in webpack’s module configuration enable? A) Caching of compiled assets on the CDN B) In‑memory caching of loader results to speed up incremental builds C) Browser caching of the final bundle D) Caching of source maps Answer: B Explanation: Enabling cache: { type: "filesystem" } or the default in‑memory cache reduces the time spent re‑processing unchanged modules between builds. Question 37. Which of the following is the correct way to configure Babel with webpack to transpile modern JavaScript? A) module.rules: [{ test: /\.js$/, use: "babel-loader", exclude: /node_modules/ }]
B) module.rules: [{ test: /\.js$/, use: "ts-loader" }] C) module.rules: [{ test: /\.js$/, loader: "raw-loader" }] D) Babel does not need a loader in webpack Answer: A Explanation: babel-loader processes .js files, applying Babel presets and plugins; excluding node_modules prevents unnecessary transpilation. Question 38. Which optimization.minimizer entry replaces the default Terser plugin for JavaScript minification? A) new CssMinimizerPlugin() B) new TerserPlugin() C) new UglifyJsPlugin() D) new HtmlWebpackPlugin() Answer: B Explanation: Providing an instance of TerserPlugin in optimization.minimizer overrides the default JavaScript minifier, allowing custom options. Question 39. How can you configure webpack to output separate CSS files with content hashes? A) output: { filename: "[contenthash].css" } B) Use MiniCssExtractPlugin with filename: "[name].[contenthash].css" C) Set devtool: "css" D) Use style-loader with hash: true Answer: B Explanation: MiniCssExtractPlugin’s filename option allows naming CSS files with [contenthash] for cache busting.
Explanation: output.libraryTarget specifies the format (e.g., umd, commonjs2, var) that the generated bundle should expose for consumers. Question 43. To enable prefetching of a dynamically imported module, which magic comment should you add? A) /* webpackPrefetch: true */ B) /* webpackPreload: true */ C) /* webpackChunkName: "prefetch" */ D) /* webpackIgnore: true */ Answer: A Explanation: webpackPrefetch: true adds a <link rel="prefetch"> tag, hinting the browser to download the module in idle time. Question 44. Which loader allows you to import Markdown files and receive HTML strings? A) markdown-loader B) raw-loader C) html-loader D) file-loader Answer: A Explanation: markdown-loader parses .md files and converts them to HTML (or a string) that can be used in JavaScript. Question 45. In a production build, which devtool setting provides source maps without exposing original source code to end users? A) source-map B) hidden-source-map C) eval-source-map
D) nosources-source-map Answer: D Explanation: nosources-source-map generates a map that points to line numbers but omits the original source content, protecting the code while still supporting debugging. Question 46. Which configuration option tells webpack to treat .mjs files as ES modules even when type: "module" is not set in package.json? A) resolve.extensions: [".mjs", ".js"] B) module.rules: [{ test: /\.mjs$/, type: "javascript/auto" }] C) module.rules: [{ test: /\.mjs$/, type: "javascript/esm" }] D) No configuration needed; webpack handles .mjs automatically Answer: C Explanation: Setting type: "javascript/esm" forces webpack to parse .mjs files as ES modules, ensuring proper handling of import/export. Question 47. Which plugin can replace large moment.js locales with only the needed ones to reduce bundle size? A) MomentLocalesPlugin B) LocalePlugin C) IgnorePlugin D) NormalModuleReplacementPlugin Answer: C Explanation: IgnorePlugin can be used to ignore all locale files (/locale/) from moment.js, dramatically shrinking its footprint. Question 48. What does the experiments field enable in webpack 5? A) Experimental JavaScript features like top‑level await and WebAssembly
Question 51. Which output option should be set to true to make the generated bundle compatible with both CommonJS and AMD environments? A) libraryTarget: "umd" B) libraryExport: "default" C) globalObject: "this" D) library: "MyLib" Answer: A Explanation: libraryTarget: "umd" creates a Universal Module Definition bundle that works across CommonJS, AMD, and as a global variable. Question 52. When configuring devServer for client‑side routing (e.g., React Router), which option ensures that all 404 requests are served index.html? A) historyApiFallback: true B) fallback: "index.html" C) router: true D) spa: true Answer: A Explanation: historyApiFallback rewrites all unknown URLs to the specified HTML file, enabling client‑side routing to work correctly. Question 53. Which plugin can automatically generate a manifest.json that maps original asset names to their hashed filenames? A) ManifestPlugin (from webpack-manifest-plugin) B) HtmlWebpackPlugin C) CleanWebpackPlugin D) DefinePlugin Answer: A
Explanation: WebpackManifestPlugin creates a JSON manifest linking source filenames to the emitted hashed filenames, useful for server‑side rendering. Question 54. To limit the maximum size of an emitted JavaScript chunk, which splitChunks option should be configured? A) maxSize B) maxInitialRequests C) minChunks D) automaticNameDelimiter Answer: A Explanation: splitChunks.maxSize tells webpack to try to split chunks so that none exceeds the specified byte size. Question 55. Which resolve option allows you to alias a module name to a different path? A) alias B) fallback C) extensions D) modules Answer: A Explanation: resolve.alias maps a request (e.g., react) to a custom path, enabling easier imports or swapping implementations. Question 56. When using ModuleFederationPlugin, which property declares which modules this build will expose to others? A) exposes B) remotes C) shared
