Webpack Advanced Config: Multiple Entry Points Quiz Quiz

Challenge your understanding of advanced Webpack configuration focusing on multiple entry points, their benefits, and related output patterns. Assess your skills in optimizing complex asset pipelines and managing separate bundles effectively.

1. Defining Multiple Entry Points

   Which of the following is the correct format to define multiple entry points in a Webpack configuration file for 'main' and 'admin' JavaScript files?

   1. entryPoints: ['./src/main.js', './src/admin.js']
   2. entries: { main: './src/main.js', admin: './src/admin.js' }
   3. entry: ['./src/main.js', './src/admin.js']
   4. entry: { main: './src/main.js', admin: './src/admin.js' }

   Explanation: The correct format is to provide an object with named keys for each entry point, which creates separate bundles for each. The array format is used for single entry points with multiple files, not named entries. 'entries' and 'entryPoints' are incorrect property names and are not recognized in the configuration. Only the object syntax with the correct property name works as intended.

2. Output Filename Patterns with Multiple Entries

   If you want each output bundle to be named according to its entry point, which webpack output property value should you use?

   1. filename: '[name].js'
   2. filename: 'bundle.js'
   3. filename: 'main-[hash].js'
   4. filename: '[entry].js'

   Explanation: [name] is a placeholder that will be replaced with the name of each entry point, resulting in file names like main.js and admin.js. 'bundle.js' would output all bundles with the same filename, causing conflicts. '[entry].js' is not a valid placeholder in this context. 'main-[hash].js' hardcodes the name 'main' and would not reflect other entry points.

3. Shared Code with Multiple Entry Points

   How can you extract shared modules used by 'main' and 'admin' entry points into a separate chunk automatically?

   1. Set 'mode' to 'development'
   2. Use the 'splitChunks' optimization property
   3. Enable the 'devtool' property
   4. Rename both entry points to the same value

   Explanation: The 'splitChunks' property is designed to analyze chunks and extract common modules into separate files to optimize loading. Setting the mode to 'development' affects build optimizations, but not specifically chunk splitting. Renaming entry points merges code rather than splitting shared modules. The 'devtool' property only manages source map generation and does not impact chunking.

4. Entry Points and HTML Integration

   When configuring multiple entry points, what challenge might you face when generating HTML files that load the correct bundles?

   1. Ensuring each HTML file includes only the scripts from its relevant entry point
   2. Disabling source maps for individual entries
   3. Enabling tree shaking for CSS files
   4. Bundling images automatically

   Explanation: With multiple entry points, each resulting HTML file must load the correct set of scripts, requiring attention to include only relevant bundles. Bundling images is unrelated to entry points and handled separately. Disabling source maps can be configured globally but is less about multiple entries. Tree shaking for CSS files is managed by different mechanisms and not directly impacted by entry configuration.

5. Hot Module Replacement and Multiple Entries

   What is a potential complication when enabling Hot Module Replacement (HMR) in a project with multiple JavaScript entry points?

   1. Enforcing strict mode automatically
   2. Managing module updates for each entry point separately
   3. Losing minification support in production
   4. Requiring CSS to be bundled into HTML

   Explanation: HMR updates modules in place, and when multiple entry points exist, ensuring each entry receives the correct updates adds complexity. Minification is a production build concern, not directly tied to HMR. Strict mode is controlled by the code, not by HMR settings. Bundling CSS into HTML is a separate asset management decision unrelated to Hot Module Replacement.