Webpack is good fit for a complex front-end application with non-code static assets like style sheets, images etc.
Webpack is not recommended for small web applications.
Based on the dependency, Webpack creates a dependency graph so as to give a modular approach to the web applications.
Code Splitting (detailed later in the course) is an exciting feature that keeps Webpack distinct from all other module bundlers.
Webpack goals are not limited to
1. Spliting the dependency tree into chunks loaded on demand
2. Reducing initial load time
3. Every static asset should be able to be a module
4. Integrating Third party libraries as modules
5. Ensuring each part of the module is customizable
6. Webpack is very much suitable for large projects
Webpack includes four core concepts
3. Module loaders
Entry: The starting point of a dependency graph is called an Entry point, it tells webpack where to start bundling.
Output : It tells the Webpack where to bundle the modules of the application and how to treat a bundled code.
Loaders: Loaders are like tasks in other build tools, and provide a powerful way to handle frontend build steps.
Plugins : Plugins are the backbone of Webpack as it fully exposes the potential of webpack. Plugins are additional node modules that usually work on the resulting bundle.
There is wide variety of loaders available which includes: - conversion on ES6 code to ES5 code using babel. - scss loader which converts SASS code to css.
In Webpack, the developers are not confined to the predefined build callbacks. They can use customized build callbacks using plugins.
Plugins are the backbone of Webpack as it fully exposes the potential of webpack.
Plugins are additional node modules that usually work on the resulting bundle.
HtmlWebpackPlugin simplifies the creation of HTML files to serve Webpack bundles.
ExtractTextWebpackPlugin moves all CSS modules in entry chunks into a separate CSS file. So that the styles are no longer inlined into the JS bundle, but are saved in a separate CSS file (styles.css).