https://github.com/privatenumber/webpack-playground

Demonstration of different Webpack configurations
https://github.com/privatenumber/webpack-playground

configuration demos experiments playground webpack

Last synced: 4 months ago
JSON representation

Demonstration of different Webpack configurations

• Host: GitHub
• URL: https://github.com/privatenumber/webpack-playground
• Owner: privatenumber
• License: mit
• Created: 2020-05-06T23:14:53.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2021-03-03T02:40:01.000Z (almost 4 years ago)
• Last Synced: 2024-10-12T00:46:01.761Z (4 months ago)
• Topics: configuration, demos, experiments, playground, webpack
• Language: JavaScript
• Homepage:
• Size: 1.52 MB
• Stars: 8
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# 🤹‍♂️ Webpack playground

This repo contains a variety of examples that demonstrate different Webpack configurations and an evaluation of their outputs.

## ⛳️ Demos

- [depend-on](/demos/depend-on)

	Webpack's depend-on feature

- [dll](/demos/dll)

	Splitting bundles with DLL to improve build-time

- [esbuild](/demos/esbuild)

	Blazing fast JS transpilation & minification with esbuild

- [filename-chunkhash-wp4](/demos/filename-chunkhash-wp4)

	Filename chunkhash using Webpack 4

- [filename-chunkhash-wp5](/demos/filename-chunkhash-wp5)

	Filename chunkhash using Webpack 5

- [filename-contenthash-wp4](/demos/filename-contenthash-wp4)

	Filename contenthash using Webpack 4

- [filename-contenthash-wp5](/demos/filename-contenthash-wp5)

	Filename contenthash using Webpack 5

- [filename-hash-wp4](/demos/filename-hash-wp4)

	Filename hash using Webpack 4

- [filename-hash-wp5](/demos/filename-hash-wp5)

	Filename hash using Webpack 5

- [library-targets](/demos/library-targets)

	See the different output formats Webpack supports

- [library-targets-externals](/demos/library-targets-externals)

	See how different library-targets externalize modules

- [magic-comments](/demos/magic-comments)

	See how Webpack magic comments influence code-splitting

- [module-output](/demos/module-output)

	Webpack's experimental ESM module output

- [split-chunks-all](/demos/split-chunks-all)

	Webpack's Split Chunks on all chunks

- [split-chunks-all-dynamic-import](/demos/split-chunks-all-dynamic-import)

	Webpack's Split Chunks on all chunks w/ dynamic import

- [split-chunks-individual-dependency-vendors](/demos/split-chunks-individual-dependency-vendors)

	Webpack's Split Chunks to individually chunk each node module

- [tree-shaking-lodash-babel-plugin](/demos/tree-shaking-lodash-babel-plugin)

	Tree-shaking performance using babel-plugin-lodash

- [tree-shaking-lodash-babel-webpack-plugin](/demos/tree-shaking-lodash-babel-webpack-plugin)

	Tree-shaking performance using babel-plugin-lodash & lodash-webpack-plugin

- [tree-shaking-lodash-es](/demos/tree-shaking-lodash-es)

	Tree-shaking performance with lodash-es

- [tree-shaking-lodash-es-wp4](/demos/tree-shaking-lodash-es-wp4)

	Tree-shaking performance with lodash-es using Webpack 4

- [tree-shaking-lodash-path](/demos/tree-shaking-lodash-path)

	Bundling performance importing specific lodash utils

## 🛠 Contributing

### Setup

```sh

$ nvm i  # Use appropriate Node.js version via http://nvm.sh

$ pnpm i --frozen-lockfile # Install dependencies using pnpm

```

### Running builds

#### Run all package builds

```sh

$ pnpm run -r build

```

#### Run build in a specific package

```sh

$ pnpm run -C demos/ build

```