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
andstyle-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 andasset/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
andHtmlWebpackPlugin.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 withimport()
. - 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)
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:
Seems cool, thanks