Learn Webpack
Tags: webdev, tutorial, javascript, webpack
Published: 2022-09-27 17:39:44

---
title: Learn Webpack
published: true
description: A collection of simple examples to explain how to configure Webpack
tags: webdev, tutorial, javascript, webpack
---

A collection of notes and examples I've taken while learning how to use [Webpack](https://webpack.js.org/):

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