DEV Community

Luca
Luca

Posted on

Learn Webpack

A collection of notes and examples I've taken while learning how to use Webpack:

  • Mode: Enable webpack built-in optimizations for development and production.
  • Multiple Configurations: Use --env flag to create different config based on the environment.
  • Bundle: Merge multiple javascripts files.
  • Separate Runtime: Extract webpack runtime logic in a separate file.
  • Tree Shaking: Remove unused javascript codes from the app.
  • Chunks Types: Explain what a webpack chunk is.
  • Dynamic Import: Use import() to load part of an app on demand.
  • Code Splitting: Divide an app into smaller files.
  • Loaders and Plugins: Explain what webpack loaders and plugins are.
  • Asset Modules: Import additional type of assets without configuring loaders.
  • Babel: Use babel-loader to transpile ES2015 code into into a backwards compatible version of javascript.
  • Babel Polyfill: Apply pollyfills to provide a backwards compatible version of a javascript feature.
  • Html Plugin Template: Generate html files with html-webpack-plugin.
  • Load CSS: Use css-loader and style-loader to parse stylesheets and place them into html page.
  • Source Maps: Emit javascript and css source maps.
  • Public Path: Specify a base path for all the assets within your applicaion.
  • Separate CSS: Use mini-css-extract-plugin to extract stylesheets into a separate file.
  • Remove Unused CSS: Use purgecss to remove unused part of stylesheets.
  • Load Images: Use asset/resource to parse and emit images and asset/source to parse raw svg files.
  • SASS: Load sass files with sass-loader.
  • PostCSS: Enable postcss with postcss-loader.
  • Minify: Enable code minification by using mode.production, css-minimizer-webpack-plugin and HtmlWebpackPlugin.minify.
  • Caching: Setup client level caching by adding hash to filenames.
  • Context Module: Run require.context() at compile time to import assets.
  • Debug Webpack: Debug webpack configuration using nodejs --inspect tool.
  • Lazy Load Image: Dynamically import an image with import().
  • Lazy Load Multiple Images: Use require.context() to include all images from a folder and dynamically load them with import().
  • Lazy Load Multiple Images Folders: Dynamically import images inside multiple folders when a button is clicked.
  • Composing Configurations: Organize webpack configs in separate files and merge them with webpack-merge.
  • Static Site Generator: Create a simple SSG on top of HtmlWebpackPlugin.

Top comments (2)

Collapse
 
webdiscus profile image
webdiscus

in 2023 there is new html-bundler-webpack-plugin allow to use an HTML template as an entry point and specify source styles and scripts directly in HTML.

This plugin is very powerful and replace functionality of many plugins and loaders:

  • html-webpack-plugin
  • mini-css-extract-plugin
  • html-loader
  • style-loader
Collapse
 
pldg profile image
Luca

Seems cool, thanks