К содержанию

Webpack 5 Tutorial

A clear tutorial on the Webpack bundler with theory and tasks for beginners.

Main

How Webpack Works

Problem with cache in browsers

Webpack via ES modules in Webpack

Installing Webpack

Initial Webpack Bundle Setup

Setting up Webpack build run

Test build via Webpack

Connecting a bundle to a layout in Webpack

Importing Files into Webpack Entry Point

Absolute Paths in Webpack

Plugins in Webpack

Loaders in Webpack

Assembly modes

Types of Build Modes in Webpack

Changing the build mode in the configuration file in Webpack

Build modes via scripts in Webpack

Automatic build in Webpack

Entry-exit points

Webpack Entry and Exit Points

Webpack Exit Point

Multiple Entry Points in Webpack

Hash in a build file in Webpack

Webpack Entry Point Names

Named Dot Arrays in Webpack

Webpack Build File Names

Webpack Build File Names and Hash

Path to build folder in Webpack

Webpack Entry Points Context

Styles

Importing CSS Styles into Webpack

Loaders for CSS styles in Webpack

Setting up CSS style import in Webpack

Testing CSS imports in Webpack

Setting up CSS bundling in Webpack

Testing CSS Bundle Assembly in Webpack

CSS Bundle File Name in Webpack

CSS Bundle Hash in Webpack

Multiple CSS Bundles in Webpack

Including CSS libraries in Webpack

Working with LESS in Webpack

Working with SASS in Webpack

HTML

Working with HTML Layouts in Webpack

Generating HTML Layout in Webpack

Multiple Script Bundles in a Layout in Webpack

Script Bundles with Hash in Layout in Webpack

Bundles of styles in a layout in Webpack

Multiple style bundles in a layout in Webpack

Custom Layout File in Webpack

Assets

Assets in Webpack

Assets in JavaScript bundles in Webpack

Assets in CSS Bundles in Webpack

Customizing Asset File Paths in Webpack

Customizing the Asset Group Path in Webpack

Inline Assets in Webpack

Source assets in webpack

Shared Assets in Webpack

Plugins

Cleaning up the build folder in Webpack

Copying Files into Webpack