What is Webpack?
Why to use Webpack?
Core Concepts of Webpack
To get started you only need to understand the following Core Concepts:
The entry point in Webpack serves as the starting point for constructing its internal dependency graph. It guides Webpack in determining the modules and libraries that the specified entry module relies on, both directly and indirectly. While the default entry point is typically set to
./src/index.js, developers have the flexibility to designate an alternative or multiple entry points by configuring the
entry property within the webpack configuration.
output property in webpack directs the bundling tool on where to place the generated bundles and how to name these files. By default, it assigns
./dist/main.js for the primary output file and utilises the
./dist folder for any additional generated files. This behaviour can be customised to meet specific requirements by defining an "output" field within your webpack configuration.
Loaders serve as transformations applied to a module's source code, allowing preprocessing of files during import or loading. Comparable to
mode configuration option in Webpack, set to either '
production, tailors the build process, optimising for features like enhanced debugging and faster builds in development, and code minification and performance improvements for production.
Having delved into the core concepts of webpack, let's now explore the transformative capabilities of code splitting and lazy loading. These advanced features open doors to dynamic performance enhancements, allowing your application to load and prioritise resources intelligently, resulting in a faster and more efficient user experience.
Webpack's code splitting, a standout feature, enables the division of code into distinct bundles that can be loaded on demand or concurrently. This functionality not only facilitates the creation of smaller bundles but also provides control over the prioritisation of resource loading, offering a significant potential impact on overall load times when implemented effectively.