# ruanyf/webpack-demos **Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/ruanyf-webpack-demos).** 9,571 stars · 2,223 forks · JavaScript ## Links - GitHub: https://github.com/ruanyf/webpack-demos - awesome-repositories: https://awesome-repositories.com/repository/ruanyf-webpack-demos.md ## Description This repository is a collection of Webpack configuration examples and JavaScript module bundler demonstrations. It provides asset pipeline tutorials and frontend build tool examples focused on resolving dependencies and merging multiple modules into optimized browser files. The project demonstrates how to configure Webpack for transforming JavaScript assets, including the use of loaders and plugins to process JSX, CSS, and images into browser-ready formats. It includes practical examples of code splitting, minification, and environment variable injection. The covered capabilities include frontend asset bundling and performance optimization, such as extracting shared dependencies and splitting code into chunks. It also covers modular CSS management and the configuration of multiple entry points for multi-page application builds. ## Tags ### Development Tools & Productivity - [Frontend Build Tools](https://awesome-repositories.com/f/development-tools-productivity/build-tooling/build-orchestration-logic/build-orchestration-configuration/build-automation-systems/frontend-build-tools.md) — Serves as a comprehensive collection of examples for tools that compile, bundle, and optimize web assets. - [Dependency Graph Bundlers](https://awesome-repositories.com/f/development-tools-productivity/dependency-graph-bundlers.md) — Provides examples of using a bundler to analyze import statements and merge modules into optimized browser-ready files. - [Asset Bundling](https://awesome-repositories.com/f/development-tools-productivity/build-tooling/build-performance-optimization/build-optimization-tools/bundle-optimizers/asset-bundling.md) — Resolves dependencies from entry files to produce optimized production bundles for browser use. ([source](https://github.com/ruanyf/webpack-demos/blob/master/README.md)) - [Asset Transformation Pipelines](https://awesome-repositories.com/f/development-tools-productivity/asset-transformation-pipelines.md) — Features tutorials on building modular pipelines that convert diverse web resources into browser-ready formats. - [Code Minifiers](https://awesome-repositories.com/f/development-tools-productivity/build-tooling/asset-file-management/asset-processing-pipelines/asset-transformation-pipelines/code-minifiers.md) — Reduces the size of generated files by removing unnecessary characters and optimizing identifiers. ([source](https://github.com/ruanyf/webpack-demos#readme)) - [Multi-Page Application Builders](https://awesome-repositories.com/f/development-tools-productivity/build-tooling/build-orchestration-logic/build-orchestration-configuration/build-automation-systems/build-tools/module-bundlers/multi-page-application-builders.md) — Provides configurations for mapping multiple entry points to generate separate asset bundles for multi-page sites. - [Bundler Entry Points](https://awesome-repositories.com/f/development-tools-productivity/bundler-entry-points.md) — Shows how to configure starting files to generate separate bundles for multi-page application structures. - [Bundle External Exclusions](https://awesome-repositories.com/f/development-tools-productivity/dependency-bundling/bundle-external-exclusions.md) — Demonstrates how to treat specific libraries as external global variables to prevent them from being bundled. ([source](https://github.com/ruanyf/webpack-demos#readme)) - [External Module Declarations](https://awesome-repositories.com/f/development-tools-productivity/external-module-declarations.md) — Marks modules as externals to prevent bundling and allow access via shared global variables at runtime. ([source](https://github.com/ruanyf/webpack-demos/blob/master/README.md)) ### Education & Learning Resources - [Build Tool Configurations](https://awesome-repositories.com/f/education-learning-resources/development-examples/build-tool-configurations.md) — Offers a collection of practical configuration templates and demonstrations for Webpack bundling. ### Programming Languages & Runtimes - [JavaScript Module Bundlers](https://awesome-repositories.com/f/programming-languages-runtimes/javascript-module-bundlers.md) — Provides a collection of examples for resolving and combining multiple JavaScript files into a single output file. ([source](https://github.com/ruanyf/webpack-demos#readme)) - [JavaScript Transpilation](https://awesome-repositories.com/f/programming-languages-runtimes/language-features-paradigms/javascript-language-features/transpilers/javascript-transpilation.md) — Implements transformations of modern ES6 and JSX syntax into browser-compatible JavaScript. ### Web Development - [Asset Transformation Pipelines](https://awesome-repositories.com/f/web-development/asset-transformation-pipelines.md) — Demonstrates the use of custom loaders to interpret and convert various file types into web-ready formats. - [Code Splitting](https://awesome-repositories.com/f/web-development/dynamic-loading-strategies/code-splitting.md) — Demonstrates how to divide the final output into smaller separate files to enable lazy loading and improve caching. - [Frontend Performance Optimization](https://awesome-repositories.com/f/web-development/frontend-performance-optimization.md) — Demonstrates techniques for reducing page load times via code splitting and minification. - [Module Bundlers](https://awesome-repositories.com/f/web-development/module-bundlers.md) — Demonstrates how to resolve dependencies and combine multiple source files into unified output artifacts. - [Shared Dependency Extraction](https://awesome-repositories.com/f/web-development/shared-dependency-extraction.md) — Identifies and moves common vendor libraries into separate files to maximize browser caching efficiency. ([source](https://github.com/ruanyf/webpack-demos#readme)) ### DevOps & Infrastructure - [Build Plugins](https://awesome-repositories.com/f/devops-infrastructure/cicd-pipeline-automation/core-build-engines/build-tooling/build-pipeline-extensions/build-plugins.md) — Uses plugins to intercept build lifecycle hooks for automating tasks like HTML generation and environment injection. ### Software Engineering & Architecture - [External Module References](https://awesome-repositories.com/f/software-engineering-architecture/external-content-handlers/external-content-inclusions/external-resource-references/external-module-references.md) — Implements configurations that prevent specific libraries from being bundled by replacing imports with references to global variables. ### User Interface & Experience - [CSS Modules](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/content-styling/styling-architectures/style-isolation-mechanisms/css-modules.md) — Implements scoped CSS mechanisms using unique class names to prevent style collisions across modules. ([source](https://github.com/ruanyf/webpack-demos#readme))