ES module import and export syntax and the role of bundlers like Webpack and Vite in a modern JavaScript project.
29 cards · basic cards · AI-written, checked twice. Edit anything.
- What does the 'export' keyword do in a JavaScript module?
- Makes a value (variable, function, or class) available to other modules that import it
- How do you export a single value as the default export from a module?
- Use 'export default' followed by the value
- What is the syntax for importing a default export from a module?
- import name from "module-path"
- How do you import a named export from a module?
- import { name } from "module-path"
- What is the difference between default and named exports?
- A module can have only one default export but can have multiple named exports
- How do you import all exports from a module into a namespace object?
- import * as name from "module-path"
- What is a bundler and why is it used in modern JavaScript projects?
- A tool that combines multiple modules into one or more optimized files for deployment
- What is Webpack?
- A popular bundler that takes modules with dependencies and generates static assets
- What is Vite?
- A fast frontend build tool that uses native ES modules and optimized bundling for production
- How does a bundler handle module dependencies?
- It resolves import statements, finds the required modules, and includes them in the output
- What is code splitting and why is it important?
- Dividing code into chunks that load on demand, improving initial load performance
- What is tree shaking in the context of bundlers?
- Removing unused code from the bundle to reduce file size
- What file is used to configure how Webpack bundles a project?
- webpack.config.js
- What is the purpose of a webpack.config.js file?
- Define entry points, output paths, loaders, plugins, and other bundling settings
- What is the difference between development and production modes in bundlers?
- Development prioritizes fast rebuilds and debugging; production optimizes for size and performance