Learn Webpack

A collection of simple Webpack examples:

• 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.