Skip to main content

Webpack

  1. what is webpack?
  • webpack is a module bundler for modern JavaScript applications.
  • When webpack processes your application, it internally builds a dependency graph which maps every module your project needs and generates one or more bundles.
  • webpack can be configured to use a specific configuration file named webpack.config.js or webpackfile.js.
  1. webpack core concepts

  • Entry
    Entry point indicates which module webpack should use to begin building out its internal dependency graph. webpack will figure out which other modules and libraries that entry point depends on (directly and indirectly). By default its value is ./src/index.js, but you can specify a different (or multiple entry points) by configuring the entry property in the webpack configuration.

  • Output
    The output property tells webpack where to emit the bundles it creates and how to name these files. It defaults to ./dist/main.js for the main output file and to the ./dist folder for any other generated file.

  • Loaders
    Out of the box, webpack only understands JavaScript and JSON files. Loaders allow webpack to process other types of files and convert them into valid modules that can be consumed by your application and added to the dependency graph.

  • Plugins
    While loaders are used to transform certain types of modules, plugins can be leveraged to perform a wider range of tasks like bundle optimization, asset management and injection of environment variables.

 Plugins in Webpack can play a significant role in optimizing the bundle generated by the bundler. They provide various ways to improve the performance, reduce the size of the bundle, and enhance the overall efficiency of your web application. Here are some common ways plugins can optimize a bundle:

1. Minification: Minification plugins, such as UglifyJSPlugin, TerserPlugin, or OptimizeCSSAssetsPlugin, can be used to minimize the size of JavaScript and CSS files in the bundle by removing whitespace, comments, and renaming variables to shorter names.

2. Code Splitting: Plugins like SplitChunksPlugin help with code splitting, allowing you to split your bundle into smaller chunks. This can lead to faster initial loading times and improved caching.

3. Tree Shaking: Tree shaking is a technique used to eliminate unused code from the bundle. The DefinePlugin and UglifyJSPlugin can help remove dead code paths from your JavaScript files.

4. Compression: Compression plugins, such as CompressionWebpackPlugin, can compress assets in the bundle (e.g., Gzip or Brotli) to reduce the amount of data transferred over the network, resulting in faster page loading times.

5. HTML Generation: HTMLWebpackPlugin allows you to generate HTML files dynamically, inject script tags for your bundles, and optimize the final HTML output by minifying it.

6. Caching: HashedModuleIdsPlugin generates unique hashes for modules to ensure cache consistency between builds. This is crucial for long-term caching strategies to take advantage of browser caching.

7. Vendor Bundle Optimization: Some plugins assist in creating separate vendor bundles for third-party libraries. This helps prevent frequently changing application code from invalidating cached vendor bundles.

8. Resource Inlining: Inline assets like small images or fonts directly into your HTML or CSS to reduce the number of network requests. Plugins like url-loader or file-loader help with this.

9. Image Optimization: ImageMinimizerWebpackPlugin can optimize and compress images during the build process, reducing image file sizes.

10. Removing Unused CSS: PurgeCSSPlugin can identify and remove unused CSS classes from your stylesheets, reducing the size of CSS files.

11. Critical CSS: CriticalCSSPlugin can generate critical CSS for above-the-fold content, improving perceived loading performance.

12. Preloading/Prefetching: Use plugins like PreloadWebpackPlugin to add preload or prefetch tags to assets, allowing the browser to start downloading important resources earlier.

13. Bundle Analysis: Plugins like Webpack Bundle Analyzer provide insights into the size and composition of your bundles, helping you identify optimization opportunities.

14. Service Worker Generation: WorkboxWebpackPlugin helps you generate service workers for progressive web apps (PWAs), improving offline capabilities and performance.

15. Dynamic Imports: Plugins like babel-plugin-dynamic-import-node allow server-side rendering (SSR) frameworks to support dynamic imports efficiently.

  • Mode
    By setting the mode parameter to either development, production or none, you can enable webpack's built-in optimizations that correspond to each environment. The default value is production.

  • Browser Compatibility webpack supports all browsers that are ES5-compliant (IE8 and below are not supported). webpack needs Promise for import() and require.ensure(). If you want to support older browsers, you will need to load a polyfill before using these expressions.

  1. webpack configuration

  • webpack configuration is a JavaScript object that contains properties that define how webpack should behave.

  • webpack configuration can be written in ES5 or ES6 syntax. However, webpack 2+ only supports configuration in the form of an ES5-compliant CommonJS module.

  • webpack configuration can be written in TypeScript, but you will need to install additional dependencies.

  • webpack configuration can be written in JSON format, but you will need to install additional dependencies.

  • webpack configuration can be written in YAML format, but you will need to install additional dependencies.

  1. webpack CLI
  • webpack CLI provides a set of tools to improve the setup of custom webpack configuration.
  1. babel-loader
  • babel-loader is the webpack loader responsible for taking in the ES6 code and making it understandable by the browser of choice of the user.