From eb7d7ea678dba813e059388f942b93860c871b25 Mon Sep 17 00:00:00 2001 From: Yuta Hiroto Date: Thu, 4 Apr 2019 22:04:47 +0100 Subject: [PATCH 1/3] chore(examples): fix exmaples template syntax fixes: #9000 --- examples/aggressive-merging/template.md | 20 ++--- examples/chunkhash/template.md | 47 ++++++----- .../template.md | 10 +-- .../code-splitted-require.context/template.md | 10 +-- .../code-splitting-bundle-loader/template.md | 21 +++-- examples/code-splitting-harmony/template.md | 14 ++-- .../template.md | 30 +++---- .../template.md | 22 +++--- .../template.md | 22 +++--- examples/code-splitting/template.md | 57 +++++++------ examples/coffee-script/template.md | 23 +++--- .../common-chunk-and-vendor-chunk/template.md | 32 ++++---- .../common-chunk-grandchildren/template.md | 79 +++++++++---------- examples/commonjs/template.md | 22 +++--- .../dll-app-and-vendor/0-vendor/template.md | 21 +++-- examples/dll-app-and-vendor/1-app/template.md | 20 ++--- examples/dll-entry-only/template.md | 21 +++-- examples/dll-user/template.md | 16 ++-- examples/dll/template.md | 17 ++-- examples/explicit-vendor-chunk/template.md | 16 ++-- examples/externals/template.md | 20 ++--- .../extra-async-chunk-advanced/template.md | 18 ++--- examples/extra-async-chunk/template.md | 67 ++++++++-------- examples/harmony-interop/template.md | 31 ++++---- examples/harmony-library/template.md | 12 +-- examples/harmony-unused/template.md | 26 +++--- examples/harmony/template.md | 19 +++-- .../http2-aggressive-splitting/template.md | 10 +-- examples/hybrid-routing/template.md | 36 ++++----- examples/i18n/template.md | 27 +++---- examples/loader/template.md | 24 +++--- examples/many-pages/template.md | 18 ++--- examples/mixed/template.md | 24 +++--- examples/multi-compiler/template.md | 23 +++--- examples/multi-part-library/template.md | 16 ++-- examples/multiple-entry-points/template.md | 68 ++++++++-------- examples/named-chunks/template.md | 21 +++-- examples/require.context/template.md | 8 +- examples/require.resolve/template.md | 10 +-- examples/scope-hoisting/template.md | 67 ++++++++-------- examples/side-effects/template.md | 28 +++---- examples/source-map/template.md | 68 +++++++++------- .../two-explicit-vendor-chunks/template.md | 20 ++--- examples/wasm-simple/template.md | 24 +++--- examples/web-worker/template.md | 25 +++--- 45 files changed, 607 insertions(+), 623 deletions(-) diff --git a/examples/aggressive-merging/template.md b/examples/aggressive-merging/template.md index 5d3303934af..ec8f9cf8ddf 100644 --- a/examples/aggressive-merging/template.md +++ b/examples/aggressive-merging/template.md @@ -1,19 +1,19 @@ # pageA.js -``` javascript -{{pageA.js}} +```javascript +_{{pageA.js}}_ ``` # pageB.js -``` javascript -{{pageB.js}} +```javascript +_{{pageB.js}}_ ``` # pageC.js -``` javascript -{{pageC.js}} +```javascript +_{{pageC.js}}_ ``` # common.js @@ -22,8 +22,8 @@ a big file... # webpack.config.js -``` javascript -{{webpack.config.js}} +```javascript +_{{webpack.config.js}}_ ``` # Info @@ -31,11 +31,11 @@ a big file... ## Unoptimized ``` -{{stdout}} +_{{stdout}}_ ``` ## Production mode ``` -{{production:stdout}} +_{{production:stdout}}_ ``` diff --git a/examples/chunkhash/template.md b/examples/chunkhash/template.md index b7df1a7272b..99db0f6580e 100644 --- a/examples/chunkhash/template.md +++ b/examples/chunkhash/template.md @@ -4,50 +4,47 @@ A very simple solution to this problem is to create another chunk which contains The configuration required for this is: -* use `[chunkhash]` in `output.filename` (Note that this example doesn't do this because of the example generator infrastructure, but you should) -* use `[chunkhash]` in `output.chunkFilename` (Note that this example doesn't do this because of the example generator infrastructure, but you should) +- use `[chunkhash]` in `output.filename` (Note that this example doesn't do this because of the example generator infrastructure, but you should) +- use `[chunkhash]` in `output.chunkFilename` (Note that this example doesn't do this because of the example generator infrastructure, but you should) # example.js -``` javascript -{{example.js}} +```javascript +_{{example.js}}_ ``` # webpack.config.js -``` javascript -{{webpack.config.js}} +```javascript +_{{webpack.config.js}}_ ``` # index.html -``` html +```html - - - - - - - - - - + + + + + + + ``` # dist/runtime~main.[chunkhash].js -``` javascript -{{dist/runtime~main.chunkhash.js}} +```javascript +_{{dist/runtime~main.chunkhash.js}}_ ``` # dist/main.[chunkhash].js -``` javascript -{{dist/main.chunkhash.js}} +```javascript +_{{dist/main.chunkhash.js}}_ ``` # Info @@ -55,11 +52,11 @@ The configuration required for this is: ## Unoptimized ``` -{{stdout}} +_{{stdout}}_ ``` ## Production mode ``` -{{production:stdout}} +_{{production:stdout}}_ ``` diff --git a/examples/code-splitted-require.context-amd/template.md b/examples/code-splitted-require.context-amd/template.md index 0166325bfc6..d424abb4ff3 100644 --- a/examples/code-splitted-require.context-amd/template.md +++ b/examples/code-splitted-require.context-amd/template.md @@ -1,19 +1,19 @@ # example.js ``` javascript -{{example.js}} +_{{example.js}}_ ``` # dist/output.js ``` javascript -{{dist/output.js}} +_{{dist/output.js}}_ ``` # dist/1.output.js ``` javascript -{{dist/1.output.js}} +_{{dist/1.output.js}}_ ``` # Info @@ -21,11 +21,11 @@ ## Unoptimized ``` -{{stdout}} +_{{stdout}}_ ``` ## Production mode ``` -{{production:stdout}} +_{{production:stdout}}_ ``` diff --git a/examples/code-splitted-require.context/template.md b/examples/code-splitted-require.context/template.md index 0166325bfc6..d424abb4ff3 100644 --- a/examples/code-splitted-require.context/template.md +++ b/examples/code-splitted-require.context/template.md @@ -1,19 +1,19 @@ # example.js ``` javascript -{{example.js}} +_{{example.js}}_ ``` # dist/output.js ``` javascript -{{dist/output.js}} +_{{dist/output.js}}_ ``` # dist/1.output.js ``` javascript -{{dist/1.output.js}} +_{{dist/1.output.js}}_ ``` # Info @@ -21,11 +21,11 @@ ## Unoptimized ``` -{{stdout}} +_{{stdout}}_ ``` ## Production mode ``` -{{production:stdout}} +_{{production:stdout}}_ ``` diff --git a/examples/code-splitting-bundle-loader/template.md b/examples/code-splitting-bundle-loader/template.md index fe41f8dd4bc..97df099b124 100644 --- a/examples/code-splitting-bundle-loader/template.md +++ b/examples/code-splitting-bundle-loader/template.md @@ -4,27 +4,26 @@ The bundle loader is used to create a wrapper module for `file.js` that loads th # example.js -``` javascript -{{example.js}} +```javascript +_{{example.js}}_ ``` # file.js -``` javascript -{{file.js}} +```javascript +_{{file.js}}_ ``` - # dist/output.js -``` javascript -{{dist/output.js}} +```javascript +_{{dist/output.js}}_ ``` # dist/1.output.js -``` javascript -{{dist/1.output.js}} +```javascript +_{{dist/1.output.js}}_ ``` # Info @@ -32,11 +31,11 @@ The bundle loader is used to create a wrapper module for `file.js` that loads th ## Unoptimized ``` -{{stdout}} +_{{stdout}}_ ``` ## Production mode ``` -{{production:stdout}} +_{{production:stdout}}_ ``` diff --git a/examples/code-splitting-harmony/template.md b/examples/code-splitting-harmony/template.md index 5f6a68cdf3b..a38d805765a 100644 --- a/examples/code-splitting-harmony/template.md +++ b/examples/code-splitting-harmony/template.md @@ -8,28 +8,26 @@ Providing dynamic expressions to `import` is possible. The same limits as with d # example.js -``` javascript -{{example.js}} +```javascript +_{{example.js}}_ ``` - # dist/output.js -``` javascript -{{dist/output.js}} +```javascript +_{{dist/output.js}}_ ``` - # Info ## Unoptimized ``` -{{stdout}} +_{{stdout}}_ ``` ## Production mode ``` -{{production:stdout}} +_{{production:stdout}}_ ``` diff --git a/examples/code-splitting-native-import-context-filter/template.md b/examples/code-splitting-native-import-context-filter/template.md index 31fa2aeb04d..d4334d58076 100644 --- a/examples/code-splitting-native-import-context-filter/template.md +++ b/examples/code-splitting-native-import-context-filter/template.md @@ -1,31 +1,31 @@ # example.js -This example illustrates how to filter the ContextModule results of `import()` statements. only `.js` files that don't +This example illustrates how to filter the ContextModule results of `import()` statements. only `.js` files that don't end in `.noimport.js` within the `templates` folder will be bundled. -``` javascript -{{example.js}} +```javascript +_{{example.js}}_ ``` # templates/ -* foo.js -* foo.noimport.js -* baz.js -* foo.noimport.js -* bar.js -* foo.noimport.js +- foo.js +- foo.noimport.js +- baz.js +- foo.noimport.js +- bar.js +- foo.noimport.js All templates are of this pattern: -``` javascript -{{templates/foo.js}} +```javascript +_{{templates/foo.js}}_ ``` # dist/output.js -``` javascript -{{dist/output.js}} +```javascript +_{{dist/output.js}}_ ``` # Info @@ -33,11 +33,11 @@ All templates are of this pattern: ## Unoptimized ``` -{{stdout}} +_{{stdout}}_ ``` ## Production mode ``` -{{production:stdout}} +_{{production:stdout}}_ ``` diff --git a/examples/code-splitting-native-import-context/template.md b/examples/code-splitting-native-import-context/template.md index f26cba077bf..f3c30f24490 100644 --- a/examples/code-splitting-native-import-context/template.md +++ b/examples/code-splitting-native-import-context/template.md @@ -2,26 +2,26 @@ This example illustrates how to leverage the `import()` syntax to create ContextModules which are separated into separate chunks for each module in the `./templates` folder. -``` javascript -{{example.js}} +```javascript +_{{example.js}}_ ``` # templates/ -* foo.js -* baz.js -* bar.js +- foo.js +- baz.js +- bar.js All templates are of this pattern: -``` javascript -{{templates/foo.js}} +```javascript +_{{templates/foo.js}}_ ``` # dist/output.js -``` javascript -{{dist/output.js}} +```javascript +_{{dist/output.js}}_ ``` # Info @@ -29,11 +29,11 @@ All templates are of this pattern: ## Unoptimized ``` -{{stdout}} +_{{stdout}}_ ``` ## Production mode ``` -{{production:stdout}} +_{{production:stdout}}_ ``` diff --git a/examples/code-splitting-specify-chunk-name/template.md b/examples/code-splitting-specify-chunk-name/template.md index b85d38e981d..e7425835fbe 100644 --- a/examples/code-splitting-specify-chunk-name/template.md +++ b/examples/code-splitting-specify-chunk-name/template.md @@ -2,26 +2,26 @@ This example illustrates how to specify chunk name in `require.ensure()` and `import()` to separated modules into separate chunks manually. -``` javascript -{{example.js}} +```javascript +_{{example.js}}_ ``` # templates/ -* foo.js -* baz.js -* bar.js +- foo.js +- baz.js +- bar.js All templates are of this pattern: -``` javascript -{{templates/foo.js}} +```javascript +_{{templates/foo.js}}_ ``` # dist/output.js -``` javascript -{{dist/output.js}} +```javascript +_{{dist/output.js}}_ ``` # Info @@ -29,11 +29,11 @@ All templates are of this pattern: ## Unoptimized ``` -{{stdout}} +_{{stdout}}_ ``` ## Production mode ``` -{{production:stdout}} +_{{production:stdout}}_ ``` diff --git a/examples/code-splitting/template.md b/examples/code-splitting/template.md index 8e32dc5c49d..1cd14be5895 100644 --- a/examples/code-splitting/template.md +++ b/examples/code-splitting/template.md @@ -1,52 +1,51 @@ This example illustrates a very simple case of Code Splitting with `require.ensure`. -* `a` and `b` are required normally via CommonJS -* `c` is depended through the `require.ensure` array. - * This means: make it available, but don't execute it - * webpack will load it on demand -* `b` and `d` are required via CommonJs in the `require.ensure` callback - * webpack detects that these are in the on-demand-callback and - * will load them on demand - * webpacks optimizer can optimize `b` away - * as it is already available through the parent chunks +- `a` and `b` are required normally via CommonJS +- `c` is depended through the `require.ensure` array. + - This means: make it available, but don't execute it + - webpack will load it on demand +- `b` and `d` are required via CommonJs in the `require.ensure` callback + - webpack detects that these are in the on-demand-callback and + - will load them on demand + - webpacks optimizer can optimize `b` away + - as it is already available through the parent chunks You can see that webpack outputs two files/chunks: -* `output.js` is the entry chunk and contains - * the module system - * chunk loading logic - * the entry point `example.js` - * module `a` - * module `b` -* `1.output.js` is an additional chunk (on demand loaded) and contains - * module `c` - * module `d` +- `output.js` is the entry chunk and contains + - the module system + - chunk loading logic + - the entry point `example.js` + - module `a` + - module `b` +- `1.output.js` is an additional chunk (on demand loaded) and contains + - module `c` + - module `d` You can see that chunks are loaded via JSONP. The additional chunks are pretty small and minimize well. # example.js -``` javascript -{{example.js}} +```javascript +_{{example.js}}_ ``` - # dist/output.js -``` javascript -{{dist/output.js}} +```javascript +_{{dist/output.js}}_ ``` # dist/1.output.js -``` javascript -{{dist/1.output.js}} +```javascript +_{{dist/1.output.js}}_ ``` Minimized -``` javascript -{{production:dist/1.output.js}} +```javascript +_{{production:dist/1.output.js}}_ ``` # Info @@ -54,11 +53,11 @@ Minimized ## Unoptimized ``` -{{stdout}} +_{{stdout}}_ ``` ## Production mode ``` -{{production:stdout}} +_{{production:stdout}}_ ``` diff --git a/examples/coffee-script/template.md b/examples/coffee-script/template.md index bef6e314e38..c2c60394cc9 100644 --- a/examples/coffee-script/template.md +++ b/examples/coffee-script/template.md @@ -1,26 +1,25 @@ - # example.js -``` javascript -{{example.js}} +```javascript +_{{example.js}}_ ``` # cup1.coffee -``` coffee-script -{{cup1.coffee}} +```coffee-script +_{{cup1.coffee}}_ ``` # cup2.coffee -``` coffee-script -{{cup2.coffee}} +```coffee-script +_{{cup2.coffee}}_ ``` # dist/output.js -``` javascript -{{dist/output.js}} +```javascript +_{{dist/output.js}}_ ``` # Info @@ -28,11 +27,11 @@ ## Unoptimized ``` -{{stdout}} +_{{stdout}}_ ``` ## Production mode ``` -{{production:stdout}} -``` \ No newline at end of file +_{{production:stdout}}_ +``` diff --git a/examples/common-chunk-and-vendor-chunk/template.md b/examples/common-chunk-and-vendor-chunk/template.md index bc7f590c76a..82a8765e7ad 100644 --- a/examples/common-chunk-and-vendor-chunk/template.md +++ b/examples/common-chunk-and-vendor-chunk/template.md @@ -33,44 +33,44 @@ With this bundle configuration, you would load your third party libraries, then # webpack.config.js -``` javascript -{{webpack.config.js}} +```javascript +_{{webpack.config.js}}_ ``` # dist/vendor.js -``` javascript -{{dist/vendor.js}} +```javascript +_{{dist/vendor.js}}_ ``` # dist/commons~pageA~pageB~pageC.js -``` javascript -{{dist/commons~pageA~pageB~pageC.js}} +```javascript +_{{dist/commons~pageA~pageB~pageC.js}}_ ``` # dist/commons~pageB~pageC.js -``` javascript -{{dist/commons~pageB~pageC.js}} +```javascript +_{{dist/commons~pageB~pageC.js}}_ ``` # dist/pageA.js -``` javascript -{{dist/pageA.js}} +```javascript +_{{dist/pageA.js}}_ ``` # dist/pageB.js -``` javascript -{{dist/pageB.js}} +```javascript +_{{dist/pageB.js}}_ ``` # dist/pageC.js -``` javascript -{{dist/pageC.js}} +```javascript +_{{dist/pageC.js}}_ ``` # Info @@ -78,11 +78,11 @@ With this bundle configuration, you would load your third party libraries, then ## Unoptimized ``` -{{stdout}} +_{{stdout}}_ ``` ## Production mode ``` -{{production:stdout}} +_{{production:stdout}}_ ``` diff --git a/examples/common-chunk-grandchildren/template.md b/examples/common-chunk-grandchildren/template.md index 60d126f864f..36c1dc57d1f 100644 --- a/examples/common-chunk-grandchildren/template.md +++ b/examples/common-chunk-grandchildren/template.md @@ -1,89 +1,88 @@ This example illustrates how common modules from deep ancestors of an entry point can be split into a separate common chunk -* `pageA` and `pageB` are dynamically required -* `pageC` and `pageA` both require the `reusableComponent` -* `pageB` dynamically requires `PageC` +- `pageA` and `pageB` are dynamically required +- `pageC` and `pageA` both require the `reusableComponent` +- `pageB` dynamically requires `PageC` You can see that webpack outputs five files/chunks: -* `output.js` is the entry chunk and contains - * the module system - * chunk loading logic - * the entry point `example.js` -* `0.output.js` is an additional chunk - * module `reusableComponent` -* `1.output.js` is an additional chunk - * module `pageB` -* `2.output.js` is an additional chunk - * module `pageA` -* `3.output.js` is an additional chunk - * module `pageC` - +- `output.js` is the entry chunk and contains + - the module system + - chunk loading logic + - the entry point `example.js` +- `0.output.js` is an additional chunk + - module `reusableComponent` +- `1.output.js` is an additional chunk + - module `pageB` +- `2.output.js` is an additional chunk + - module `pageA` +- `3.output.js` is an additional chunk + - module `pageC` # example.js -``` javascript -{{example.js}} +```javascript +_{{example.js}}_ ``` # pageA.js -``` javascript -{{pageA.js}} +```javascript +_{{pageA.js}}_ ``` # pageB.js -``` javascript -{{pageB.js}} +```javascript +_{{pageB.js}}_ ``` # pageC.js -``` javascript -{{pageC.js}} +```javascript +_{{pageC.js}}_ ``` # reusableComponent.js -``` javascript -{{reusableComponent.js}} +```javascript +_{{reusableComponent.js}}_ ``` # webpack.config.js -``` javascript -{{webpack.config.js}} +```javascript +_{{webpack.config.js}}_ ``` # dist/output.js -``` javascript -{{dist/output.js}} +```javascript +_{{dist/output.js}}_ ``` # dist/0.output.js -``` javascript -{{dist/0.output.js}} +```javascript +_{{dist/0.output.js}}_ ``` # dist/2.output.js -``` javascript -{{dist/2.output.js}} +```javascript +_{{dist/2.output.js}}_ ``` # dist/3.output.js -``` javascript -{{dist/3.output.js}} +```javascript +_{{dist/3.output.js}}_ ``` # dist/4.output.js -``` javascript -{{dist/4.output.js}} +```javascript +_{{dist/4.output.js}}_ ``` # Info @@ -91,11 +90,11 @@ You can see that webpack outputs five files/chunks: ## Unoptimized ``` -{{stdout}} +_{{stdout}}_ ``` ## Production mode ``` -{{production:stdout}} +_{{production:stdout}}_ ``` diff --git a/examples/commonjs/template.md b/examples/commonjs/template.md index 5ed0539fc77..253e6aeb40b 100644 --- a/examples/commonjs/template.md +++ b/examples/commonjs/template.md @@ -8,26 +8,26 @@ You can also see the info messages webpack prints to console (for both normal an # example.js -``` javascript -{{example.js}} +```javascript +_{{example.js}}_ ``` # increment.js -``` javascript -{{increment.js}} +```javascript +_{{increment.js}}_ ``` # math.js -``` javascript -{{math.js}} +```javascript +_{{math.js}}_ ``` # dist/output.js -``` javascript -{{dist/output.js}} +```javascript +_{{dist/output.js}}_ ``` # Info @@ -35,11 +35,11 @@ You can also see the info messages webpack prints to console (for both normal an ## Unoptimized ``` -{{stdout}} +_{{stdout}}_ ``` ## Production mode ``` -{{production:stdout}} -``` \ No newline at end of file +_{{production:stdout}}_ +``` diff --git a/examples/dll-app-and-vendor/0-vendor/template.md b/examples/dll-app-and-vendor/0-vendor/template.md index 358db39d4c7..73abe44e338 100644 --- a/examples/dll-app-and-vendor/0-vendor/template.md +++ b/examples/dll-app-and-vendor/0-vendor/template.md @@ -8,26 +8,26 @@ A manifest is created which includes mappings from module names to internal ids. ### webpack.config.js -``` javascript -{{webpack.config.js}} +```javascript +_{{webpack.config.js}}_ ``` # example-vendor -``` javascript -{{../node_modules/example-vendor.js}} +```javascript +_{{../node_modules/example-vendor.js}}_ ``` # dist/vendor.js -``` javascript -{{dist/vendor.js}} +```javascript +_{{dist/vendor.js}}_ ``` # dist/vendor-manifest.json -``` javascript -{{dist/vendor-manifest.json}} +```javascript +_{{dist/vendor-manifest.json}}_ ``` # Info @@ -35,12 +35,11 @@ A manifest is created which includes mappings from module names to internal ids. ## Unoptimized ``` -{{stdout}} +_{{stdout}}_ ``` ## Production mode ``` -{{production:stdout}} +_{{production:stdout}}_ ``` - diff --git a/examples/dll-app-and-vendor/1-app/template.md b/examples/dll-app-and-vendor/1-app/template.md index 288f12067ae..fc9a9e673c8 100644 --- a/examples/dll-app-and-vendor/1-app/template.md +++ b/examples/dll-app-and-vendor/1-app/template.md @@ -4,26 +4,26 @@ The previously built vendor dll is used. The DllReferencePlugin reads the conten # webpack.config.js -``` javascript -{{webpack.config.js}} +```javascript +_{{webpack.config.js}}_ ``` # example-app.js -``` javascript -{{example-app.js}} +```javascript +_{{example-app.js}}_ ``` # example.html -``` html -{{example.html}} +```html +_{{example.html}}_ ``` # dist/app.js -``` javascript -{{dist/app.js}} +```javascript +_{{dist/app.js}}_ ``` # Info @@ -31,13 +31,13 @@ The previously built vendor dll is used. The DllReferencePlugin reads the conten ## Unoptimized ``` -{{stdout}} +_{{stdout}}_ ``` ## Production mode ``` -{{production:stdout}} +_{{production:stdout}}_ ``` + - - - - - - + + ``` @@ -58,7 +55,7 @@ module.exports = {
/******/ (function(modules) { /* webpackBootstrap */ }) -``` javascript +```javascript /******/ (function(modules) { // webpackBootstrap /******/ // install a JSONP callback for chunk loading /******/ function webpackJsonpCallback(data) { @@ -281,13 +278,13 @@ module.exports = {
-``` javascript +```javascript /******/ ([]); ``` # dist/main.[chunkhash].js -``` javascript +```javascript (window["webpackJsonp"] = window["webpackJsonp"] || []).push([[1],[ /* 0 */ /*!********************!*\ diff --git a/examples/code-splitting-bundle-loader/README.md b/examples/code-splitting-bundle-loader/README.md index 21232ff4082..18925d298d8 100644 --- a/examples/code-splitting-bundle-loader/README.md +++ b/examples/code-splitting-bundle-loader/README.md @@ -4,7 +4,7 @@ The bundle loader is used to create a wrapper module for `file.js` that loads th # example.js -``` javascript +```javascript require("bundle-loader!./file.js")(function(fileJsExports) { console.log(fileJsExports); }); @@ -12,16 +12,15 @@ require("bundle-loader!./file.js")(function(fileJsExports) { # file.js -``` javascript +```javascript module.exports = "It works"; ``` - # dist/output.js
/******/ (function(modules) { /* webpackBootstrap */ }) -``` javascript +```javascript /******/ (function(modules) { // webpackBootstrap /******/ // install a JSONP callback for chunk loading /******/ function webpackJsonpCallback(data) { @@ -224,7 +223,7 @@ module.exports = "It works";
-``` javascript +```javascript /******/ ([ /* 0 */ /*!********************!*\ @@ -267,7 +266,7 @@ __webpack_require__.e(/*! require.ensure */ 1).then((function(require) { # dist/1.output.js -``` javascript +```javascript (window["webpackJsonp"] = window["webpackJsonp"] || []).push([[1],{ /***/ 2: diff --git a/examples/code-splitting-harmony/README.md b/examples/code-splitting-harmony/README.md index 3c80542d0b2..de14f806c2b 100644 --- a/examples/code-splitting-harmony/README.md +++ b/examples/code-splitting-harmony/README.md @@ -8,7 +8,7 @@ Providing dynamic expressions to `import` is possible. The same limits as with d # example.js -``` javascript +```javascript import a from "a"; import("b").then(function(b) { @@ -24,12 +24,11 @@ Promise.all([loadC("1"), loadC("2")]).then(function(arr) { }); ``` - # dist/output.js
/******/ (function(modules) { /* webpackBootstrap */ }) -``` javascript +```javascript /******/ (function(modules) { // webpackBootstrap /******/ // install a JSONP callback for chunk loading /******/ function webpackJsonpCallback(data) { @@ -232,7 +231,7 @@ Promise.all([loadC("1"), loadC("2")]).then(function(arr) {
-``` javascript +```javascript /******/ ([ /* 0 */, /* 1 */, @@ -322,7 +321,6 @@ module.exports = webpackAsyncContext; /******/ ]); ``` - # Info ## Unoptimized diff --git a/examples/code-splitting-native-import-context-filter/README.md b/examples/code-splitting-native-import-context-filter/README.md index fe2f522b364..730e2e38867 100644 --- a/examples/code-splitting-native-import-context-filter/README.md +++ b/examples/code-splitting-native-import-context-filter/README.md @@ -1,9 +1,9 @@ # example.js -This example illustrates how to filter the ContextModule results of `import()` statements. only `.js` files that don't +This example illustrates how to filter the ContextModule results of `import()` statements. only `.js` files that don't end in `.noimport.js` within the `templates` folder will be bundled. -``` javascript +```javascript async function getTemplate(templateName) { try { let template = await import( @@ -28,16 +28,16 @@ getTemplate("baz.noimport"); # templates/ -* foo.js -* foo.noimport.js -* baz.js -* foo.noimport.js -* bar.js -* foo.noimport.js +- foo.js +- foo.noimport.js +- baz.js +- foo.noimport.js +- bar.js +- foo.noimport.js All templates are of this pattern: -``` javascript +```javascript var foo = "foo"; export default foo; @@ -47,7 +47,7 @@ export default foo;
/******/ (function(modules) { /* webpackBootstrap */ }) -``` javascript +```javascript /******/ (function(modules) { // webpackBootstrap /******/ // install a JSONP callback for chunk loading /******/ function webpackJsonpCallback(data) { @@ -250,7 +250,7 @@ export default foo;
-``` javascript +```javascript /******/ ([ /* 0 */, /* 1 */, diff --git a/examples/code-splitting-native-import-context/README.md b/examples/code-splitting-native-import-context/README.md index e50ade70e75..e2b9776ba5d 100644 --- a/examples/code-splitting-native-import-context/README.md +++ b/examples/code-splitting-native-import-context/README.md @@ -2,7 +2,7 @@ This example illustrates how to leverage the `import()` syntax to create ContextModules which are separated into separate chunks for each module in the `./templates` folder. -``` javascript +```javascript async function getTemplate(templateName) { try { let template = await import(`./templates/${templateName}`); @@ -20,13 +20,13 @@ getTemplate("baz"); # templates/ -* foo.js -* baz.js -* bar.js +- foo.js +- baz.js +- bar.js All templates are of this pattern: -``` javascript +```javascript var foo = "foo"; export default foo; @@ -36,7 +36,7 @@ export default foo;
/******/ (function(modules) { /* webpackBootstrap */ }) -``` javascript +```javascript /******/ (function(modules) { // webpackBootstrap /******/ // install a JSONP callback for chunk loading /******/ function webpackJsonpCallback(data) { @@ -239,7 +239,7 @@ export default foo;
-``` javascript +```javascript /******/ ([ /* 0 */, /* 1 */, diff --git a/examples/code-splitting-specify-chunk-name/README.md b/examples/code-splitting-specify-chunk-name/README.md index f660e15fde9..aa91f0cb76d 100644 --- a/examples/code-splitting-specify-chunk-name/README.md +++ b/examples/code-splitting-specify-chunk-name/README.md @@ -2,7 +2,7 @@ This example illustrates how to specify chunk name in `require.ensure()` and `import()` to separated modules into separate chunks manually. -``` javascript +```javascript import("./templates/foo" /* webpackChunkName: "chunk-foo" */ ).then(function(foo) { console.log('foo:', foo); }) @@ -20,13 +20,13 @@ import("./templates/ba" + createContextVar /* webpackChunkName: "chunk-bar-baz" # templates/ -* foo.js -* baz.js -* bar.js +- foo.js +- baz.js +- bar.js All templates are of this pattern: -``` javascript +```javascript var foo = "foo"; export default foo; @@ -36,7 +36,7 @@ export default foo;
/******/ (function(modules) { /* webpackBootstrap */ }) -``` javascript +```javascript /******/ (function(modules) { // webpackBootstrap /******/ // install a JSONP callback for chunk loading /******/ function webpackJsonpCallback(data) { @@ -239,7 +239,7 @@ export default foo;
-``` javascript +```javascript /******/ ([ /* 0 */, /* 1 */, diff --git a/examples/code-splitting/README.md b/examples/code-splitting/README.md index 1e5edb9177e..a75cc4b5098 100644 --- a/examples/code-splitting/README.md +++ b/examples/code-splitting/README.md @@ -1,32 +1,32 @@ This example illustrates a very simple case of Code Splitting with `require.ensure`. -* `a` and `b` are required normally via CommonJS -* `c` is depended through the `require.ensure` array. - * This means: make it available, but don't execute it - * webpack will load it on demand -* `b` and `d` are required via CommonJs in the `require.ensure` callback - * webpack detects that these are in the on-demand-callback and - * will load them on demand - * webpacks optimizer can optimize `b` away - * as it is already available through the parent chunks +- `a` and `b` are required normally via CommonJS +- `c` is depended through the `require.ensure` array. + - This means: make it available, but don't execute it + - webpack will load it on demand +- `b` and `d` are required via CommonJs in the `require.ensure` callback + - webpack detects that these are in the on-demand-callback and + - will load them on demand + - webpacks optimizer can optimize `b` away + - as it is already available through the parent chunks You can see that webpack outputs two files/chunks: -* `output.js` is the entry chunk and contains - * the module system - * chunk loading logic - * the entry point `example.js` - * module `a` - * module `b` -* `1.output.js` is an additional chunk (on demand loaded) and contains - * module `c` - * module `d` +- `output.js` is the entry chunk and contains + - the module system + - chunk loading logic + - the entry point `example.js` + - module `a` + - module `b` +- `1.output.js` is an additional chunk (on demand loaded) and contains + - module `c` + - module `d` You can see that chunks are loaded via JSONP. The additional chunks are pretty small and minimize well. # example.js -``` javascript +```javascript var a = require("a"); var b = require("b"); require.ensure(["c"], function(require) { @@ -35,12 +35,11 @@ require.ensure(["c"], function(require) { }); ``` - # dist/output.js
/******/ (function(modules) { /* webpackBootstrap */ }) -``` javascript +```javascript /******/ (function(modules) { // webpackBootstrap /******/ // install a JSONP callback for chunk loading /******/ function webpackJsonpCallback(data) { @@ -243,7 +242,7 @@ require.ensure(["c"], function(require) {
-``` javascript +```javascript /******/ ([ /* 0 */ /*!***************************!*\ @@ -285,7 +284,7 @@ __webpack_require__.e(/*! require.ensure */ 1).then((function(require) { # dist/1.output.js -``` javascript +```javascript (window["webpackJsonp"] = window["webpackJsonp"] || []).push([[1],[ /* 0 */, /* 1 */, @@ -315,7 +314,7 @@ __webpack_require__.e(/*! require.ensure */ 1).then((function(require) { Minimized -``` javascript +```javascript (window.webpackJsonp=window.webpackJsonp||[]).push([[1],[,,,function(n,o){},function(n,o){}]]); ``` diff --git a/examples/coffee-script/README.md b/examples/coffee-script/README.md index 24461d8c91b..4e9a09ffe43 100644 --- a/examples/coffee-script/README.md +++ b/examples/coffee-script/README.md @@ -1,13 +1,12 @@ - # example.js -``` javascript +```javascript console.log(require("./cup1")); ``` # cup1.coffee -``` coffee-script +```coffee-script module.exports = cool: "stuff" answer: 42 @@ -17,7 +16,7 @@ module.exports = # cup2.coffee -``` coffee-script +```coffee-script console.log "yeah coffee-script" module.exports = 42 @@ -27,7 +26,7 @@ module.exports = 42
/******/ (function(modules) { /* webpackBootstrap */ }) -``` javascript +```javascript /******/ (function(modules) { // webpackBootstrap /******/ // The module cache /******/ var installedModules = {}; @@ -118,7 +117,7 @@ module.exports = 42
-``` javascript +```javascript /******/ ([ /* 0 */ /*!********************!*\ @@ -200,4 +199,4 @@ chunk {0} output.js (main) 206 bytes [entry] [rendered] single entry ./example.js main [2] ./cup1.coffee 118 bytes {0} [built] cjs require ./cup1 [1] ./example.js 1:12-29 -``` \ No newline at end of file +``` diff --git a/examples/common-chunk-and-vendor-chunk/README.md b/examples/common-chunk-and-vendor-chunk/README.md index 27cda56901d..b29c8c6e5c6 100644 --- a/examples/common-chunk-and-vendor-chunk/README.md +++ b/examples/common-chunk-and-vendor-chunk/README.md @@ -33,7 +33,7 @@ With this bundle configuration, you would load your third party libraries, then # webpack.config.js -``` javascript +```javascript var path = require("path"); module.exports = { @@ -71,7 +71,7 @@ module.exports = { # dist/vendor.js -``` javascript +```javascript (window["webpackJsonp"] = window["webpackJsonp"] || []).push([[1],{ /***/ 1: @@ -101,7 +101,7 @@ module.exports = "vendor2"; # dist/commons~pageA~pageB~pageC.js -``` javascript +```javascript (window["webpackJsonp"] = window["webpackJsonp"] || []).push([[2],{ /***/ 3: @@ -120,7 +120,7 @@ module.exports = "utility2"; # dist/commons~pageB~pageC.js -``` javascript +```javascript (window["webpackJsonp"] = window["webpackJsonp"] || []).push([[4],{ /***/ 6: @@ -141,7 +141,7 @@ module.exports = "utility3";
/******/ (function(modules) { /* webpackBootstrap */ }) -``` javascript +```javascript /******/ (function(modules) { // webpackBootstrap /******/ // install a JSONP callback for chunk loading /******/ function webpackJsonpCallback(data) { @@ -300,7 +300,7 @@ module.exports = "utility3";
-``` javascript +```javascript /******/ ([ /* 0 */ /*!******************!*\ @@ -333,7 +333,7 @@ module.exports = "utility1"; # dist/pageB.js -``` javascript +```javascript /******/ (function(modules) { // webpackBootstrap /******/ // install a JSONP callback for chunk loading /******/ function webpackJsonpCallback(data) { @@ -511,7 +511,7 @@ module.exports = "pageB"; # dist/pageC.js -``` javascript +```javascript /******/ (function(modules) { // webpackBootstrap /******/ // install a JSONP callback for chunk loading /******/ function webpackJsonpCallback(data) { diff --git a/examples/common-chunk-grandchildren/README.md b/examples/common-chunk-grandchildren/README.md index 69cbd3b32e6..509625a48ae 100644 --- a/examples/common-chunk-grandchildren/README.md +++ b/examples/common-chunk-grandchildren/README.md @@ -1,28 +1,27 @@ This example illustrates how common modules from deep ancestors of an entry point can be split into a separate common chunk -* `pageA` and `pageB` are dynamically required -* `pageC` and `pageA` both require the `reusableComponent` -* `pageB` dynamically requires `PageC` +- `pageA` and `pageB` are dynamically required +- `pageC` and `pageA` both require the `reusableComponent` +- `pageB` dynamically requires `PageC` You can see that webpack outputs five files/chunks: -* `output.js` is the entry chunk and contains - * the module system - * chunk loading logic - * the entry point `example.js` -* `0.output.js` is an additional chunk - * module `reusableComponent` -* `1.output.js` is an additional chunk - * module `pageB` -* `2.output.js` is an additional chunk - * module `pageA` -* `3.output.js` is an additional chunk - * module `pageC` - +- `output.js` is the entry chunk and contains + - the module system + - chunk loading logic + - the entry point `example.js` +- `0.output.js` is an additional chunk + - module `reusableComponent` +- `1.output.js` is an additional chunk + - module `pageB` +- `2.output.js` is an additional chunk + - module `pageA` +- `3.output.js` is an additional chunk + - module `pageC` # example.js -``` javascript +```javascript var main = function() { console.log("Main class"); require.ensure([], () => { @@ -40,7 +39,7 @@ main(); # pageA.js -``` javascript +```javascript var reusableComponent = require("./reusableComponent"); module.exports = function() { @@ -51,7 +50,7 @@ module.exports = function() { # pageB.js -``` javascript +```javascript module.exports = function() { console.log("Page B"); require.ensure([], ()=>{ @@ -63,7 +62,7 @@ module.exports = function() { # pageC.js -``` javascript +```javascript var reusableComponent = require("./reusableComponent"); module.exports = function() { @@ -74,7 +73,7 @@ module.exports = function() { # reusableComponent.js -``` javascript +```javascript module.exports = function() { console.log("reusable Component"); }; @@ -82,7 +81,7 @@ module.exports = function() { # webpack.config.js -``` javascript +```javascript "use strict"; const path = require("path"); @@ -108,7 +107,7 @@ module.exports = {
/******/ (function(modules) { /* webpackBootstrap */ }) -``` javascript +```javascript /******/ (function(modules) { // webpackBootstrap /******/ // install a JSONP callback for chunk loading /******/ function webpackJsonpCallback(data) { @@ -311,7 +310,7 @@ module.exports = {
-``` javascript +```javascript /******/ ([ /* 0 */ /*!**************************!*\ @@ -352,7 +351,7 @@ main(); # dist/0.output.js -``` javascript +```javascript (window["webpackJsonp"] = window["webpackJsonp"] || []).push([[0],{ /***/ 4: @@ -374,7 +373,7 @@ module.exports = function() { # dist/2.output.js -``` javascript +```javascript (window["webpackJsonp"] = window["webpackJsonp"] || []).push([[2],{ /***/ 2: @@ -399,7 +398,7 @@ module.exports = function() { # dist/3.output.js -``` javascript +```javascript (window["webpackJsonp"] = window["webpackJsonp"] || []).push([[3],{ /***/ 3: @@ -425,7 +424,7 @@ module.exports = function() { # dist/4.output.js -``` javascript +```javascript (window["webpackJsonp"] = window["webpackJsonp"] || []).push([[4],{ /***/ 5: diff --git a/examples/commonjs/README.md b/examples/commonjs/README.md index 52b013a60af..1b02600ca48 100644 --- a/examples/commonjs/README.md +++ b/examples/commonjs/README.md @@ -8,7 +8,7 @@ You can also see the info messages webpack prints to console (for both normal an # example.js -``` javascript +```javascript const inc = require('./increment').increment; const a = 1; inc(a); // 2 @@ -16,7 +16,7 @@ inc(a); // 2 # increment.js -``` javascript +```javascript const add = require('./math').add; exports.increment = function(val) { return add(val, 1); @@ -25,7 +25,7 @@ exports.increment = function(val) { # math.js -``` javascript +```javascript exports.add = function() { var sum = 0, i = 0, args = arguments, l = args.length; while (i < l) { @@ -39,7 +39,7 @@ exports.add = function() {
/******/ (function(modules) { /* webpackBootstrap */ }) -``` javascript +```javascript /******/ (function(modules) { // webpackBootstrap /******/ // The module cache /******/ var installedModules = {}; @@ -130,7 +130,7 @@ exports.add = function() {
-``` javascript +```javascript /******/ ([ /* 0 */ /*!********************!*\ @@ -214,4 +214,4 @@ chunk {0} output.js (main) 326 bytes [entry] [rendered] cjs require ./increment [0] ./example.js 1:12-34 [2] ./math.js 156 bytes {0} [built] cjs require ./math [1] ./increment.js 1:12-29 -``` \ No newline at end of file +``` diff --git a/examples/dll-app-and-vendor/0-vendor/README.md b/examples/dll-app-and-vendor/0-vendor/README.md index b890feb7902..927a0ed3445 100644 --- a/examples/dll-app-and-vendor/0-vendor/README.md +++ b/examples/dll-app-and-vendor/0-vendor/README.md @@ -8,7 +8,7 @@ A manifest is created which includes mappings from module names to internal ids. ### webpack.config.js -``` javascript +```javascript var path = require("path"); var webpack = require("../../../"); @@ -32,7 +32,7 @@ module.exports = { # example-vendor -``` javascript +```javascript export function square(n) { return n * n; } @@ -40,7 +40,7 @@ export function square(n) { # dist/vendor.js -``` javascript +```javascript var vendor_lib_a132d30959ef28c3f004 = ```
/******/ (function(modules) { /* webpackBootstrap */ }) @@ -171,7 +171,7 @@ function square(n) { # dist/vendor-manifest.json -``` javascript +```javascript {"name":"vendor_lib_a132d30959ef28c3f004","content":{"../node_modules/example-vendor.js":{"id":1,"buildMeta":{"exportsType":"namespace","providedExports":["square"]}}}} ``` @@ -208,4 +208,3 @@ chunk {0} vendor.js (main) 57 bytes [entry] [rendered] DllPlugin + 1 hidden module ``` - diff --git a/examples/dll-app-and-vendor/1-app/README.md b/examples/dll-app-and-vendor/1-app/README.md index a05c97819cd..b9d5190435f 100644 --- a/examples/dll-app-and-vendor/1-app/README.md +++ b/examples/dll-app-and-vendor/1-app/README.md @@ -4,7 +4,7 @@ The previously built vendor dll is used. The DllReferencePlugin reads the conten # webpack.config.js -``` javascript +```javascript var path = require("path"); var webpack = require("../../../"); @@ -27,7 +27,7 @@ module.exports = { # example-app.js -``` javascript +```javascript import { square } from "example-vendor"; console.log(square(7)); @@ -36,7 +36,7 @@ console.log(new square(7)); # example.html -``` html +```html @@ -50,7 +50,7 @@ console.log(new square(7));
/******/ (function(modules) { /* webpackBootstrap */ }) -``` javascript +```javascript /******/ (function(modules) { // webpackBootstrap /******/ // The module cache /******/ var installedModules = {}; @@ -141,7 +141,7 @@ console.log(new square(7));
-``` javascript +```javascript /******/ ([ /* 0 */ /*!************************!*\ diff --git a/examples/dll-entry-only/README.md b/examples/dll-entry-only/README.md index ea5b2b54f80..20146b6f00b 100644 --- a/examples/dll-entry-only/README.md +++ b/examples/dll-entry-only/README.md @@ -24,17 +24,16 @@ from the corresponding modules `a.js`, `b.js` and `cjs.js`. None of the other mo Also see [tree shaking](https://github.com/webpack/webpack/tree/master/examples/harmony-unused) and [scope hoisting example](https://github.com/webpack/webpack/tree/master/examples/scope-hoisting). - # example.js -``` javascript +```javascript export { a, b } from "./a"; export { c } from "./cjs"; ``` # webpack.config.js -``` javascript +```javascript var path = require("path"); var webpack = require("../../"); @@ -63,7 +62,7 @@ module.exports = { # dist/dll.js -``` javascript +```javascript var dll_3eea518f6d09aac41ec7 = ```
/******/ (function(modules) { /* webpackBootstrap */ }) @@ -224,7 +223,7 @@ var cjs = __webpack_require__(1); # dist/dll-manifest.json -``` javascript +```javascript {"name":"dll_3eea518f6d09aac41ec7","content":{"./example.js":{"id":2,"buildMeta":{"exportsType":"namespace","providedExports":["a","b","c"]}}}} ``` diff --git a/examples/dll-user/README.md b/examples/dll-user/README.md index 63aa7f3958e..7b752df98aa 100644 --- a/examples/dll-user/README.md +++ b/examples/dll-user/README.md @@ -6,7 +6,7 @@ This is the _user_ bundle, which uses the manifest from [dll-reference example]( # webpack.config.js -``` javascript +```javascript var path = require("path"); var webpack = require("../../"); module.exports = { @@ -27,7 +27,7 @@ module.exports = { # example.js -``` javascript +```javascript console.log(require("../dll/alpha")); console.log(require("../dll/a")); @@ -42,7 +42,7 @@ console.log(require("module"));
/******/ (function(modules) { /* webpackBootstrap */ }) -``` javascript +```javascript /******/ (function(modules) { // webpackBootstrap /******/ // The module cache /******/ var installedModules = {}; @@ -133,7 +133,7 @@ console.log(require("module"));
-``` javascript +```javascript /******/ ([ /* 0 */ /*!********************!*\ diff --git a/examples/dll/README.md b/examples/dll/README.md index ba0506e1e77..52db4911d0f 100644 --- a/examples/dll/README.md +++ b/examples/dll/README.md @@ -4,10 +4,9 @@ This is the _reference_ bundle (with the manifests) for [dll user example](https://github.com/webpack/webpack/tree/master/examples/dll-user) - # webpack.config.js -``` javascript +```javascript var path = require("path"); var webpack = require("../../"); module.exports = { @@ -35,7 +34,7 @@ module.exports = { # dist/MyDll.alpha.js -``` javascript +```javascript var alpha_d61ee01b5c383d26e2c0 = ```
/******/ (function(modules) { /* webpackBootstrap */ }) @@ -182,7 +181,7 @@ module.exports = "module"; # dist/alpha-manifest.json -``` javascript +```javascript {"name":"alpha_d61ee01b5c383d26e2c0","content":{"./alpha.js":{"id":1,"buildMeta":{"providedExports":true}},"./a.js":{"id":2,"buildMeta":{"providedExports":true}},"../node_modules/module.js":{"id":3,"buildMeta":{"providedExports":true}}}} ``` diff --git a/examples/explicit-vendor-chunk/README.md b/examples/explicit-vendor-chunk/README.md index 864c68116b6..2a50992c9b7 100644 --- a/examples/explicit-vendor-chunk/README.md +++ b/examples/explicit-vendor-chunk/README.md @@ -1,6 +1,6 @@ # webpack.config.js -``` javascript +```javascript var path = require("path"); var webpack = require("../../"); module.exports = [ @@ -45,7 +45,7 @@ module.exports = [ # dist/vendor.js -``` javascript +```javascript var vendor_d9f5eab93a0e9010218f = ```
/******/ (function(modules) { /* webpackBootstrap */ }) @@ -181,7 +181,7 @@ module.exports = "Vendor2"; # dist/pageA.js -``` javascript +```javascript /******/ (function(modules) { // webpackBootstrap /******/ // The module cache /******/ var installedModules = {}; diff --git a/examples/externals/README.md b/examples/externals/README.md index f263f494613..7b3be60b03a 100644 --- a/examples/externals/README.md +++ b/examples/externals/README.md @@ -9,7 +9,7 @@ In the simple case we just need to specify a string (`"add"`). Then it's resolve In the complex case we specify different values for each environment: | environment | config value | resolved as | -|--------------------|--------------------------|------------------------------| +| ------------------ | ------------------------ | ---------------------------- | | CommonJs (strict) | `["./math", "subtract"]` | `require("./math").subtract` | | CommonJs (node.js) | `"./subtract"` | `require("./subtract")` | | AMD | `"subtract"` | `define(["subtract"], ...)` | @@ -17,7 +17,7 @@ In the complex case we specify different values for each environment: # example.js -``` javascript +```javascript var add = require("add"); var subtract = require("subtract"); @@ -26,7 +26,7 @@ exports.exampleValue = subtract(add(42, 2), 2); # webpack.config.js -``` javascript +```javascript module.exports = { // mode: "development || "production", output: { @@ -48,7 +48,7 @@ module.exports = { # dist/output.js -``` javascript +```javascript (function webpackUniversalModuleDefinition(root, factory) { if(typeof exports === 'object' && typeof module === 'object') module.exports = factory(require("add"), require("./subtract")); @@ -228,4 +228,4 @@ chunk {0} output.js (main) 194 bytes [entry] [rendered] cjs require add [0] ./example.js 1:10-24 [2] external {"root":"subtract","commonjs2":"./subtract","commonjs":["./math","subtract"],"amd":"subtract"} 42 bytes {0} [built] cjs require subtract [0] ./example.js 2:15-34 -``` \ No newline at end of file +``` diff --git a/examples/extra-async-chunk-advanced/README.md b/examples/extra-async-chunk-advanced/README.md index 290866ed63d..365c4ff0df1 100644 --- a/examples/extra-async-chunk-advanced/README.md +++ b/examples/extra-async-chunk-advanced/README.md @@ -1,8 +1,6 @@ - - # example.js -``` javascript +```javascript require(["./a", "./b", "./c"], function(a, b, c) {}); require.ensure(["./a"], function(require) { @@ -23,7 +21,7 @@ require.ensure(["./a", "./e"], function(require) { # webpack.config.js -``` javascript +```javascript module.exports = { // mode: "development || "production", optimization: { @@ -39,7 +37,7 @@ module.exports = {
/******/ (function(modules) { /* webpackBootstrap */ }) -``` javascript +```javascript /******/ (function(modules) { // webpackBootstrap /******/ // install a JSONP callback for chunk loading /******/ function webpackJsonpCallback(data) { @@ -242,7 +240,7 @@ module.exports = {
-``` javascript +```javascript /******/ ({ /***/ 2: diff --git a/examples/extra-async-chunk/README.md b/examples/extra-async-chunk/README.md index 0051d4f8e52..e00dfc54662 100644 --- a/examples/extra-async-chunk/README.md +++ b/examples/extra-async-chunk/README.md @@ -2,39 +2,38 @@ This example shows automatically created async commons chunks. The example entry references two chunks: -* entry chunk - * async require -> chunk X - * async require -> chunk Y -* chunk X - * module `a` - * module `b` - * module `c` -* chunk Y - * module `a` - * module `b` - * module `d` +- entry chunk + - async require -> chunk X + - async require -> chunk Y +- chunk X + - module `a` + - module `b` + - module `c` +- chunk Y + - module `a` + - module `b` + - module `d` These chunks share modules `a` and `b`. The optimization extract these into chunk Z: Note: Actually the optimization compare size of chunk Z to some minimum value, but this is disabled from this example. In practice there is no configuration needed for this. -* entry chunk - * async require -> chunk X & Z - * async require -> chunk Y & Z -* chunk X - * module `c` -* chunk Y - * module `d` -* chunk Z - * module `a` - * module `b` +- entry chunk + - async require -> chunk X & Z + - async require -> chunk Y & Z +- chunk X + - module `c` +- chunk Y + - module `d` +- chunk Z + - module `a` + - module `b` Pretty useful for a router in a SPA. - # example.js -``` javascript +```javascript // a chunks with a, b, c require(["./a", "./b", "./c"]); @@ -49,7 +48,7 @@ require.ensure(["./a"], function(require) {
/******/ (function(modules) { /* webpackBootstrap */ }) -``` javascript +```javascript /******/ (function(modules) { // webpackBootstrap /******/ // install a JSONP callback for chunk loading /******/ function webpackJsonpCallback(data) { @@ -252,7 +251,7 @@ require.ensure(["./a"], function(require) {
-``` javascript +```javascript /******/ ({ /***/ 2: @@ -279,7 +278,7 @@ Promise.all(/*! require.ensure */[__webpack_require__.e(0), __webpack_require__. # dist/0.output.js -``` javascript +```javascript (window["webpackJsonp"] = window["webpackJsonp"] || []).push([[0],[ /* 0 */ /*!**************!*\ @@ -306,7 +305,7 @@ module.exports = "b"; # dist/2.output.js -``` javascript +```javascript (window["webpackJsonp"] = window["webpackJsonp"] || []).push([[2],{ /***/ 3: @@ -325,7 +324,7 @@ module.exports = "c"; # dist/3.output.js -``` javascript +```javascript (window["webpackJsonp"] = window["webpackJsonp"] || []).push([[3],{ /***/ 4: diff --git a/examples/harmony-interop/README.md b/examples/harmony-interop/README.md index a46fadb4d6a..6ce8033b128 100644 --- a/examples/harmony-interop/README.md +++ b/examples/harmony-interop/README.md @@ -1,7 +1,6 @@ - # example.js -``` javascript +```javascript // harmony module // import from CommonJs module @@ -22,7 +21,7 @@ import "./example2"; # fs.js -``` javascript +```javascript // an example CommonJs module // content is omitted for brevity exports.readFile = function() {}; @@ -34,7 +33,7 @@ exports.readFile = function() {}; # reexport-commonjs.js -``` javascript +```javascript // reexport a CommonJs module export * from "./fs"; // Note that the default export doesn't reexport via export * @@ -46,7 +45,7 @@ export * from "./fs"; # example2.js -``` javascript +```javascript // CommonJs module // require a harmony module @@ -58,7 +57,7 @@ var namedExport = module.named; # harmony.js -``` javascript +```javascript // just some exports export default "default"; export var named = "named"; @@ -68,7 +67,7 @@ export var named = "named";
/******/ (function(modules) { /* webpackBootstrap */ }) -``` javascript +```javascript /******/ (function(modules) { // webpackBootstrap /******/ // The module cache /******/ var installedModules = {}; @@ -159,7 +158,7 @@ export var named = "named";
-``` javascript +```javascript /******/ ([ /* 0 */ /*!********************!*\ @@ -336,4 +335,4 @@ chunk {0} output.js (main) 1.13 KiB [entry] [rendered] [4] ./harmony.js 75 bytes {0} [built] [exports: default, named] cjs require ./harmony [3] ./example2.js 4:13-33 -``` \ No newline at end of file +``` diff --git a/examples/harmony-library/README.md b/examples/harmony-library/README.md index 922b89f33fc..9d00f25c621 100644 --- a/examples/harmony-library/README.md +++ b/examples/harmony-library/README.md @@ -1,6 +1,6 @@ # webpack.config.js -``` javascript +```javascript var path = require("path"); module.exports = { // mode: "development || "production", @@ -16,7 +16,7 @@ module.exports = { # dist/MyLibrary.umd.js -``` javascript +```javascript (function webpackUniversalModuleDefinition(root, factory) { if(typeof exports === 'object' && typeof module === 'object') module.exports = factory(); diff --git a/examples/harmony-unused/README.md b/examples/harmony-unused/README.md index 9d142d95f66..69aa9acd167 100644 --- a/examples/harmony-unused/README.md +++ b/examples/harmony-unused/README.md @@ -1,4 +1,4 @@ -This example demonstrates how webpack tracks the using of ES6 imports and exports. Only used exports are emitted to the resulting bundle. The minimizing step then removes the declarations because they are unused. +This example demonstrates how webpack tracks the using of ES6 imports and exports. Only used exports are emitted to the resulting bundle. The minimizing step then removes the declarations because they are unused. Excluding unused exports from bundles is known as "[tree-shaking](http://www.2ality.com/2015/12/webpack-tree-shaking.html)". @@ -8,7 +8,7 @@ In addition to that, `library.js` simulates an entry point to a big library. `li # example.js -``` javascript +```javascript import { add } from './math'; import * as library from "./library"; @@ -18,7 +18,7 @@ library.reexportedMultiply(1, 2); # math.js -``` javascript +```javascript export function add() { var sum = 0, i = 0, args = arguments, l = args.length; while (i < l) { @@ -42,7 +42,7 @@ export function list() { # library.js -``` javascript +```javascript export { a, b, c } from "./abc"; export { add as reexportedAdd, multiply as reexportedMultiply } from "./math"; ``` @@ -51,7 +51,7 @@ export { add as reexportedAdd, multiply as reexportedMultiply } from "./math";
/******/ (function(modules) { /* webpackBootstrap */ }) -``` javascript +```javascript /******/ (function(modules) { // webpackBootstrap /******/ // The module cache /******/ var installedModules = {}; @@ -142,7 +142,7 @@ export { add as reexportedAdd, multiply as reexportedMultiply } from "./math";
-``` javascript +```javascript /******/ ([ /* 0 */ /*!********************!*\ @@ -245,7 +245,7 @@ function c() { console.log("c"); } # dist/output.js -``` javascript +```javascript !function(t){var e={};function n(r){if(e[r])return e[r].exports;var u=e[r]={i:r,l:!1,exports:{}};return t[r].call(u.exports,u,u.exports,n),u.l=!0,u.exports}n.m=t,n.c=e,n.d=function(t,e,r){n.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:r})},n.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},n.t=function(t,e){if(1&e&&(t=n(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var u in t)n.d(r,u,function(e){return t[e]}.bind(null,u));return r},n.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return n.d(e,"a",e),e},n.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},n.p="dist/",n(n.s=3)}([function(t,e,n){"use strict";function r(){for(var t=0,e=0,n=arguments,r=n.length;e/******/ (function(modules) { /* webpackBootstrap */ }) -``` javascript +```javascript /******/ (function(modules) { // webpackBootstrap /******/ // install a JSONP callback for chunk loading /******/ function webpackJsonpCallback(data) { @@ -228,7 +227,7 @@ export function increment(val) {
-``` javascript +```javascript /******/ ([ /* 0 */ /*!**********************!*\ @@ -355,4 +354,4 @@ chunk {1} 1.output.js 24 bytes <{0}> [rendered] [1] ./async-loaded.js 24 bytes {1} [built] [exports: answer] import() ./async-loaded ./example.js 6:0-24 -``` \ No newline at end of file +``` diff --git a/examples/http2-aggressive-splitting/README.md b/examples/http2-aggressive-splitting/README.md index bf09f9ef5b9..2c426c27951 100644 --- a/examples/http2-aggressive-splitting/README.md +++ b/examples/http2-aggressive-splitting/README.md @@ -16,7 +16,7 @@ The compression improves with bigger `maxSize`, as gzip works better for bigger The backward compatibility (non HTTP2 client) improves with bigger `maxSize`, as the number of requests decreases. -``` js +```js var path = require("path"); var webpack = require("../../"); module.exports = { diff --git a/examples/hybrid-routing/README.md b/examples/hybrid-routing/README.md index e3289f16a52..9c8ac86ffc8 100644 --- a/examples/hybrid-routing/README.md +++ b/examples/hybrid-routing/README.md @@ -1,6 +1,6 @@ # webpack.config.js -``` javascript +```javascript var path = require("path"); module.exports = { // mode: "development || "production", @@ -30,7 +30,7 @@ module.exports = { # aEntry.js -``` javascript +```javascript // Just show the page "a" var render = require("./render"); render(require("./aPage")); @@ -40,7 +40,7 @@ render(require("./aPage")); # aPage.js -``` javascript +```javascript module.exports = function() { return "This is page A."; }; @@ -50,7 +50,7 @@ module.exports = function() { # router.js -``` javascript +```javascript var render = require("./render"); // Event when another page should be opened @@ -73,7 +73,7 @@ window.onLinkToPage = function onLinkToPage(name) { // name is "a" or "b" # pageA.html -``` html +```html @@ -86,7 +86,7 @@ window.onLinkToPage = function onLinkToPage(name) { // name is "a" or "b" # dist/pageA~pageB.chunk.js -``` javascript +```javascript (window["webpackJsonp"] = window["webpackJsonp"] || []).push([[2],[ /* 0 */ /*!*******************!*\ @@ -177,7 +177,7 @@ module.exports = webpackAsyncContext;
/******/ (function(modules) { /* webpackBootstrap */ }) -``` javascript +```javascript /******/ (function(modules) { // webpackBootstrap /******/ // install a JSONP callback for chunk loading /******/ function webpackJsonpCallback(data) { @@ -402,7 +402,7 @@ module.exports = webpackAsyncContext;
-``` javascript +```javascript /******/ ({ /***/ 4: @@ -436,7 +436,7 @@ render(__webpack_require__(/*! ./aPage */ 1)); # dist/aPage.chunk.js -``` javascript +```javascript (window["webpackJsonp"] = window["webpackJsonp"] || []).push([[0],[ /* 0 */, /* 1 */ diff --git a/examples/i18n/README.md b/examples/i18n/README.md index 018b1e50a51..95371b1afe6 100644 --- a/examples/i18n/README.md +++ b/examples/i18n/README.md @@ -4,17 +4,16 @@ The `webpack.config.js` exports an array of all config combinations that should The I18nPlugin replaces every occurrence of the i18n function `__(...)` with a const string. i. e. `__("Hello World")` with `"Hello World"` resp. `"Hallo Welt"`. - # example.js -``` javascript +```javascript console.log(__("Hello World")); console.log(__("Missing Text")); ``` # webpack.config.js -``` javascript +```javascript var path = require("path"); var I18nPlugin = require("i18n-webpack-plugin"); var languages = { @@ -37,7 +36,7 @@ module.exports = Object.keys(languages).map(function(language) { # de.json -``` javascript +```javascript { "Hello World": "Hallo Welt" } @@ -47,7 +46,7 @@ module.exports = Object.keys(languages).map(function(language) {
/******/ (function(modules) { /* webpackBootstrap */ }) -``` javascript +```javascript /******/ (function(modules) { // webpackBootstrap /******/ // The module cache /******/ var installedModules = {}; @@ -138,7 +137,7 @@ module.exports = Object.keys(languages).map(function(language) {
-``` javascript +```javascript /******/ ([ /* 0 */ /*!********************!*\ @@ -156,7 +155,7 @@ console.log("Missing Text"); # dist/en.output.js -``` javascript +```javascript /******/ (function(modules) { // webpackBootstrap /******/ // The module cache /******/ var installedModules = {}; @@ -314,4 +313,4 @@ Child de: WARNING in ./example.js Missing localization: Missing Text -``` \ No newline at end of file +``` diff --git a/examples/loader/README.md b/examples/loader/README.md index 908c10aacbb..97404460049 100644 --- a/examples/loader/README.md +++ b/examples/loader/README.md @@ -1,6 +1,6 @@ # example.js -``` javascript +```javascript // use our loader console.dir(require("./loader!./file")); @@ -11,13 +11,13 @@ console.dir(require("!css-loader!./test.css")); // manual # file.js -``` javascript +```javascript exports.foo = "bar"; ``` # loader.js -``` javascript +```javascript module.exports = function(content) { return "exports.answer = 42;\n" + content; } @@ -25,7 +25,7 @@ module.exports = function(content) { # test.css -``` css +```css .some-class { color: hotpink; } @@ -35,7 +35,7 @@ module.exports = function(content) {
/******/ (function(modules) { /* webpackBootstrap */ }) -``` javascript +```javascript /******/ (function(modules) { // webpackBootstrap /******/ // The module cache /******/ var installedModules = {}; @@ -126,7 +126,7 @@ module.exports = function(content) {
-``` javascript +```javascript /******/ ([ /* 0 */ /*!********************!*\ diff --git a/examples/many-pages/README.md b/examples/many-pages/README.md index def37780c9c..a98348042ec 100644 --- a/examples/many-pages/README.md +++ b/examples/many-pages/README.md @@ -6,15 +6,15 @@ This example application contains 7 pages, each of them importing 1-3 modules fr The following configuration is used: -* `optimization.splitChunks.chunks: "all"` - This opt-in into automatic splitting of initial chunks which is off by default -* `optimization.splitChunks.maxInitial/AsyncRequests: 20` - This opt-in into a HTTP2 optimized splitting mode by increasing the allowed amount of requests. Browser only supports 6 requests in parallel for HTTP1.1. +- `optimization.splitChunks.chunks: "all"` - This opt-in into automatic splitting of initial chunks which is off by default +- `optimization.splitChunks.maxInitial/AsyncRequests: 20` - This opt-in into a HTTP2 optimized splitting mode by increasing the allowed amount of requests. Browser only supports 6 requests in parallel for HTTP1.1. # Interpreting the result -* `pageA.js` the normal output files for the entrypoint `pageA` -* `vendors~pageD~pageE~pageF~pageG.js` vendor libs shared by these pages extracted into a separate output file when larger then the threshold in size -* `vendors~pageA.js` vendors only used by a single page but larger than the threshold in size -* `pageA~pageD~pageF.js` application modules shared by these pages and larger than the threshold in size +- `pageA.js` the normal output files for the entrypoint `pageA` +- `vendors~pageD~pageE~pageF~pageG.js` vendor libs shared by these pages extracted into a separate output file when larger then the threshold in size +- `vendors~pageA.js` vendors only used by a single page but larger than the threshold in size +- `pageA~pageD~pageF.js` application modules shared by these pages and larger than the threshold in size The threshold is here 40 bytes, but by default (in a real application) 30kb. @@ -138,4 +138,4 @@ chunk {12} vendors~pageB.js (vendors~pageB) 43 bytes ={2}= ={5}= [initial] [re chunk {13} vendors~pageC.js (vendors~pageC) 43 bytes ={2}= ={6}= [initial] [rendered] split chunk (cache group: vendors) (name: vendors~pageC) > ./pages/c pageC 1 module -``` \ No newline at end of file +``` diff --git a/examples/mixed/README.md b/examples/mixed/README.md index 589c2404b16..441477aefe6 100644 --- a/examples/mixed/README.md +++ b/examples/mixed/README.md @@ -4,7 +4,7 @@ You see that everything is working nicely together. # example.js -``` javascript +```javascript // CommonJs-style requires var commonjs1 = require("./commonjs"); var amd1 = require("./amd"); @@ -23,7 +23,7 @@ require([ # amd.js -``` javascript +```javascript // AMD Module Format define( "app/amd", // anonym is also supported @@ -40,7 +40,7 @@ define( # commonjs.js -``` javascript +```javascript // CommonJs Module Format module.exports = 123; @@ -58,7 +58,7 @@ require(
/******/ (function(modules) { /* webpackBootstrap */ }) -``` javascript +```javascript /******/ (function(modules) { // webpackBootstrap /******/ // install a JSONP callback for chunk loading /******/ function webpackJsonpCallback(data) { @@ -261,7 +261,7 @@ require(
-``` javascript +```javascript /******/ ([ /* 0 */ /*!*********************!*\ @@ -346,7 +346,7 @@ __webpack_require__.e(/*! AMD require */ 1).then(function() { var __WEBPACK_AMD_ # dist/1.output.js -``` javascript +```javascript (window["webpackJsonp"] = window["webpackJsonp"] || []).push([[1],[ /* 0 */, /* 1 */, diff --git a/examples/multi-compiler/README.md b/examples/multi-compiler/README.md index 3820c1ccbef..349e54f8f0b 100644 --- a/examples/multi-compiler/README.md +++ b/examples/multi-compiler/README.md @@ -1,7 +1,6 @@ - # example.js -``` javascript +```javascript if(ENV === "mobile") { require("./mobile-stuff"); } @@ -10,7 +9,7 @@ console.log("Running " + ENV + " build"); # webpack.config.js -``` javascript +```javascript var path = require("path"); var webpack = require("../../"); module.exports = [ @@ -50,7 +49,7 @@ module.exports = [
/******/ (function(modules) { /* webpackBootstrap */ }) -``` javascript +```javascript /******/ (function(modules) { // webpackBootstrap /******/ // The module cache /******/ var installedModules = {}; @@ -141,7 +140,7 @@ module.exports = [
-``` javascript +```javascript /******/ ([ /* 0 */ /*!********************!*\ @@ -159,7 +158,7 @@ console.log("Running " + "desktop" + " build"); # dist/mobile.js -``` javascript +```javascript /******/ (function(modules) { // webpackBootstrap /******/ // The module cache /******/ var installedModules = {}; @@ -327,4 +326,4 @@ Child desktop: > ./example main [0] ./example.js 94 bytes {0} [built] single entry ./example main -``` \ No newline at end of file +``` diff --git a/examples/multi-part-library/README.md b/examples/multi-part-library/README.md index f21b253ba21..1573cdb566a 100644 --- a/examples/multi-part-library/README.md +++ b/examples/multi-part-library/README.md @@ -14,7 +14,7 @@ Note: When your library has dependencies that should not be included in the comp # webpack.config.js -``` javascript +```javascript var path = require("path"); module.exports = { // mode: "development || "production", @@ -33,7 +33,7 @@ module.exports = { # dist/MyLibrary.alpha.js -``` javascript +```javascript (function webpackUniversalModuleDefinition(root, factory) { if(typeof exports === 'object' && typeof module === 'object') module.exports = factory(); @@ -156,7 +156,7 @@ module.exports = "alpha"; # dist/MyLibrary.beta.js -``` javascript +```javascript (function webpackUniversalModuleDefinition(root, factory) { if(typeof exports === 'object' && typeof module === 'object') module.exports = factory(); diff --git a/examples/multiple-entry-points/README.md b/examples/multiple-entry-points/README.md index 441ee0eb5cc..8d20fa6d89c 100644 --- a/examples/multiple-entry-points/README.md +++ b/examples/multiple-entry-points/README.md @@ -8,29 +8,29 @@ You can use You can see the output files: -* `commons.js` contains: - * module `common.js` which is used in both pages -* `pageA.js` contains: (`pageB.js` is similar) - * the module system - * chunk loading logic - * the entry point `pageA.js` - * it would contain any other module that is only used by `pageA` -* `0.chunk.js` is an additional chunk which is used by both pages. It contains: - * module `shared.js` +- `commons.js` contains: + - module `common.js` which is used in both pages +- `pageA.js` contains: (`pageB.js` is similar) + - the module system + - chunk loading logic + - the entry point `pageA.js` + - it would contain any other module that is only used by `pageA` +- `0.chunk.js` is an additional chunk which is used by both pages. It contains: + - module `shared.js` You can also see the info that is printed to console. It shows among others: -* the generated files -* the chunks with file, name and id - * see lines starting with `chunk` -* the modules that are in the chunks -* the reasons why the modules are included -* the reasons why a chunk is created - * see lines starting with `>` +- the generated files +- the chunks with file, name and id + - see lines starting with `chunk` +- the modules that are in the chunks +- the reasons why the modules are included +- the reasons why a chunk is created + - see lines starting with `>` # pageA.js -``` javascript +```javascript var common = require("./common"); require(["./shared"], function(shared) { shared("This is page A"); @@ -39,7 +39,7 @@ require(["./shared"], function(shared) { # pageB.js -``` javascript +```javascript var common = require("./common"); require.ensure(["./shared"], function(require) { var shared = require("./shared"); @@ -49,7 +49,7 @@ require.ensure(["./shared"], function(require) { # webpack.config.js -``` javascript +```javascript module.exports = { // mode: "development || "production", entry: { @@ -74,7 +74,7 @@ module.exports = { # pageA.html -``` html +```html @@ -86,7 +86,7 @@ module.exports = { # dist/commons.js -``` javascript +```javascript (window["webpackJsonp"] = window["webpackJsonp"] || []).push([[0],[ /* 0 */ /*!*******************!*\ @@ -105,7 +105,7 @@ module.exports = "Common";
/******/ (function(modules) { /* webpackBootstrap */ }) -``` javascript +```javascript /******/ (function(modules) { // webpackBootstrap /******/ // install a JSONP callback for chunk loading /******/ function webpackJsonpCallback(data) { @@ -330,7 +330,7 @@ module.exports = "Common";
-``` javascript +```javascript /******/ ({ /***/ 2: @@ -352,7 +352,7 @@ __webpack_require__.e(/*! AMD require */ 1).then(function() { var __WEBPACK_AMD_ # dist/pageB.js -``` javascript +```javascript /******/ (function(modules) { // webpackBootstrap /******/ // install a JSONP callback for chunk loading /******/ function webpackJsonpCallback(data) { @@ -595,7 +595,7 @@ __webpack_require__.e(/*! require.ensure */ 1).then((function(require) { # dist/1.js -``` javascript +```javascript (window["webpackJsonp"] = window["webpackJsonp"] || []).push([[1],[ /* 0 */, /* 1 */ diff --git a/examples/named-chunks/README.md b/examples/named-chunks/README.md index d23ee69cd88..6051f1f758c 100644 --- a/examples/named-chunks/README.md +++ b/examples/named-chunks/README.md @@ -1,6 +1,6 @@ # example.js -``` javascript +```javascript var a = require("a"); require.ensure(["b"], function(require) { @@ -23,12 +23,11 @@ require.ensure(["b"], function(require) { }); ``` - # dist/output.js
/******/ (function(modules) { /* webpackBootstrap */ }) -``` javascript +```javascript /******/ (function(modules) { // webpackBootstrap /******/ // install a JSONP callback for chunk loading /******/ function webpackJsonpCallback(data) { @@ -231,7 +230,7 @@ require.ensure(["b"], function(require) {
-``` javascript +```javascript /******/ ([ /* 0 */, /* 1 */, @@ -280,7 +279,7 @@ __webpack_require__.e(/*! require.ensure */ 2).then((function(require) { # dist/1.output.js -``` javascript +```javascript (window["webpackJsonp"] = window["webpackJsonp"] || []).push([[1],[ /* 0 */ /*!***************************!*\ @@ -319,7 +318,7 @@ __webpack_require__.e(/*! require.ensure */ 2).then((function(require) { # dist/2.output.js -``` javascript +```javascript (window["webpackJsonp"] = window["webpackJsonp"] || []).push([[2],[ /* 0 */ /*!***************************!*\ diff --git a/examples/scope-hoisting/README.md b/examples/scope-hoisting/README.md index 86bfe034674..e7b6fe10742 100644 --- a/examples/scope-hoisting/README.md +++ b/examples/scope-hoisting/README.md @@ -8,9 +8,9 @@ All modules except `cjs` are EcmaScript modules. `cjs` is a CommonJs module. The interesting thing here is that putting all modules in single scope won't work, because of multiple reasons: -* Modules `lazy`, `c`, `d` and `cjs` need to be in a separate chunk -* Module `shared` is accessed by two chunks (different scopes) -* Module `cjs` is a CommonJs module +- Modules `lazy`, `c`, `d` and `cjs` need to be in a separate chunk +- Module `shared` is accessed by two chunks (different scopes) +- Module `cjs` is a CommonJs module ![](graph2.png) @@ -22,7 +22,7 @@ While module concatenation identifiers in modules are renamed to avoid conflicts # example.js -``` javascript +```javascript import { a, x, y } from "a"; import * as b from "b"; @@ -33,7 +33,7 @@ import("./lazy").then(function(lazy) { # lazy.js -``` javascript +```javascript export * from "c"; import * as d from "d"; export { d }; @@ -41,7 +41,7 @@ export { d }; # a.js -``` javascript +```javascript // module a export var a = "a"; export * from "shared"; @@ -49,7 +49,7 @@ export * from "shared"; # b.js -``` javascript +```javascript // module b export function a() { return "b"; @@ -58,7 +58,7 @@ export function a() { # c.js -``` javascript +```javascript // module c import { c as e } from "cjs"; @@ -69,21 +69,21 @@ export { x, y } from "shared"; # d.js -``` javascript +```javascript // module d export var a = "d"; ``` # cjs.js -``` javascript +```javascript // module cjs (commonjs) exports.c = "e"; ``` # shared.js -``` javascript +```javascript // shared module export var x = "x"; export * from "shared2"; @@ -91,16 +91,14 @@ export * from "shared2"; # shared2.js -``` javascript +```javascript // shared2 module export var y = "y"; ``` - - # webpack.config.js -``` javascript +```javascript module.exports = { // mode: "development" || "production", optimization: { @@ -111,14 +109,11 @@ module.exports = { }; ``` - - - # dist/output.js
/******/ (function(modules) { /* webpackBootstrap */ }) -``` javascript +```javascript /******/ (function(modules) { // webpackBootstrap /******/ // install a JSONP callback for chunk loading /******/ function webpackJsonpCallback(data) { @@ -321,7 +316,7 @@ module.exports = {
-``` javascript +```javascript /******/ ([ /* 0 */ /*!********************************************!*\ @@ -387,7 +382,7 @@ __webpack_require__.e(/*! import() */ 1).then(__webpack_require__.bind(null, /*! # dist/1.output.js -``` javascript +```javascript (window["webpackJsonp"] = window["webpackJsonp"] || []).push([[1],[ /* 0 */, /* 1 */, @@ -455,7 +450,7 @@ var a = "d"; Minimized -``` javascript +```javascript (window.webpackJsonp=window.webpackJsonp||[]).push([[1],[,,function(n,r){r.c="e"},function(n,r,t){"use strict";t.r(r);var c={};t.r(c),t.d(c,"a",function(){return e});var o=t(2),u=t(0),d=String.fromCharCode(o.c.charCodeAt(0)-2),e="d";t.d(r,"c",function(){return d}),t.d(r,"x",function(){return u.a}),t.d(r,"y",function(){return u.b}),t.d(r,"d",function(){return c})}]]); ``` diff --git a/examples/side-effects/README.md b/examples/side-effects/README.md index 6fa070ca4f9..b12020098d6 100644 --- a/examples/side-effects/README.md +++ b/examples/side-effects/README.md @@ -10,12 +10,12 @@ After being built by webpack, the output bundle contains `index.js` `a.js` `b.js Advantages: -* Smaller bundles -* Faster bootup +- Smaller bundles +- Faster bootup # example.js -``` javascript +```javascript import { a as a1, b as b1 } from "big-module"; import { a as a2, b as b2 } from "big-module-with-flag"; @@ -29,7 +29,7 @@ console.log( # node_modules/big-module/package.json -``` javascript +```javascript { "name": "big-module" } @@ -37,7 +37,7 @@ console.log( # node_modules/big-module-with-flag/package.json -``` javascript +```javascript { "name": "big-module-with-flag", "sideEffects": false @@ -46,7 +46,7 @@ console.log( # node_modules/big-module(-with-flag)/index.js -``` javascript +```javascript export { a } from "./a"; export { b } from "./b"; export { c } from "./c"; @@ -56,7 +56,7 @@ export { c } from "./c";
/******/ (function(modules) { /* webpackBootstrap */ }) -``` javascript +```javascript /******/ (function(modules) { // webpackBootstrap /******/ // The module cache /******/ var installedModules = {}; @@ -147,7 +147,7 @@ export { c } from "./c";
-``` javascript +```javascript /******/ ([ /* 0 */ /*!********************!*\ diff --git a/examples/source-map/README.md b/examples/source-map/README.md index 2d554477e61..f26dfaec99f 100644 --- a/examples/source-map/README.md +++ b/examples/source-map/README.md @@ -2,7 +2,7 @@ This example demonstrates various types of source-maps. # example.coffee -``` coffeescript +```coffeescript # Taken from http://coffeescript.org/ # Objects: @@ -18,7 +18,7 @@ race = (winner, runners...) -> # webpack.config.js -``` javascript +```javascript var path = require("path"); module.exports = [ @@ -51,7 +51,8 @@ module.exports = [ # Generated source-maps ## source-map.js and source-map.js.map -``` javascript + +```javascript (window["webpackJsonp"] = window["webpackJsonp"] || []).push([[1],[ /* 0 */ /*!*************************************************************!*\ @@ -84,12 +85,13 @@ race = function(winner, ...runners) { //# sourceMappingURL=bundle-source-map.js.map ``` -``` javascript +```javascript {"version":3,"sources":["webpack:///./example.coffee"],"names":[],"mappings":";;;;;;;;AAAA;;;AAAA;;AAGA,OACE;EAAA,MAAQ,IAAI,CAAC,IAAb;EACA,QAAQ,MADR;EAEA,MAAQ,SAAC,CAAD;WAAO,IAAI,OAAO,CAAP;EAAX;AAFR,EAJF;;;AASA,OAAO,SAAC,MAAD,KAAS,OAAT;SACL,MAAM,MAAN,EAAc,OAAd;AADK","file":"./bundle-source-map.js","sourcesContent":["# Taken from http://coffeescript.org/\n\n# Objects:\nmath =\n root: Math.sqrt\n square: square\n cube: (x) -> x * square x\n\n# Splats:\nrace = (winner, runners...) ->\n print winner, runners\n"],"sourceRoot":""} ``` ## hidden-source-map.js and hidden-source-map.js.map -``` javascript + +```javascript (window["webpackJsonp"] = window["webpackJsonp"] || []).push([[1],[ /* 0 */ /*!*************************************************************!*\ @@ -121,12 +123,13 @@ race = function(winner, ...runners) { ],[[0,0]]]); ``` -``` javascript +```javascript {"version":3,"sources":["webpack:///./example.coffee"],"names":[],"mappings":";;;;;;;;AAAA;;;AAAA;;AAGA,OACE;EAAA,MAAQ,IAAI,CAAC,IAAb;EACA,QAAQ,MADR;EAEA,MAAQ,SAAC,CAAD;WAAO,IAAI,OAAO,CAAP;EAAX;AAFR,EAJF;;;AASA,OAAO,SAAC,MAAD,KAAS,OAAT;SACL,MAAM,MAAN,EAAc,OAAd;AADK","file":"./bundle-hidden-source-map.js","sourcesContent":["# Taken from http://coffeescript.org/\n\n# Objects:\nmath =\n root: Math.sqrt\n square: square\n cube: (x) -> x * square x\n\n# Splats:\nrace = (winner, runners...) ->\n print winner, runners\n"],"sourceRoot":""} ``` ## inline-source-map.js -``` javascript + +```javascript (window["webpackJsonp"] = window["webpackJsonp"] || []).push([[1],[ /* 0 */ /*!*************************************************************!*\ @@ -160,12 +163,14 @@ race = function(winner, ...runners) { ``` ## nosources-source-map.js.map -``` javascript + +```javascript {"version":3,"sources":["webpack:///./example.coffee"],"names":[],"mappings":";;;;;;;;AAAA;;;AAAA;;AAGA,OACE;EAAA,MAAQ,IAAI,CAAC,IAAb;EACA,QAAQ,MADR;EAEA,MAAQ,SAAC,CAAD;WAAO,IAAI,OAAO,CAAP;EAAX;AAFR,EAJF;;;AASA,OAAO,SAAC,MAAD,KAAS,OAAT;SACL,MAAM,MAAN,EAAc,OAAd;AADK","file":"./bundle-nosources-source-map.js","sourceRoot":""} ``` ## eval-source-map.js -``` javascript + +```javascript (window["webpackJsonp"] = window["webpackJsonp"] || []).push([[1],[ /* 0 */ /*!*************************************************************!*\ @@ -181,7 +186,8 @@ eval("// Taken from http://coffeescript.org/\n\n// Objects:\nvar math, race;\n\n ``` ## eval.js -``` javascript + +```javascript (window["webpackJsonp"] = window["webpackJsonp"] || []).push([[1],[ /* 0 */ /*!*************************************************************!*\ @@ -197,7 +203,8 @@ eval("// Taken from http://coffeescript.org/\n\n// Objects:\nvar math, race;\n\n ``` ## cheap-eval-source-map.js -``` javascript + +```javascript (window["webpackJsonp"] = window["webpackJsonp"] || []).push([[1],[ /* 0 */ /*!*************************************************************!*\ @@ -213,7 +220,8 @@ eval("// Taken from http://coffeescript.org/\n\n// Objects:\nvar math, race;\n\n ``` ## cheap-module-eval-source-map.js -``` javascript + +```javascript (window["webpackJsonp"] = window["webpackJsonp"] || []).push([[1],[ /* 0 */ /*!*************************************************************!*\ @@ -229,12 +237,14 @@ eval("// Taken from http://coffeescript.org/\n\n// Objects:\nvar math, race;\n\n ``` ## cheap-module-source-map.js.map -``` javascript + +```javascript {"version":3,"file":"./bundle-cheap-module-source-map.js","sources":["webpack:///./example.coffee"],"sourcesContent":["# Taken from http://coffeescript.org/\n\n# Objects:\nmath =\n root: Math.sqrt\n square: square\n cube: (x) -> x * square x\n\n# Splats:\nrace = (winner, runners...) ->\n print winner, runners\n"],"mappings":";;;;;;;;AAAA;AACA;;AADA;AACA;AAEA;AACA;AACA;AACA;AAAA;AAAA;AAFA;AACA;;AAIA;AACA;AADA;;;;A","sourceRoot":""} ``` ## cheap-source-map.js.map -``` javascript + +```javascript {"version":3,"file":"./bundle-cheap-source-map.js","sources":["webpack:///./example.coffee"],"sourcesContent":["// Taken from http://coffeescript.org/\n\n// Objects:\nvar math, race;\n\nmath = {\n root: Math.sqrt,\n square: square,\n cube: function(x) {\n return x * square(x);\n }\n};\n\n// Splats:\nrace = function(winner, ...runners) {\n return print(winner, runners);\n};\n"],"mappings":";;;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;A","sourceRoot":""} ``` diff --git a/examples/two-explicit-vendor-chunks/README.md b/examples/two-explicit-vendor-chunks/README.md index 837ee7c4b9f..2b19f0677ce 100644 --- a/examples/two-explicit-vendor-chunks/README.md +++ b/examples/two-explicit-vendor-chunks/README.md @@ -1,6 +1,6 @@ # webpack.config.js -``` javascript +```javascript var path = require("path"); module.exports = { // mode: "development || "production", @@ -38,7 +38,7 @@ module.exports = {
/******/ (function(modules) { /* webpackBootstrap */ }) -``` javascript +```javascript /******/ (function(modules) { // webpackBootstrap /******/ // The module cache /******/ var installedModules = {}; @@ -129,7 +129,7 @@ module.exports = {
-``` javascript +```javascript /******/ ([ /* 0 */ /*!***********************!*\ @@ -157,7 +157,7 @@ module.exports = "Vendor1"; # dist/vendor2.js -``` javascript +```javascript /******/ (function(modules) { // webpackBootstrap /******/ // The module cache /******/ var installedModules = {}; @@ -284,7 +284,7 @@ __webpack_require__(/*! ./vendor1 */ 1); # dist/pageA.js -``` javascript +```javascript /******/ (function(modules) { // webpackBootstrap /******/ // The module cache /******/ var installedModules = {}; diff --git a/examples/wasm-simple/README.md b/examples/wasm-simple/README.md index 5a28a407123..73999c7def3 100644 --- a/examples/wasm-simple/README.md +++ b/examples/wasm-simple/README.md @@ -4,7 +4,7 @@ WebAssembly modules can be imported like other modules. Their download and compi # example.js -``` javascript +```javascript import("./add.wasm").then(addModule => { console.log(addModule.add(22, 2200)); import("./math").then(math => { @@ -35,7 +35,7 @@ function timed(name, fn) { # math.js -``` javascript +```javascript import { add } from "./add.wasm"; import { factorial } from "./factorial.wasm"; import { fibonacci } from "./fibonacci.wasm"; @@ -57,7 +57,7 @@ export function fibonacciJavascript(i) {
/******/ (function(modules) { /* webpackBootstrap */ }) -``` javascript +```javascript /******/ (function(modules) { // webpackBootstrap /******/ // install a JSONP callback for chunk loading /******/ function webpackJsonpCallback(data) { @@ -323,7 +323,7 @@ export function fibonacciJavascript(i) {
-``` javascript +```javascript /******/ ([ /* 0 */ /*!********************!*\ @@ -366,7 +366,7 @@ function timed(name, fn) { # dist/1.output.js -``` javascript +```javascript (window["webpackJsonp"] = window["webpackJsonp"] || []).push([[1],[ /* 0 */, /* 1 */ @@ -472,7 +472,7 @@ wasmExports["__webpack_init__"]() # dist/2.output.js -``` javascript +```javascript (window["webpackJsonp"] = window["webpackJsonp"] || []).push([[2],[ /* 0 */, /* 1 */ diff --git a/examples/web-worker/README.md b/examples/web-worker/README.md index bf2aa376e7e..90db59e7fd7 100644 --- a/examples/web-worker/README.md +++ b/examples/web-worker/README.md @@ -1,7 +1,6 @@ - # example.js -``` javascript +```javascript var Worker = require("worker-loader?name=hash.worker.js!./worker"); var worker = new Worker; worker.postMessage("b"); @@ -12,7 +11,7 @@ worker.onmessage = function(event) { # worker.js -``` javascript +```javascript onmessage = function(event) { var template = event.data; require(["../require.context/templates/" + event.data], function(tmpl) { @@ -25,7 +24,7 @@ onmessage = function(event) {
/******/ (function(modules) { /* webpackBootstrap */ }) -``` javascript +```javascript /******/ (function(modules) { // webpackBootstrap /******/ // The module cache /******/ var installedModules = {}; @@ -116,7 +115,7 @@ onmessage = function(event) {
-``` javascript +```javascript /******/ ([ /* 0 */ /*!********************!*\ @@ -151,7 +150,7 @@ module.exports = function() { # dist/[hash].worker.js -``` javascript +```javascript /******/ (function(modules) { // webpackBootstrap /******/ window["webpackChunk"] = function webpackChunkCallback(chunkIds, moreModules) { /******/ for(var moduleId in moreModules) { @@ -286,7 +285,7 @@ onmessage = function(event) { # dist/1.[hash].worker.js -``` javascript +```javascript window["webpackChunk"]([1],[ /* 0 */, /* 1 */