webpack/examples/README.md

# Examples

## Table of Contents

1. [Aggressive Merging](#aggressive-merging)
2. [Chunk](#chunk)
3. [Code Splitted](#code-splitted)
4. [Code Splitting](#code-splitting)
5. [Coffee Script](#coffee-script)
6. [CommonJS](#commonjs)
7. [DLL](#dll)
8. [Externals](#externals)
9. [Harmony](#harmony)
10. [HTTP2 Aggressive Splitting](#http2-aggressive-splitting)
11. [Hybrid Routing](#hybrid-routing)
12. [Loader](#loader)
13. [Mixed](#mixed)
14. [Multi Compiler](#multi-compiler)
15. [Multi Part Library](#multi-part-library)
16. [Multiple Entry Points](#multiple-entry-points)
17. [Require Context](#require-context)
18. [Require Resolve](#require-resolve)
19. [Scope Hoisting](#scope-hoisting)
20. [Side Effects](#side-effects)
21. [Source Map](#source-map)
22. [WebAssembly](#webassembly)
23. [Web Worker](#web-worker)
24. [Requests](#requests)
25. [Building an Example](#building-an-example)


## Aggressive Merging
[aggressive-merging](aggressive-merging)

## Chunk
[chunkhash](chunkhash)

[common-chunk-and-vendor-chunk](common-chunk-and-vendor-chunk)

[explicit-vendor-chunk](explicit-vendor-chunk)

[extra-async-chunk-advanced](extra-async-chunk-advanced)

[extra-async-chunk](extra-async-chunk)

[code-splitting-specify-chunk-name](code-splitting-specify-chunk-name)

[named-chunks](named-chunks) example demonstrating merging of chunks with named chunks

[two-explicit-vendor-chunks](two-explicit-vendor-chunks)

## Code Splitted
[code-splitted-require.context-amd](code-splitted-require.context-amd) example demonstrating contexts in a code-split environment with AMD.

[code-splitted-require.context](code-splitted-require.context) example demonstrating contexts in a code-split environment.

## Code Splitting
[code-splitting](code-splitting) example demonstrating a very simple case of Code Splitting.

[code-splitting-bundle-loader](code-splitting-bundle-loader) example demonstrating Code Splitting through the bundle loader

[code-splitting-harmony](code-splitting-harmony)

[code-splitting-native-import-context](code-splitting-native-import-context)

[code-splitting-specify-chunk-name](code-splitting-specify-chunk-name)

## Coffee Script
[coffee-script](coffee-script) example demonstrating code written in coffee-script.

## CommonJS
[commonjs](commonjs) example demonstrating a very simple program

## DLL
[dll](dll)

[dll-user](dll-user)

## Externals
[externals](externals)

## Harmony
[harmony](harmony)

[code-splitting-harmony](code-splitting-harmony)

[harmony-interop](harmony-interop)

[harmony-library](harmony-library)

[harmony-unused](harmony-unused)

## HTTP2 Aggressive Splitting
[http2-aggressive-splitting](http2-aggressive-splitting)

## Hybrid Routing
[hybrid-routing](hybrid-routing)

## Loader
[loader](loader) example demonstrating the usage of loaders.

## Mixed
[mixed](mixed) example demonstrating mixing CommonJs and AMD

## Multi Compiler
[multi-compiler](multi-compiler)

## Multi Part Library
[multi-part-library](multi-part-library)

## Multiple Entry Points
[multiple-entry-points](multiple-entry-points) example demonstrating multiple entry points with Code Splitting.

## Require Context
[require.context](require.context) example demonstrating automatic creation of contexts when using variables in `require`.

## Require Resolve
[require.resolve](require.resolve) example demonstrating how to cache clearing of modules with `require.resolve` and `require.cache`.

## Scope Hoisting
[scope-hoisting](scope-hoisting)

## Side Effects
[side-effects](side-effects)

## TypeScript
[TypeScript](typescript)

## Source Map
[source-map](source-map)

## WebAssembly
[wasm-simple](wasm-simple) example demonstrating simple import from a WebAssembly module
[wasm-complex](wasm-complex) example demonstrating top-level await and import of WebAssembly text format with wast-loader

## Web Worker
[web-worker](worker) example demonstrating creating WebWorkers with webpack.


# Requests
If you think an example is missing, please report it as issue. :)

# Building an Example
1. Run `yarn` in the root of the project.
2. Run `yarn setup` in the root of the project.
3. Run `yarn add --dev webpack-cli` in the root of the project.
4. Run `node build.js` in the specific example directory. (Ex: `cd examples/commonjs && node build.js`)

Note: To build all examples run `npm run build:examples`
Update README.md of Examples 2017-06-20 18:42:46 +08:00			`# Examples`
[Docs]: Added TOC 2019-08-07 00:12:48 +08:00
			`## Table of Contents`

			`1. [Aggressive Merging](#aggressive-merging)`
			`2. [Chunk](#chunk)`
			`3. [Code Splitted](#code-splitted)`
			`4. [Code Splitting](#code-splitting)`
			`5. [Coffee Script](#coffee-script)`
			`6. [CommonJS](#commonjs)`
			`7. [DLL](#dll)`
			`8. [Externals](#externals)`
			`9. [Harmony](#harmony)`
			`10. [HTTP2 Aggressive Splitting](#http2-aggressive-splitting)`
			`11. [Hybrid Routing](#hybrid-routing)`
update table of contents 2021-01-12 09:27:52 +08:00			`12. [Loader](#loader)`
			`13. [Mixed](#mixed)`
			`14. [Multi Compiler](#multi-compiler)`
			`15. [Multi Part Library](#multi-part-library)`
			`16. [Multiple Entry Points](#multiple-entry-points)`
			`17. [Require Context](#require-context)`
			`18. [Require Resolve](#require-resolve)`
			`19. [Scope Hoisting](#scope-hoisting)`
			`20. [Side Effects](#side-effects)`
			`21. [Source Map](#source-map)`
doc: add wasm examples to ToC 2021-06-18 19:18:07 +08:00			`22. [WebAssembly](#webassembly)`
			`23. [Web Worker](#web-worker)`
			`24. [Requests](#requests)`
			`25. [Building an Example](#building-an-example)`
[Docs]: Added TOC 2019-08-07 00:12:48 +08:00

Update README.md of Examples 2017-06-20 18:42:46 +08:00			`## Aggressive Merging`
Update examples README Running `yarn` does not seem to work here. We need to run `yarn setup` before we can run `yarn link webpack`. 2018-10-29 01:20:46 +08:00			`[aggressive-merging](aggressive-merging)`
added README to examles 2012-04-06 18:40:43 +08:00
Update README.md of Examples 2017-06-20 18:42:46 +08:00			`## Chunk`
			`[chunkhash](chunkhash)`
added commonjs example 2012-05-07 03:14:36 +08:00
Update README.md of Examples 2017-06-20 18:42:46 +08:00			`[common-chunk-and-vendor-chunk](common-chunk-and-vendor-chunk)`
added commonjs example 2012-05-07 03:14:36 +08:00
Update README.md of Examples 2017-06-20 18:42:46 +08:00			`[explicit-vendor-chunk](explicit-vendor-chunk)`
added README to examles 2012-04-06 18:40:43 +08:00
Update README.md of Examples 2017-06-20 18:42:46 +08:00			`[extra-async-chunk-advanced](extra-async-chunk-advanced)`
added README to examles 2012-04-06 18:40:43 +08:00
Update README.md of Examples 2017-06-20 18:42:46 +08:00			`[extra-async-chunk](extra-async-chunk)`
added require.resolve example 2012-07-19 17:48:07 +08:00
Update README.md of Examples 2017-06-20 18:42:46 +08:00			`[code-splitting-specify-chunk-name](code-splitting-specify-chunk-name)`
added require.resolve example 2012-07-19 17:48:07 +08:00
fix typo&& wrong links in examples/README.md 2017-11-14 20:43:27 +08:00			`[named-chunks](named-chunks) example demonstrating merging of chunks with named chunks`
added README to examles 2012-04-06 18:40:43 +08:00
Update README.md of Examples 2017-06-20 18:42:46 +08:00			`[two-explicit-vendor-chunks](two-explicit-vendor-chunks)`
added more examples 2012-08-23 07:58:17 +08:00
Update README.md of Examples 2017-06-20 18:42:46 +08:00			`## Code Splitted`
			`[code-splitted-require.context-amd](code-splitted-require.context-amd) example demonstrating contexts in a code-split environment with AMD.`
added README to examles 2012-04-06 18:40:43 +08:00
Update README.md of Examples 2017-06-20 18:42:46 +08:00			`[code-splitted-require.context](code-splitted-require.context) example demonstrating contexts in a code-split environment.`
added README to examles 2012-04-06 18:40:43 +08:00
Update README.md of Examples 2017-06-20 18:42:46 +08:00			`## Code Splitting`
			`[code-splitting](code-splitting) example demonstrating a very simple case of Code Splitting.`
added README to examles 2012-04-06 18:40:43 +08:00
docs: fix typo 2023-04-08 00:01:53 +08:00			`[code-splitting-bundle-loader](code-splitting-bundle-loader) example demonstrating Code Splitting through the bundle loader`
added README to examles 2012-04-06 18:40:43 +08:00
Update examples README Running `yarn` does not seem to work here. We need to run `yarn setup` before we can run `yarn link webpack`. 2018-10-29 01:20:46 +08:00			`[code-splitting-harmony](code-splitting-harmony)`
added commonjs example 2012-05-07 03:14:36 +08:00
Update examples README Running `yarn` does not seem to work here. We need to run `yarn setup` before we can run `yarn link webpack`. 2018-10-29 01:20:46 +08:00			`[code-splitting-native-import-context](code-splitting-native-import-context)`
added commonjs example 2012-05-07 03:14:36 +08:00
Update README.md of Examples 2017-06-20 18:42:46 +08:00			`[code-splitting-specify-chunk-name](code-splitting-specify-chunk-name)`
added named chucks example 2012-05-17 18:46:55 +08:00
Update README.md of Examples 2017-06-20 18:42:46 +08:00			`## Coffee Script`
			`[coffee-script](coffee-script) example demonstrating code written in coffee-script.`
added named chucks example 2012-05-17 18:46:55 +08:00
Update README.md of Examples 2017-06-20 18:42:46 +08:00			`## CommonJS`
			`[commonjs](commonjs) example demonstrating a very simple program`
update examples 2012-08-07 04:19:15 +08:00
Update README.md of Examples 2017-06-20 18:42:46 +08:00			`## DLL`
			`[dll](dll)`
added more examples 2012-08-23 07:58:17 +08:00
Update README.md of Examples 2017-06-20 18:42:46 +08:00			`[dll-user](dll-user)`
added i18n example, fixed error/warning bug 2013-02-19 19:48:17 +08:00
Update README.md of Examples 2017-06-20 18:42:46 +08:00			`## Externals`
			`[externals](externals)`
added i18n example, fixed error/warning bug 2013-02-19 19:48:17 +08:00
Update README.md of Examples 2017-06-20 18:42:46 +08:00			`## Harmony`
			`[harmony](harmony)`
add multiple-entry-points example #15 2013-11-20 01:09:26 +08:00
Update README.md of Examples 2017-06-20 18:42:46 +08:00			`[code-splitting-harmony](code-splitting-harmony)`
add multiple-entry-points example #15 2013-11-20 01:09:26 +08:00
Update README.md of Examples 2017-06-20 18:42:46 +08:00			`[harmony-interop](harmony-interop)`

			`[harmony-library](harmony-library)`

			`[harmony-unused](harmony-unused)`

typo fix `HTT2` seems typo of `HTTP2` 2017-09-01 10:11:06 +08:00			`## HTTP2 Aggressive Splitting`
Update README.md of Examples 2017-06-20 18:42:46 +08:00			`[http2-aggressive-splitting](http2-aggressive-splitting)`

			`## Hybrid Routing`
			`[hybrid-routing](hybrid-routing)`

			`## Loader`
			`[loader](loader) example demonstrating the usage of loaders.`

			`## Mixed`
			`[mixed](mixed) example demonstrating mixing CommonJs and AMD`

			`## Multi Compiler`
			`[multi-compiler](multi-compiler)`

			`## Multi Part Library`
			`[multi-part-library](multi-part-library)`
added README to examles 2012-04-06 18:40:43 +08:00
Update README.md of Examples 2017-06-20 18:42:46 +08:00			`## Multiple Entry Points`
			`[multiple-entry-points](multiple-entry-points) example demonstrating multiple entry points with Code Splitting.`

			`## Require Context`
			[require.context](require.context) example demonstrating automatic creation of contexts when using variables in `require`.

			`## Require Resolve`
			[require.resolve](require.resolve) example demonstrating how to cache clearing of modules with `require.resolve` and `require.cache`.

			`## Scope Hoisting`
			`[scope-hoisting](scope-hoisting)`

Fix link to side-effects example This started out as pure-module, but was moved without this link being updated. 2017-11-30 03:52:09 +08:00			`## Side Effects`
			`[side-effects](side-effects)`
add support for pure modules 2017-08-08 15:40:17 +08:00
chore(examples): add TypeScript example 2019-06-15 02:32:33 +08:00			`## TypeScript`
			`[TypeScript](typescript)`

Update README.md of Examples 2017-06-20 18:42:46 +08:00			`## Source Map`
			`[source-map](source-map)`

doc: add wasm examples to ToC 2021-06-18 19:18:07 +08:00			`## WebAssembly`
			`[wasm-simple](wasm-simple) example demonstrating simple import from a WebAssembly module`
			`[wasm-complex](wasm-complex) example demonstrating top-level await and import of WebAssembly text format with wast-loader`

Update README.md of Examples 2017-06-20 18:42:46 +08:00			`## Web Worker`
fix typo 2021-03-18 07:31:19 +08:00			`[web-worker](worker) example demonstrating creating WebWorkers with webpack.`
Update README.md of Examples 2017-06-20 18:42:46 +08:00

			`# Requests`
Fix typos in README.md and examples/README.md 2015-05-27 10:29:04 +08:00			`If you think an example is missing, please report it as issue. :)`
added README to examles 2012-04-06 18:40:43 +08:00
added explicit step to run npm install when building an example 2015-11-12 02:53:41 +08:00			`# Building an Example`
improve build script 2018-10-29 18:29:06 +08:00			1. Run `yarn` in the root of the project.
			2. Run `yarn setup` in the root of the project.
docs(examples): add yarn add webpack-cli step Running node_modules/bin/webpack without webpack-cli installed will get hang. The culprit is that webpack expects a stdin of whether to install webpack-cli or not. However, as examples/build-common use `child_process.exec` to execute `webpack`, the user will not be prompted for any questions since the stdin is not piped and the stdout will be pass to parent process only after the child process exits. We can keep build-common simple by instructing devs to install webpack-cli before they build examples. Also rewrite the install step using yarn since we use yarn in webpack. 2018-05-02 18:12:24 +08:00			3. Run `yarn add --dev webpack-cli` in the root of the project.
			4. Run `node build.js` in the specific example directory. (Ex: `cd examples/commonjs && node build.js`)
Added the fix for the extract-text-webpack-plugin error in the "Building an Example" part 2016-10-14 15:20:29 +08:00
			Note: To build all examples run `npm run build:examples`