From 3f2b14828095532d7d27aaed06247db4565ec274 Mon Sep 17 00:00:00 2001 From: Sam Chen Date: Mon, 9 Aug 2021 19:58:58 +0800 Subject: [PATCH 01/32] docs(configuration): document buildHttp (#5276) * docs(configuration): sort options * add buildHttp * docs(configuration): document buildHttp * optimize * docs(configuration): optimize --- src/content/configuration/experiments.mdx | 93 ++++++++++++++++++++++- 1 file changed, 89 insertions(+), 4 deletions(-) diff --git a/src/content/configuration/experiments.mdx b/src/content/configuration/experiments.mdx index e9137d169e01..0015ee2fcfed 100644 --- a/src/content/configuration/experiments.mdx +++ b/src/content/configuration/experiments.mdx @@ -8,7 +8,7 @@ contributors: - anshumanv --- -## `experiments` +## experiments `boolean: false` @@ -19,6 +19,7 @@ W> Because experimental features have relaxed semantic versioning and might cont Available options: - `asyncWebAssembly`: Support the new WebAssembly according to the [updated specification](https://github.com/WebAssembly/esm-integration), it makes a WebAssembly module an async module. +- [`buildHttp`](#experimentsbuildhttp) - [`executeModule`](#experimentsexecutemodule) - `layers`: Enable module and chunk layers. - [`lazyCompilation`](#experimentslazycompilation) @@ -32,17 +33,101 @@ Available options: module.exports = { //... experiments: { + asyncWebAssembly: true, + buildHttp: true, executeModule: true, + layers: true, + lazyCompilation: true, outputModule: true, syncWebAssembly: true, topLevelAwait: true, - asyncWebAssembly: true, - layers: true, - lazyCompilation: true, }, }; ``` +### experiments.buildHttp + +When enabled, webpack can build remote resources that begin with the `http(s):` protocol. + +- Type: + + One of the following: + + - `boolean` + - `HttpUriOptions` + ```ts + { + cacheLocation?: false | string, + frozen?: boolean, + lockfileLocation?: string, + upgrade?: boolean + } + ``` + +- Available: 5.49.0+ +- Example + + ```javascript + // webpack.config.js + module.exports = { + //... + experiments: { + buildHttp: true, + }, + }; + ``` + + ```js + // src/index.js + import pMap1 from 'https://cdn.skypack.dev/p-map'; + // with `buildHttp` enabled, webpack will build pMap1 just like a regular local module + console.log(pMap1); + ``` + +#### experiments.buildHttp.cacheLocation + +Define the location for caching remote resources. + +- Type + - `string` + - `false` +- Example + ```javascript + // webpack.config.js + module.exports = { + //... + experiments: { + buildHttp: { + cacheLocation: false, + }, + }, + }; + ``` + +By default webpack would use `webpack.lock.data/` for caching, but you can disable it by setting its value to `false`. + +Note that you should commit files under `experiments.buildHttp.cacheLocation` into a version control system as no network requests will be made during the `production` build. + +#### experiments.buildHttp.frozen + +Freeze the remote resources and lockfile. Any modification to the lockfile or resource contents will result in an error. + +- Type: `boolean` + +#### experiments.buildHttp.lockfileLocation + +Define the location to store the lockfile. + +- Type: `string` + +By default webpack would generate a `webpack.lock` file>. Make sure to commit it into a version control system. During the `production` build, webpack will build those modules beginning with `http(s):` protocol from the lockfile and caches under [`experiments.buildHttp.cacheLocation`](#experimentsbuildhttpcachelocation). + +#### experiments.buildHttp.upgrade + +Detect changes to remote resources and upgrade them automatically. + +- Type: `boolean` + ### experiments.executeModule Enable execution of modules from the module graph for plugins and loaders at build time to generate code or other assets. From be19381b29a1a9fd076a09ce35082b0f4faba27b Mon Sep 17 00:00:00 2001 From: James McDonald <38434825+jcmdonald@users.noreply.github.com> Date: Mon, 9 Aug 2021 19:54:55 -0500 Subject: [PATCH 02/32] docs(configuration): Update index.mdx (#5282) The CreateApp.dev utility is immensely useful yet buried at the bottom of this page. I wish I'd had it from when I first started working with Webpack. So I've given it a much high prominence. --- src/content/configuration/index.mdx | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/src/content/configuration/index.mdx b/src/content/configuration/index.mdx index 953c4d7e4d77..eb4458653e39 100644 --- a/src/content/configuration/index.mdx +++ b/src/content/configuration/index.mdx @@ -22,15 +22,17 @@ contributors: Out of the box, webpack won't require you to use a configuration file. However, it will assume the entry point of your project is `src/index.js` and will output the result in `dist/main.js` minified and optimized for production. +T> [createapp.dev](https://createapp.dev/webpack) is an online tool for creating custom webpack configuration. It allows you to select various features that will be combined and added to resulting configuration file. Also, it generates an example project based on provided webpack configuration that you can review in your browser and download. + Usually your projects will need to extend this functionality, for this you can create a `webpack.config.js` file in the root folder and webpack will automatically use it. All the available configuration options are specified below. T> New to webpack? Check out our guide to some of webpack's [core concepts](/concepts) to get started! -## Use different configuration file +## Use a different configuration file -If for some reason you want to use different configuration file depending on certain situations you can change this via command line by using the `--config` flag. +If for some reason you want to use different configuration file depending on certain situations, you can change this via command line by using the `--config` flag. **package.json** @@ -1170,4 +1172,4 @@ found 0 vulnerabilities Congratulations! Your new webpack configuration file has been created! ``` -[createapp.dev - create a webpack configuration in your browser](https://createapp.dev/webpack) is an online tool for creating custom webpack configuration. It allows you to select various features that will be combined and added to resulting configuration file. Also, it generates an example project based on provided webpack configuration that you can review in your browser and download. + From beacb5136db498151db245e8ee5a4289330612aa Mon Sep 17 00:00:00 2001 From: Sam Chen Date: Tue, 10 Aug 2021 19:01:24 +0800 Subject: [PATCH 03/32] detect all broken links (#5284) --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index cc3a0959efbf..1982e9307d80 100644 --- a/package.json +++ b/package.json @@ -46,7 +46,7 @@ "lint:markdown": "npm run lint-markdown *.md ./src/content/**/*.md", "lint-markdown": "markdownlint --config ./.markdownlint.json --ignore './src/content/**/_*.md' --ignore '.vale/**/*.md' --ignore '.github/**/*.md'", "lint:prose": "vale --config='.vale.ini' src/content", - "lint:links": "hyperlink -c 8 --root dist -r dist/index.html --canonicalroot https://webpack.js.org/ --internal --skip /plugins/extract-text-webpack-plugin/ --skip /printable --skip https:// --skip http:// --skip sw.js > internal-links.tap; cat internal-links.tap | tap-spot", + "lint:links": "hyperlink -c 8 --root dist -r dist/index.html --canonicalroot https://webpack.js.org/ --skip /plugins/extract-text-webpack-plugin/ --skip /printable --skip https:// --skip http:// --skip sw.js > internal-links.tap; cat internal-links.tap | tap-spot", "sitemap": "cd dist && sitemap-static --ignore-file=../sitemap-ignore.json --pretty --prefix=https://webpack.js.org/ > sitemap.xml", "serve": "npm run build && sirv start ./dist --port 4000", "preprintable": "npm run clean-printable", From 48339bbe3f5a26a3362484e75aabda44e205a193 Mon Sep 17 00:00:00 2001 From: Sam Chen Date: Tue, 10 Aug 2021 19:55:35 +0800 Subject: [PATCH 04/32] Revert "detect all broken links (#5284)" (#5286) This reverts commit beacb5136db498151db245e8ee5a4289330612aa. --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 1982e9307d80..cc3a0959efbf 100644 --- a/package.json +++ b/package.json @@ -46,7 +46,7 @@ "lint:markdown": "npm run lint-markdown *.md ./src/content/**/*.md", "lint-markdown": "markdownlint --config ./.markdownlint.json --ignore './src/content/**/_*.md' --ignore '.vale/**/*.md' --ignore '.github/**/*.md'", "lint:prose": "vale --config='.vale.ini' src/content", - "lint:links": "hyperlink -c 8 --root dist -r dist/index.html --canonicalroot https://webpack.js.org/ --skip /plugins/extract-text-webpack-plugin/ --skip /printable --skip https:// --skip http:// --skip sw.js > internal-links.tap; cat internal-links.tap | tap-spot", + "lint:links": "hyperlink -c 8 --root dist -r dist/index.html --canonicalroot https://webpack.js.org/ --internal --skip /plugins/extract-text-webpack-plugin/ --skip /printable --skip https:// --skip http:// --skip sw.js > internal-links.tap; cat internal-links.tap | tap-spot", "sitemap": "cd dist && sitemap-static --ignore-file=../sitemap-ignore.json --pretty --prefix=https://webpack.js.org/ > sitemap.xml", "serve": "npm run build && sirv start ./dist --port 4000", "preprintable": "npm run clean-printable", From 7e82c021a495523f34abed9d9882046c35cd6e60 Mon Sep 17 00:00:00 2001 From: Sam Chen Date: Tue, 10 Aug 2021 20:01:17 +0800 Subject: [PATCH 05/32] clean up alex configurations (#5281) --- .alexignore | 2 -- .alexrc | 35 ----------------------------------- 2 files changed, 37 deletions(-) delete mode 100644 .alexignore delete mode 100644 .alexrc diff --git a/.alexignore b/.alexignore deleted file mode 100644 index a925fe2d06d9..000000000000 --- a/.alexignore +++ /dev/null @@ -1,2 +0,0 @@ -src/content/plugins/_*.md -src/content/loaders/_*.md diff --git a/.alexrc b/.alexrc deleted file mode 100644 index 6616a2211781..000000000000 --- a/.alexrc +++ /dev/null @@ -1,35 +0,0 @@ -{ - "allow": [ - "attacks", - "bigger", - "color", - "colors", - "crash", - "dead", - "dirty", - "disabled", - "dive", - "execute", - "executed", - "executes", - "execution", - "failed", - "failure", - "failures", - "fire", - "hook", - "hooks", - "host-hostess", - "hosts", - "jade", - "kill", - "laid", - "lies", - "period", - "pros", - "reject", - "remain", - "remains", - "white" - ] -} From c038c7187877376adb7568a90e4d115be28f8823 Mon Sep 17 00:00:00 2001 From: Nitin Kumar Date: Tue, 10 Aug 2021 18:31:09 +0530 Subject: [PATCH 06/32] Add new page for awesome-webpack (#5275) * new page for awesome-webpack * docs: update * fix link * Apply suggestions from code review Co-authored-by: Sam Chen * remove deprecated loaders and plugins * docs: remove outdated links * docs: fix links Co-authored-by: Sam Chen --- src/components/Footer/Footer.jsx | 3 + src/content/awesome-webpack.md | 287 +++++++++++++++++++++++++++++++ src/content/loaders/index.md | 2 +- src/content/migrate/4.md | 2 +- src/content/plugins/index.md | 2 +- 5 files changed, 293 insertions(+), 3 deletions(-) create mode 100644 src/content/awesome-webpack.md diff --git a/src/components/Footer/Footer.jsx b/src/components/Footer/Footer.jsx index bb42229d60fc..8fde23618b80 100644 --- a/src/components/Footer/Footer.jsx +++ b/src/components/Footer/Footer.jsx @@ -30,6 +30,9 @@ const Footer = () => ( Swag Store + + Awesome webpack + Glossary diff --git a/src/content/awesome-webpack.md b/src/content/awesome-webpack.md new file mode 100644 index 000000000000..14d8cfa047b1 --- /dev/null +++ b/src/content/awesome-webpack.md @@ -0,0 +1,287 @@ +--- +title: Awesome webpack +sort: 2 +contributors: + - snitin315 +--- + +A curated list of awesome webpack resources, libraries, tools and applications. It is inspired by the [awesome](https://github.com/sindresorhus/awesome) list. Feel free to improve this list by contributing. + +## Webpack Ecosystem + +**Remember to** [Cast your vote for upcoming Webpack features!](https://webpack.js.org/vote/) + +### Support Webpack + +- [Webpack Open Collective](https://opencollective.com/webpack) - Help support the teams ongoing development efforts. + +### Community + +- [StackOverflow](http://stackoverflow.com/tags/webpack) +- [Medium](https://medium.com/tag/webpack) +- [Gitter Chat](https://gitter.im/webpack/webpack) + +### Twitter + +_People passionate about Webpack (In no particular order)_ + +- [Sean T. Larkin - @TheLarkInn](https://twitter.com/TheLarkInn) TPM at [Microsoft](https://twitter.com/MSEdgeDev). Developer Advocate and webpack core team member. +- [Juho Vepsäläinen - @bebraw](https://twitter.com/bebraw) from [SurviveJS](https://twitter.com/survivejs) and webpack core team member. +- [Eric Clemmons - @ericclemmons](https://twitter.com/ericclemmons) VP of Software Development at [HigherEdHQ](https://twitter.com/HigherEdHQ). Webpack member. +- [Patrick Stapleton - @gdi2290](https://twitter.com/gdi2290) from [AngularClass](https://angularclass.com), [AngularAir](https://angularair.com) and [Angular Universal](https://github.com/angular/universal). Webpack member. +- [Kent C. Dodds - @kentcdodds](https://twitter.com/kentcdodds) from [PayPal Engineering](https://twitter.com/PayPalEng) and [JavaScript Air](https://twitter.com/JavaScriptAir). Webpack member. +- [Johannes Ewald - @Jhnnns](https://twitter.com/Jhnnns): Webpack core team member. +- [Joshua Wiens - @d3viant0ne](https://twitter.com/d3viant0ne): Technical Lead for [EasyMetrics](https://easymetrics.com). Webpack member. +- [Jonathan Creamer - @jcreamer898](https://twitter.com/jcreamer898): Microsoft MVP and [Telerik](https://github.com/telerik) Developer Expert. +- [Kees Kluskens - @keeskluskens](https://twitter.com/keeskluskens): - Software Engineer at [Code Yellow](https://codeyellow.nl), Webpack core team member. + +## Libraries + +### Loaders + +#### File Type + +- [HTML Loader](https://github.com/webpack/html-loader): HTML loader module for Webpack. -- _Maintainer_: `Webpack Team` [![Github][githubicon]](https://github.com/webpack) +- [Responsive Loader](https://github.com/herrstucki/responsive-loader): Loader for responsive images. -- _Maintainer_: `Jeremy Stucki` [![Github][githubicon]](https://github.com/herrstucki) +- [SVG Url Loader](https://github.com/bhovhannes/svg-url-loader): Loader which loads SVG file as utf-8 encoded Url. -- _Maintainer_: `Hovhannes Babayan` [![Github][githubicon]](https://github.com/bhovhannes) +- [mermaid Loader](https://github.com/popul/mermaid-loader): [mermaid](https://github.com/mermaid-js/mermaid) loader module (diagrams) for Webpack. -- _Maintainer_: `Paul Musso` [![Github][githubicon]](https://github.com/popul) +- [wasm loader](https://github.com/ballercat/wasm-loader): wasm binary loader module for Webpack. -- _Maintainer_: `Arthur Buldauskas` [![Github][githubicon]](https://github.com/ballercat) +- [Imagemin Loader/Plugin](https://github.com/itgalaxy/imagemin-webpack): Image minimizing loader + plugin for webpack. -- _Maintainer_: `itgalaxy inc.` [![Github][githubicon]](https://github.com/itgalaxy) +- [Bin Exec Loader](https://github.com/milewski/bin-exec-loader): Pipe any file through any binary. -- _Maintainer_: `Rafael Milewski` [![Github][githubicon]](https://github.com/milewski) +- [GraphQL Loader](https://github.com/stephen/graphql-loader): `.graphql` document loader. -- _Maintainer_: `Stephen Wan` [![Github][githubicon]](https://github.com/stephen) + +#### Component & Template + +- [Angular2 Template Loader](https://github.com/TheLarkInn/angular2-template-loader): Inlines html and style's in Angular2 components. -- _Maintainer_: `Sean Larkin` [![Github][githubicon]](https://github.com/TheLarkInn) [![Twitter][twittericon]](https://twitter.com/TheLarkInn) +- [Handlebars Loader](https://github.com/pcardune/handlebars-loader): A handlebars template loader for Webpack. -- _Maintainer_: `Paul Carduner` [![Github][githubicon]](https://github.com/pcardune) [![Twitter][twittericon]](https://twitter.com/pcardune) +- [Vue Loader](https://github.com/vuejs/vue-loader): Webpack loader for Vue.js components. -- _Maintainer_: `Vuejs Team` [![Github][githubicon]](https://github.com/vuejs) [![Twitter][twittericon]](https://twitter.com/vuejs) +- [SVG React Loader](https://github.com/jhamlet/svg-react-loader) - Webpack SVG to React Component Loader. -- _Maintainer_: `Jerry Hamlet` [![Github][githubicon]](https://github.com/jhamlet) [![Twitter][twittericon]](https://twitter.com/jerryhamlet) +- [Underscore Loader](https://github.com/emaphp/underscore-template-loader) - Underscore and Lodash template loader. -- _Maintainer_: `Emmanuel Antico` [![Github][githubicon]](https://github.com/emaphp) [![Twitter][twittericon]](https://twitter.com/emaphp) +- [ngTemplate Loader](https://github.com/WearyMonkey/ngtemplate-loader) - Angular1 Template Loader. -- _Maintainer_: `Toby Rahilly` [![Github][githubicon]](https://github.com/WearyMonkey) +- [ngInlineStylesLoader](https://github.com/seveves/ng-inline-styles-loader): Optimizes inlined css of angular components. -- _Maintainer_: `Severin Friede` [![Github][githubicon]](https://github.com/seveves) +- [Markup-inline Loader](https://github.com/asnowwolf/markup-inline-loader) Inline SVGs to HTML -- _Maintainer_: `Zhicheng Wang` [![Github][githubicon]](https://github.com/asnowwolf) +- [Polymer Loader](https://github.com/webpack-contrib/polymer-webpack-loader) - Loader for Polymer elements. -- _Maintainers_: `Rob Dodson` [![Github][githubicon]](https://github.com/robdodson) - `Chad Killingsworth` [![Github][githubicon]](https://github.com/ChadKillingsworth) - `Bryan Coulter` [![Github][githubicon]](https://github.com/bryandcoulter) +- [Tag Loader](https://github.com/riot/tag-loader) - Loader for Riot tag files. -- _Maintainer_: `Riot Team` [![Github][githubicon]](https://github.com/riot) [![Twitter][twittericon]](https://twitter.com/riotjs_) +- [Twig Loader](https://github.com/zimmo-be/twig-loader) - Twig template loader. -- _Maintainer_: `Zimmo.be Team` [![Github][githubicon]](https://github.com/zimmo-be) +- [Auto ngTemplate Loader](https://github.com/YashdalfTheGray/auto-ngtemplate-loader): Autodetect Angular 1 templates and load them. -- _Maintainer_: `Yash Kulshrestha` [![Github][githubicon]](https://github.com/YashdalfTheGray) +- [Pug Loader](https://github.com/pugjs/pug-loader) - Pug template loader (formerly Jade). -- _Maintainer_: `Pug Team` [![Github][githubicon]](https://github.com/pugjs) +- [Simple Nunjucks Loader](https://github.com/ogonkov/nunjucks-loader) - Nunjucks template loader. -- _Maintainer_: `ogonkov` [![Github][githubicon]](https://github.com/ogonkov) + +#### Styles + +- [Style Loader](https://github.com/webpack/style-loader): Style loader module for Webpack. -- _Maintainer_: `Webpack Team` [![Github][githubicon]](https://github.com/webpack) +- [PostCSS Loader](https://github.com/postcss/postcss-loader): PostCSS loader for Webpack. -- _Maintainer_: `PostCSS Team` [![Github][githubicon]](https://github.com/postcss) [![Twitter][twittericon]](https://twitter.com/PostCSS) +- [CSS Loader](https://github.com/webpack/css-loader): CSS loader module for Webpack. -- _Maintainer_: `Webpack Team` [![Github][githubicon]](https://github.com/webpack) +- [SASS Loader](https://github.com/jtangelder/sass-loader): SASS loader for Webpack. -- _Maintainer_: `Jorik Tangelder` [![Github][githubicon]](https://github.com/jtangelder) [![Twitter][twittericon]](https://twitter.com/jorikdelaporik) +- [Less Loader](https://github.com/webpack/less-loader): Less loader module for Webpack. -- _Maintainer_: `Webpack Team` [![Github][githubicon]](https://github.com/webpack) +- [Stylus Loader](https://github.com/shama/stylus-loader): A stylus loader for webpack. -- _Maintainer_: `Kyle Robinson Young` [![Github][githubicon]](https://github.com/shama) [![Twitter][twittericon]](https://twitter.com/shamakry) +- [Isomorphic Style Loader](https://github.com/kriasoft/isomorphic-style-loader): Isomorphic CSS style loader for Webpack. -- _Maintainer_: `Kriasoft Team` [![Github][githubicon]](https://github.com/kriasoft) [![Twitter][twittericon]](https://twitter.com/kriasoft) +- [Minify CSS-in-JS Loader](https://github.com/zaaack/minify-cssinjs-loader): RegExp-based minify CSS-in-JS loader for Webpack, don't need babel. -- _Maintainer_: `Zack Young` [![Github][githubicon]](https://github.com/zaaack) [![Twitter][twittericon]](https://twitter.com/ZaaackYoung) +- [SASS Resources Loader](https://github.com/shakacode/sass-resources-loader): Globally import SASS resources (variables, mixins, etc.). -- _Maintainer_: `ShakaCode` [![Github][githubicon]](https://github.com/shakacode) [![Twitter][twittericon]](https://twitter.com/shakacode) + +#### Language & Framework + +- [TS Loader](https://github.com/TypeStrong/ts-loader): TypeScript loader for webpack. -- _Maintainer_: `TypeStrong Team` [![Github][githubicon]](https://github.com/TypeStrong) +- [Coffee Loader](https://github.com/webpack/coffee-loader): Coffee loader module for Webpack. -- _Maintainer_: `Webpack Team` [![Github][githubicon]](https://github.com/webpack) +- [Bootstrap Loader](https://github.com/shakacode/bootstrap-loader): Load Bootstrap styles in your Webpack bundle. -- _Maintainer_: `ShakaCode Team` [![Github][githubicon]](https://github.com/shakacode) [![Twitter][twittericon]](https://twitter.com/shakacode) +- [PostHTML Loader](https://github.com/posthtml/posthtml-loader): PostHTML loader for Webpack. -- _Maintainer_: `PostHTML Team` [![Github][githubicon]](https://github.com/posthtml) [![Twitter][twittericon]](https://twitter.com/PostHTML) +- [ELM Loader](https://github.com/rtfeldman/elm-webpack-loader): Webpack loader for the Elm programming language. -- _Maintainer_: `Richard Feldman` [![Github][githubicon]](https://github.com/rtfeldman) [![Twitter][twittericon]](https://twitter.com/rtfeldman) +- [Fengari Loader](https://github.com/fengari-lua/fengari-loader/): Run Lua code using [Fengari](https://fengari.io). -- _Maintainer_: `Daurnimator` [![Github][githubicon]](https://github.com/daurnimator) [![Twitter][twittericon]](https://twitter.com/daurnimator) + +#### Utility + +- [Babel Loader](https://github.com/babel/babel-loader): Webpack plugin for Babel. -- _Maintainer_: `Babel Team` [![Github][githubicon]](https://github.com/babel) [![Twitter][twittericon]](https://twitter.com/babel) +- [Worker Loader](https://github.com/webpack/worker-loader): Worker loader module for Webpack. -- _Maintainer_: `Webpack Team` [![Github][githubicon]](https://github.com/webpack) +- [Resolve URL Loader](https://github.com/bholloway/resolve-url-loader): Resolves relative paths in url() statements. -- _Maintainer_: `Ben Holloway` [![Github][githubicon]](https://github.com/bholloway) +- [Import Loader](https://github.com/webpack/imports-loader): Imports loader module for Webpack. -- _Maintainer_: `Webpack Team` [![Github][githubicon]](https://github.com/webpack) +- [SourceMap Loader](https://github.com/webpack/source-map-loader): Extract sourceMappingURL comments from modules. -- _Maintainer_: `Webpack Team` [![Github][githubicon]](https://github.com/webpack) +- [Combine Loader](https://www.npmjs.com/package/webpack-combine-loaders) - Converts a loaders array into a single loader string. -- _Maintainer_: `James Friend` [![Github][githubicon]](https://github.com/jsdf) +- [Icon Font Loader](https://github.com/vusion/icon-font-loader) - Converts svgs into font icons in CSS. -- _Maintainer_: `Forrest R. Zhao` [![Github][githubicon]](https://github.com/rainfore) +- [Icons Loader](https://www.npmjs.com/package/icons-loader) - Generates an iconfont from SVG dependencies. -- _Maintainer_: `Mike Vercoelen` [![Github][githubicon]](https://github.com/mikevercoelen) +- [Modernizr Loader](https://www.npmjs.com/package/modernizr-loader) - Get your modernizr build bundled with webpack. -- _Maintainer_: `Peerigon Devs` [![Github][githubicon]](https://github.com/peerigon) +- [ngRouter Loader](https://github.com/shlomiassaf/ng-router-loader) - AOT capable NgModule lazy loading using angular router -- _Maintainer_: `Shlomi Assaf` [![Github][githubicon]](https://github.com/shlomiassaf) [![Twitter][twittericon]](https://twitter.com/shlomiassaf) +- [Lingui Loader](https://github.com/lingui/js-lingui/tree/master/packages/loader) - Compile message catalogs on the fly for jsLingui, i18n library -- _Maintainer_: `Tomáš Ehrlich` [![Github][githubicon]](https://github.com/tricoder42) [![Twitter][twittericon]](https://twitter.com/tomas_ehrlich) +- [Shell Loader](https://github.com/localjo/shell-loader) - Run an arbitrary shell script on source files. -- _Maintainer_: `Jo Sprague` [![Github][githubicon]](https://github.com/localjo) +- [EXIF Loader](https://github.com/herschel666/exif-loader) - Extract EXIF- & IPTC-data from your JPGs during build-time. -- _Maintainer_: `Emanuel Kluge` [![Github][githubicon]](https://github.com/herschel666/exif-loader) [![Twitter][twittericon]](https://twitter.com/herschel_r) +- [esbuild Loader](https://github.com/privatenumber/esbuild-loader) - Blazing fast alternative to babel-loader, ts-loader, and Terser powered by [esbuild](https://github.com/evanw/esbuild). -- _Maintainer_: `Hiroki Osame` [![Github][githubicon]](https://github.com/privatenumber/esbuild-loader) [![Twitter][twittericon]](https://twitter.com/privatenumbr) + +#### Testing + +- [Karma Webpack](https://github.com/webpack/karma-webpack): Use Karma with Webpack. -- _Maintainer_: `Webpack Team` [![Github][githubicon]](https://github.com/webpack) +- [Istanbul Webpack plugin](https://github.com/DxCx/webpack-istanbul-plugin): Use Istanbul instrumenter for the whole pack. -- _Maintainer_: `Hagai Cohen` [![Github][githubicon]](https://github.com/DxCx) + +### Integration Libraries + +- [Dotenv Webpack](https://github.com/mrsteele/dotenv-webpack): Compiles environment variables into your bundle via dotenv. -- _Maintainer_: `Matthew Steele` [![Github][githubicon]](https://github.com/mrsteele) [![Twitter][twittericon]](https://twitter.com/Matt_R_Steele) +- [Terse Webpack](https://github.com/ericclemmons/terse-webpack) - Webpack simplified in a fluent API with presets. -- _Maintainer_: `Eric Clemmons` [![Github][githubicon]](https://github.com/ericclemmons) [![Twitter][twittericon]](https://twitter.com/ericclemmons) +- [SystemJS Webpack](https://github.com/guybedford/systemjs-webpack-plugin) - Webpack bundling for SystemJS. -- _Maintainer_: `Guy Bedford` [![Github][githubicon]](https://github.com/guybedford) [![Twitter][twittericon]](https://twitter.com/guybedford) +- [Gulp Webpack Stream](https://github.com/shama/webpack-stream) - Run webpack through a stream interface. -- _Maintainer_: `Kyle Robinson Young` [![Github][githubicon]](https://github.com/shama) [![Twitter][twittericon]](https://twitter.com/shamakry) +- [Webpack Blocks](https://github.com/andywer/webpack-blocks) - Configure webpack using functional feature blocks. -- _Maintainer_: `Andy Wermke` [![Github][githubicon]](https://github.com/andywer) [![Twitter][twittericon]](https://twitter.com/andywritescode) +- [Webpacker](https://github.com/rails/webpacker) - Offical webpack gem for integration into ruby on rails projects. -- _Maintainer_: `Rails` [![Github][githubicon]](https://github.com/rails) +- [WebpackAspnetMiddleware](https://github.com/frankwallis/WebpackAspnetMiddleware) - Development middleware for ASP.NET 5. -- _Maintainer_: `Frank Wallis` [![Github][githubicon]](https://github.com/frankwallis) +- [Consul Key/Value Webpack](https://github.com/marlonmleite/consul-env-webpack-plugin): Compiles environment variables into your bundle via [Consul KV-store](https://www.consul.io/api/kv.html). -- _Maintainer_: `Marlon Maxwel` [![Github][githubicon]](https://github.com/marlonmleite) + +### Webpack Plugins + +- [DefinePlugin](https://webpack.js.org/plugins/define-plugin/): Create global constants which can be configured at compile time. -- _Maintainer_: `Webpack Team` [![Github][githubicon]](https://github.com/webpack) +- [Compression Plugin](https://github.com/webpack/compression-webpack-plugin): Prepare assets to serve with Content-Encoding. -- _Maintainer_: `Webpack Team` [![Github][githubicon]](https://github.com/webpack) +- [Offline Plugin](https://github.com/NekR/offline-plugin): Offline plugin (ServiceWorker, AppCache) for Webpack. -- _Maintainer_: `Arthur Stolyar` [![Github][githubicon]](https://github.com/NekR) [![Twitter][twittericon]](https://twitter.com/nekrtemplar) +- [Rewire Plugin](https://github.com/jhnns/rewire-webpack): Dependency injection for Webpack bundles. -- _Maintainer_: `Johannes Ewald` [![Github][githubicon]](https://github.com/jhnns) [![Twitter][twittericon]](https://twitter.com/Jhnnns) +- [HTML Webpack Plugin](https://github.com/ampedandwired/html-webpack-plugin): Simplifies creation of HTML files. -- _Maintainer_: `Jan Nicklas` [![Github][githubicon]](https://github.com/jantimon) [![Twitter][twittericon]](https://twitter.com/jantimon) +- [Copy Webpack Plugin](https://github.com/kevlened/copy-webpack-plugin): Copy files and directories in webpack. -- _Maintainer_: `Len Boyette` [![Github][githubicon]](https://github.com/kevlened) [![Twitter][twittericon]](https://twitter.com/kevlened) +- [Split By Path](https://github.com/BohdanTkachenko/webpack-split-by-path): Split By Path Webpack Plugin. -- _Maintainer_: `Bohdan Tkachenko` [![Github][githubicon]](https://github.com/BohdanTkachenko) [![Twitter][twittericon]](https://twitter.com/bohdantkachenko) +- [SW Precache](https://github.com/goldhand/sw-precache-webpack-plugin) - Generates a service worker to precache bundle. -- _Maintainer_: `Will Farley` [![Github][githubicon]](https://github.com/goldhand) +- [CoreJS Plugin](https://github.com/gdi2290/core-js-webpack-plugin) - Core-JS as a webpack plugin. -- _Maintainer_: `PatrickJS` [![Github][githubicon]](https://github.com/gdi2290) +- [Bundle Analyzer](https://github.com/th0r/webpack-bundle-analyzer) - Utility that represents bundles as an interactive treemap. -- _Maintainer_: `Yuriy Grunin` [![Github][githubicon]](https://github.com/th0r) +- [Module Mapping](https://github.com/spartez/module-mapping-webpack-plugin) - Maps modules onto different files. -- _Maintainer_: `Spartez Team` [![Github][githubicon]](https://github.com/spartez) [![Twitter][twittericon]](https://twitter.com/thisisspartez) +- [Serverless Webpack](https://github.com/elastic-coders/serverless-webpack) - Serverless plugin to bundle your lambdas. -- _Maintainer_: `Elastic Coders` [![Github][githubicon]](https://github.com/elastic-coders) [![Twitter][twittericon]](https://twitter.com/ElasticCoders) +- [Prerender SPA](https://github.com/chrisvfritz/prerender-spa-plugin) - Framework-agnostic static site generation for SPAs. -- _Maintainer_: `Chris Fritz` [![Github][githubicon]](https://github.com/chrisvfritz) [![Twitter][twittericon]](https://twitter.com/chrisvfritz) +- [Static Site Generator Plugin](https://github.com/markdalgleish/static-site-generator-webpack-plugin) - Minimal, unopinionated static site generator. -- _Maintainer_: `Mark Dalgleish` [![Github][githubicon]](https://github.com/markdalgleish) +- [SVG Sprite Plugin](https://github.com/TodayTix/svg-sprite-webpack-plugin) - Plugin for SVG sprites and icons. -- _Maintainer_: `Jeremy Tice` ([`TodayTix`](https://github.com/TodayTix)) [![Github][githubicon]](https://github.com/jetpacmonkey) [![Twitter][twittericon]](https://twitter.com/jetpacmonkey) +- [Imagemin Webpack Plugin](https://github.com/Klathmon/imagemin-webpack-plugin) - Minify images with Imagemin. -- _Maintainer_: `Gregory Benner` [![Github][githubicon]](https://github.com/Klathmon) [![Twitter][twittericon]](https://twitter.com/Klathmon) +- [Prepack Webpack Plugin](https://github.com/gajus/prepack-webpack-plugin) - A webpack plugin for prepack. -- _Maintainer_: `Gajus Kuizinas` [![Github][githubicon]](https://github.com/gajus) +- [Modules CDN Webpack Plugin](https://github.com/mastilver/modules-cdn-webpack-plugin) - Dynamically load your modules from a CDN. -- _Maintainer_: `Thomas Sileghem` [![Github][githubicon]](https://github.com/mastilver) +- [Generate package.json Plugin](https://github.com/lostpebble/generate-package-json-webpack-plugin) - Limit dependencies in a deployment `package.json` to only those that are actually being used by your bundle. -- _Maintainer_: `Paul Myburgh` [![Github][githubicon]](https://github.com/lostpebble) +- [Progressive Web App Manifest](https://github.com/arthurbergmz/webpack-pwa-manifest) - PWA manifest manager and generator. -- _Maintainer_: `Arthur A. Bergamaschi` [![Github][githubicon]](https://github.com/arthurbergmz) +- [FileManager Webpack Plugin](https://github.com/gregnb/filemanager-webpack-plugin) - Copy, move, delete files and directories before and after Webpack builds -- _Maintainer_: `Gregory Nowakowski` [![Github][githubicon]](https://github.com/gregnb) +- [Fork TS Checker Webpack Plugin](https://github.com/TypeStrong/fork-ts-checker-webpack-plugin) - Webpack plugin that runs typescript type checker on a separate process. -- _Maintainer_: `TypeStrong Team` [![Github][githubicon]](https://github.com/TypeStrong) +- [Duplicate Package Checker Webpack Plugin](https://github.com/darrenscerri/duplicate-package-checker-webpack-plugin) - Warns you when multiple versions of the same package exist in your bundle -- _Maintainer_: `Darren Scerri` [![Github][githubicon]](https://github.com/darrenscerri) +- [Circular Dependency Plugin](https://github.com/aackerman/circular-dependency-plugin) - Detect modules with circular dependencies when bundling -- _Maintainer_: `Aaron Ackerman` [![Github][githubicon]](https://github.com/aackerman) +- [webpack-inject-plugin](https://github.com/adierkens/webpack-inject-plugin) - A webpack plugin to dynamically inject code into the bundle. -- _Maintainer_: `Adam Dierkens` [![Github][githubicon]](https://github.com/adierkens) +- [Public Path Manipulation Plugin](https://github.com/agoldis/webpack-require-from) - control `publicPath` of dynamically loaded resources at runtime -- _Maintainer_: `Andrew Goldis` [![Github][githubicon]](https://github.com/agoldis) +- [Build Notifier Plugin](https://github.com/roccoc/webpack-build-notifier) - Display OS-level notifications for build errors and warnings. -- _Maintainer_: `Rocco Cataldo` [![Github][githubicon]](https://github.com/roccoc) +- [CSS Cleanup Webpack Plugin](https://github.com/do-web/css-cleanup-webpack-plugin) - A plugin to remove duplicated and unused css rules -- _Maintainer_: `Dominik Weber` [![Github][githubicon]](https://github.com/do-web) +- [Extension Reloader](https://github.com/rubenspgcavalcante/webpack-extension-reloader) - Hot reloading while developing browser extensions -- _Maintainer_: `Rubens P. G. Cavalcante` [![Github][githubicon]](https://github.com/rubenspgcavalcante) [![Twitter][twittericon]](https://twitter.com/rubenspgc) +- [Htmls Webpack Plugin](https://github.com/zaaack/htmls-webpack-plugin): Simple and fast multiple-htmls-generating plugin for webpack. -- _Maintainer_: `Zack Young` [![Github][githubicon]](https://github.com/zaaack) [![Twitter][twittericon]](https://twitter.com/ZaaackYoung) +- [Mini css extract plugin](https://github.com/webpack-contrib/mini-css-extract-plugin): + Lightweight CSS extraction plugin -- _Maintainer_: `Webpack Contrib` [![Github][githubicon]](https://github.com/webpack-contrib) +- [build-hash-webpack-plugin](https://github.com/Cosium/build-hash-webpack-plugin) For each build, Webpack generates an in-memory hash allowing to know if two build outputs are the same or not. This plugin writes the described build hash in a separate json file. -- _Maintainer_: `Réda Housni Alaoui` [![Github][githubicon]](https://github.com/reda-alaoui) [![Twitter][twittericon]](https://twitter.com/alaouirda) +- [webpack-hook-plugin](https://github.com/tienne/webpack-hook-plugin) - run any shell commands before or after webpack builds -- _Maintainer_: `David Kwon` [![Github][githubicon]](https://github.com/tienne) +- [Dynamic Vendor Webpack Plugin](https://github.com/bios21/dynamic-vendor-webpack-plugin) - Gives you a way to import vendors with dynamic variable and specific code splitting. -- _Maintainer_ `Lilian Saget-Lethias` [![Github][githubicon]](https://github.com/bios21) [![Twitter][twittericon]](https://twitter.com/lsagetlethias) +- [Define Variable Webpack Plugin](https://github.com/bios21/define-variable-webpack-plugin) - Enhancement of DefinePlugin to store defined things in actual variables. -- _Maintainer_ `Lilian Saget-Lethias` [![Github][githubicon]](https://github.com/bios21) [![Twitter][twittericon]](https://twitter.com/lsagetlethias) +- [Shell Script Webpack Plugin](https://github.com/drewloomer/hook-shell-script-webpack-plugin) - A plugin for running arbitrary shell scripts when [compiler hooks](https://webpack.js.org/api/compiler-hooks/) are triggered. -- _Maintainer_ `Drew Loomer` [![Github][githubicon]](https://github.com/drewloomer) [![Twitter][twittericon]](https://twitter.com/drewloomer) +- [Stylelint Webpack Plugin](https://github.com/webpack-contrib/stylelint-webpack-plugin): A Stylelint plugin for webpack. -- _Maintainer_: `Ricardo Gobbo de Souza` [![Github][githubicon]](https://github.com/ricardogobbosouza) +- [ESLint Webpack Plugin](https://github.com/webpack-contrib/eslint-webpack-plugin): A ESLint plugin for webpack + . -- _Maintainer_: `Ricardo Gobbo de Souza` [![Github][githubicon]](https://github.com/ricardogobbosouza) +- [Exclude Assets Webpack Plugin](https://github.com/klaytonfaria/webpack-exclude-assets-plugin): A plugin to exclude assets from webpack output based on a path RegExp pattern. -- _Maintainer_: `Klayton Faria` [![Github][githubicon]](https://github.com/klaytonfaria) +- [Webpack Shell Plugin Next](https://github.com/s00d/webpack-shell-plugin-next): A plugin allows you to run any shell commands before or after webpack builds. -- _Maintainer_: `Kuzmin Pavel` [![Github][githubicon]](https://github.com/s00d) +- [Gettext Webpack Plugin](https://github.com/juanluispaz/gettext-webpack-plugin): Embed localization into your bundle using gettext. -- _Maintainer_: `Juan Luis Paz` [![Github][githubicon]](https://github.com/juanluispaz) +- [Node Polyfill Plugin](https://github.com/Richienb/node-polyfill-webpack-plugin): Polyfill Node.js core modules. -- _Maintainer_: `Richie Bendall` [![Github][githubicon]](https://github.com/Richienb) [![Twitter][twittericon]](https://twitter.com/Richienb2) +- [Bytenode Plugin](https://github.com/herberttn/bytenode-webpack-plugin): Compile JavaScript into bytecode using bytenode. -- _Maintainer_: `Herbert Treis Neto` [![Github][githubicon]](https://github.com/herberttn) + +### Webpack Tools + +- [Webpack Dev Middleware](https://github.com/webpack/webpack-dev-middleware): Middleware which arguments a live bundle. -- _Maintainer_: `Webpack Team` [![Github][githubicon]](https://github.com/webpack) +- [Webpack Dev Server](https://github.com/webpack/webpack-dev-server): Serves a webpack app. Updates the browser on changes. -- _Maintainer_: `Webpack Team` [![Github][githubicon]](https://github.com/webpack) +- [Webpack Merge](https://github.com/survivejs/webpack-merge) - Merge designed for Webpack. -- _Maintainer_: `Juho Vepsäläinen` [![Github][githubicon]](https://github.com/bebraw) [![Twitter][twittericon]](https://twitter.com/bebraw) +- [NPM Install Webpack](https://github.com/ericclemmons/npm-install-webpack-plugin) - Automatically install & save deps with Webpack. -- _Maintainer_: `Eric Clemmons` [![Github][githubicon]](https://github.com/ericclemmons) [![Twitter][twittericon]](https://twitter.com/ericclemmons) +- [Webpack Validator](https://github.com/js-dxtools/webpack-validator) - Validates your webpack config with Joi. -- _Maintainer_: `js-dxtools Team` [![Github][githubicon]](https://github.com/js-dxtools) +- [Webpack Config Utils](https://github.com/kentcdodds/webpack-config-utils) - Util. to make your webpack config easier to read. -- _Maintainer_: `Kent C. Dodds` [![Github][githubicon]](https://github.com/kentcdodds) [![Twitter][twittericon]](https://twitter.com/kentcdodds) +- [Angular2 Webpack Toolkit](https://github.com/AngularClass/webpack-toolkit) - Webpack tools and helpers for Angular 2. -- _Maintainer_: `AngularClass` [![Github][githubicon]](https://github.com/AngularClass) [![Twitter][twittericon]](https://twitter.com/AngularClass) +- [Webpack Bundle Analyzer](https://github.com/th0r/webpack-bundle-analyzer) - Represents bundles as an interactive treemap. -- _Maintainer_: `Yuriy Grunin` [![Github][githubicon]](https://github.com/th0r) [![Twitter][twittericon]](https://twitter.com/grunin_ya) +- [HJS Webpack](https://github.com/HenrikJoreteg/hjs-webpack): Helpers/presets for setting up webpack with hotloading. -- _Maintainer_: `Henrik Joreteg` [![Github][githubicon]](https://github.com/HenrikJoreteg) +- [Webpack Dashboard](https://github.com/FormidableLabs/webpack-dashboard): A CLI dashboard for webpack dev server. -- _Maintainer_: `Formidable Labs` [![Github][githubicon]](https://github.com/FormidableLabs) +- [Neutrino](https://github.com/mozilla-neutrino/neutrino-dev): Combines the power of Webpack with the simplicity of presets. -- _Maintainer_: `Eli Perelman` [![Github][githubicon]](https://github.com/eliperelman) +- [Speed Measure Plugin](https://github.com/stephencookdev/speed-measure-webpack-plugin) - Measures the speed of your webpack plugins and loaders. -- _Maintainer_: `Stephen Cook` [![Github][githubicon]](https://github.com/stephencookdev) +- [packtracker.io](https://packtracker.io/?utm_source=github&utm_medium=awesome-webpack&utm_campaign=social) - Webpack bundle analysis on every commit, report webpack stats to every pull request. +- [BundleStats](https://github.com/bundle-stats/bundle-stats) - Generates bundle report(sizes, assets, modules) and compares the results between different builds. -- _Maintainer_: `Vio` [![Github][githubicon]](https://github.com/vio) [![Twitter][twittericon]](https://twitter.com/vio) +- [Webpack Landing Generator](https://github.com/kuncevic/webpack-landing-generator): Easy way to create landing page that converts. -- _Maintainer_: `Aliaksei Kuncevic` [![Github][githubicon]](https://github.com/kuncevic) [![Twitter][twittericon]](https://twitter.com/kuncevic) +- [Webpack Dev Server Firewall](https://github.com/funbox/webpack-dev-server-firewall): Prevents access to dev server from unknown IPs. -- _Maintainer_: `Igor Adamenko` [![Github][githubicon]](https://github.com/igoradamenko) [![Twitter][twittericon]](https://twitter.com/igoradamenko) + +## Research & Training + +### Articles + +- Aniketh Saha | 16-Oct-19 - [Creating a Custom webpack Plugin](https://alligator.io/js/create-custom-webpack-plugin/) +- Antoine Caron | 18-Jan-19 - [Webpack : an unexpected journey](https://medium.zenika.com/webpack-an-unexpected-journey-26f987efd1c5) +- Mark Erikson | 07-Mar-17 - [Declaratively Rendering Earth in 3D, Building a Cesium + React App with Webpack](http://blog.isquaredsoftware.com/2017/03/declarative-earth-part-1-cesium-webpack/) +- Joseph Zimmerman | 2-Feb-17 - [A Detailed Introduction To Webpack.](https://www.smashingmagazine.com/2017/02/a-detailed-introduction-to-webpack/) +- Jamund Ferguson | 22-Jul-16 - [Manually Tuning Webpack Builds.](https://medium.com/@xjamundx/manually-tuning-webpack-builds-284923f47f44#.lbvkidezh) +- Sean T. Larkin | 21-Jul-16 - [Learn and Debug webpack with Chrome Dev Tools!.](https://medium.com/webpack/webpack-bits-learn-and-debug-webpack-with-chrome-dev-tools-da1c5b19554#.gpoentuxe) +- Raja Rao DV | 10-Apr-16 - [Webpack  —  The Confusing Parts.](https://medium.com/@rajaraodv/webpack-the-confusing-parts-58712f8fcad9#.qmfmplobc) +- Andrew Ray | 09-Apr-16 - [Webpack: When To Use and Why.](http://blog.andrewray.me/webpack-when-to-use-and-why/) +- Jonathan Creamer | 25-Feb-16 - [WebPack Code splitting with ES6 and Babel 6.](http://jonathancreamer.com/webpack-code-splitting-with-es6-and-babel-6/) +- Ilya Zayats | 07-Feb-16 - [How to split your apps by routes with Webpack.](https://medium.com/@somebody32/how-to-split-your-apps-by-routes-with-webpack-36b7a8a6231#.iy99i4f7r) +- Sebastian De Deyne | 04-Feb-16 - [Adventure Time With Webpack.](https://sebastiandedeyne.com/posts/2016/adventure-time-with-webpack) +- Jonathan Creamer | 10-Jan-16 - [Advanced WebPack Part 2 - Code Splitting.](http://jonathancreamer.com/advanced-webpack-part-2-code-splitting) +- Andy Ccs | 02-Jan-16 - [Webpack and Docker for Development and Deployment.](https://medium.com/@andyccs/webpack-and-docker-for-development-and-deployment-ae0e73243db4#.2yutcm8s4) +- Jonathan Creamer | 08-Jun-16 - [Advanced WebPack Part 3 - Creating a custom notifier plugin.](http://jonathancreamer.com/advanced-webpack-part-3-creating-a-custom-notifier-plugin) +- Nader Dabit | 07-Sept-15 - [Beginner’s guide to Webpack.](https://medium.com/@dabit3/beginner-s-guide-to-webpack-b1f1a3638460#.xb01fcsoq) +- Jonathan Creamer | 02-Sept-15 - [Advanced WebPack Part 1 - The CommonsChunk Plugin.](http://jonathancreamer.com/advanced-webpack-part-1-the-commonschunk-plugin/) +- Maxime Fabre | 16-Oct-15 - [Webpack your bags.](https://blog.madewithlove.be/post/webpack-your-bags/?utm_content=buffer480f4&utm_medium=social&utm_source=twitter.com&utm_campaign=buffer) +- Hridayesh Sharma | 18-Aug-20 - [Webpack Setup for a JavaScript Library](https://www.loginradius.com/engineering/blog/write-a-javascript-library-using-webpack-and-babel/) + +### Videos + +- Sean Larkin JS Kongress | Apr-2-2019 - [Everything’s a plugin: Understanding webpack from the inside out](https://youtu.be/H3g0BdyVVxA) +- Colt Steele via Youtube| Mar-7-2019 - [Learn Webpack Course](https://www.youtube.com/playlist?list=PLblA84xge2_zwxh3XJqy6UVxS60YdusY8) +- Naomi A. Jacobs via BuzzJS 2.0 2017 | Feb-27-2017 - [Webpack: It's Not Magic](https://www.youtube.com/watch?v=_QEM9kdV-b0) +- Jack Franklin at HalfStack2016 | 18-Nov-16 | [Seamless client side JavaScript w/ Webpack](https://opbeat.com/community/posts/seamless-client-side-javascript-with-webpack-by-jack-franklin) +- Sean Larkin NEJS Conf | 30-Sep-16 | [Webpack: Core Concepts](https://www.youtube.com/watch?v=AZPYL30ozCY&feature=youtu.be) +- Front End Center Webpack from First Principles | 22-Aug-16 - [Intro to Webpack](https://www.youtube.com/watch?v=WQue1AN93YU) +- Eric Clemmons chat with Kent C. Dodds | 01-Jul-16 - [Webpack HMR.](https://www.youtube.com/watch?v=PthDwpgrhmQ) +- Mirko Nasato (5 Part Series) | 07-Jun-16 - [Angular2 with Webpack Project Setup.](https://www.youtube.com/playlist?list=PLgGUMhSgtxJyIQ4vI3BzlCzZLHL79Ew6p) +- Jonathan Creamer at Nodevember | 05-Dec-15 - [Advanced WebPack.](https://www.youtube.com/watch?v=MzVFrIAwwS8) +- Kyle Robinson Young | 08-Jul-15 - [Getting Started with Webpack.](https://www.youtube.com/watch?v=TaWKUpahFZM) +- Tasveer Singh at TorontoJS Tech Talk | 09-Apr-15 - [Webpack.](https://www.youtube.com/watch?v=TaWKUpahFZM) +- Jeremy Lund at Mountain West JS | 28-Mar-15 - [Gift Wrap Your Code with Webpack.](https://www.youtube.com/watch?v=ANMN9M9LhNQ) + +### Courses + +- [Webpack for Everyone](https://laracasts.com/series/webpack-for-everyone) - Free Laracasts series by [Jeffrey Way](http://twitter.com/jeffrey_way) +- [Webpack Fundamentals](https://frontendmasters.com/courses/webpack-fundamentals/) - Brief introduction about Webpack fundamentals by [Sean Larkin](https://twitter.com/thelarkinn) +- [Web Performance with Webpack](https://frontendmasters.com/courses/performance-webpack/) - Solving common web performance problems using Webpack by [Sean Larkin](https://twitter.com/thelarkinn) +- [Intro to webpack (playlist)](https://egghead.io/playlists/intro-to-webpack-4ca2d994) - Egghead.io playlist of a few videos by [Kent C. Dodds](https://twitter.com/kentcdodds) (the first is free). +- [Angular and Webpack for modular applications](https://egghead.io/courses/angular-and-webpack-for-modular-applications) - Egghead.io course by [Kent C. Dodds](https://twitter.com/kentcdodds) +- [Using Webpack for Production JavaScript Applications](https://egghead.io/courses/using-webpack-for-production-javascript-applications) - Egghead.io course by [Kent C. Dodds](https://twitter.com/kentcdodds) (advanced) +- [Webpack Fundamentals](https://www.pluralsight.com/courses/webpack-fundamentals) - [Joe Eames](https://twitter.com/josepheames) for Pluralsight (intermediate) +- [Webpack Academy](https://webpack.academy) - A comprehensive webpack learning resource. +- [Webpack from scratch series](https://www.youtube.com/playlist?list=PLLhEJK7fQIxB2gZBIzYI50NPsAQERD9rL) on YouTube by Paris Nakita Kejser + +### Books + +- [SurviveJS - Webpack](http://survivejs.com/webpack/introduction): Free book guiding from a webpack apprentice to master. Covers dev, prod, and advanced topics. + +### Webpack Examples + +- [Webpack Examples](https://github.com/webpack/webpack/tree/master/examples): Examples of common Webpack functionality. + +### Community Examples + +#### Angular + +- [Angular2 Webpack Starter](https://github.com/AngularClass/angular2-webpack-starter) - A Webpack driven Angular 2 Starter kit from [AngularClass](https://github.com/AngularClass). +- [Angular2 Webpack](https://github.com/preboot/angular2-webpack) - A complete, yet simple, starter for Angular 2 using Webpack from [Preboot](https://github.com/preboot). +- [Angular2 Webpack Visual Studio](https://github.com/damienbod/Angular2WebpackVisualStudio) - ASP.NET Core, Angular2 with Webpack and Visual Studio from [Damien Bod](https://github.com/damienbod). +- [Angular2 Starter](https://github.com/schempy/angular2-typescript-webpack) - Angular2 starter kit with Typescript and Webpack from [Brian Schemp](https://github.com/schempy). +- [Angular2 Seed](https://github.com/angular/angular2-seed/) - A simple starter demonstrating the basic concepts of Angular2 from [Pawel Kozlowski](https://github.com/pkozlowski-opensource). + +#### Framework Agnostic + +- [ES6 TodoMVC with Webpack](https://github.com/kentcdodds/es6-todomvc) - Repo used to teach webpack. (Check branches). from [Kent C. Dodds](https://github.com/kentcdodds). + +#### React + +- [Create React App](https://github.com/facebookincubator/create-react-app) - Create React apps with no build configuration from [Dan Abramov](https://github.com/gaearon). +- [React Starter Kit](https://github.com/kriasoft/react-starter-kit) - Isomorphic web app boilerplate from [Kriasoft Team](https://github.com/kriasoft). +- [React Redux Universal](https://github.com/erikras/react-redux-universal-hot-example) - A starter boilerplate for a universal webapp from [Erik Rasmussen](https://github.com/erikras). +- [Frontend Boilerplate](https://github.com/tj/frontend-boilerplate) - A boilerplate of things that mostly shouldn't exist from [TJ Holowaychuk](https://github.com/tj). +- [ReactGo](https://github.com/reactGo/reactGo) - Your One-Stop solution for a full-stack universal Redux from [Ken Ding](https://github.com/choonkending). +- [React Native Calculator](https://github.com/benoitvallon/react-native-nw-react-calculator) - Mobile, desktop and website Apps with the same code from [Benoit Vallon](https://github.com/benoitvallon). +- [React Cordova Boilerplate](https://github.com/unimonkiez/react-cordova-boilerplate) - TodoMVC example for React with Cordova from [Yuval Saraf](https://github.com/unimonkiez). +- [React Universally](https://github.com/ctrlplusb/react-universally) - A starter kit giving you the minimum for a production ready universal react application. +- [Razzle Material-UI Styled Example](https://github.com/kireerik/razzle-material-ui-styled-example) - With Styled Components using Express with compression from [Erik Engi](https://github.com/kireerik). +- [Read](https://github.com/logustra/read) - A highly scalable react boilerplate from [logustra](https://github.com/logustra) + +#### Vue + +- [Vuad](https://github.com/logustra/vuad) - A highly scalable vue boilerplate from [logustra](https://github.com/logustra) + +### Other + +- [Juho, Johannes, Tobias & Sean on JavaScript Air](http://jsair.io/webpack) - [JavaScript Air](https://javascriptair.com) podcast +- [Webpack interview questions](https://github.com/styopdev/webpack-interview-questions) - Interview questions with answers. +- [Visual config tool for webpack](https://webpack.jakoblind.no) - A visual tool for creating webpack configs in your browser + +[twittericon]: https://rawgit.com/d3viant0ne/awesome-webpack/master/media/twitter-square.svg +[githubicon]: https://rawgit.com/d3viant0ne/awesome-webpack/master/media/github-square.svg diff --git a/src/content/loaders/index.md b/src/content/loaders/index.md index a94d09573eaa..fac1b8fb3b80 100644 --- a/src/content/loaders/index.md +++ b/src/content/loaders/index.md @@ -67,4 +67,4 @@ Loaders are activated by using `loadername!` prefixes in `require()` statements, ## Awesome -For more third-party loaders, see the list from [awesome-webpack](https://github.com/webpack-contrib/awesome-webpack#loaders). +For more third-party loaders, see the list from [awesome-webpack](/awesome-webpack/#loaders). diff --git a/src/content/migrate/4.md b/src/content/migrate/4.md index 6b22109dbc9e..65ae899b142e 100644 --- a/src/content/migrate/4.md +++ b/src/content/migrate/4.md @@ -30,7 +30,7 @@ The installation guide can be found [here](/guides/installation). ## Update plugins -Many 3rd party plugins need to be updated to the latest versions to be compatible with webpack 4. Links to popular plugins can be found [here](https://github.com/webpack-contrib/awesome-webpack#webpack-plugins). +Many 3rd party plugins need to be updated to the latest versions to be compatible with webpack 4. Links to popular plugins can be found [here](/awesome-webpack/#webpack-plugins). ## mode diff --git a/src/content/plugins/index.md b/src/content/plugins/index.md index f76b116038be..3655ee2eb2e7 100644 --- a/src/content/plugins/index.md +++ b/src/content/plugins/index.md @@ -42,4 +42,4 @@ webpack has a rich plugin interface. Most of the features within webpack itself | [`EvalSourceMapDevToolPlugin`](/plugins/eval-source-map-dev-tool-plugin) | Enables a more fine grained control of eval source maps | | [`TerserPlugin`](/plugins/terser-webpack-plugin/) | Uses Terser to minify the JS in your project | -For more third-party plugins, see the list from [awesome-webpack](https://github.com/webpack-contrib/awesome-webpack#webpack-plugins). +For more third-party plugins, see the list from [awesome-webpack](/awesome-webpack/#webpack-plugins). From ee9761e61d3ed03ccd5c0938c5d420796d5f860b Mon Sep 17 00:00:00 2001 From: Sam Chen Date: Tue, 10 Aug 2021 21:16:38 +0800 Subject: [PATCH 07/32] migrate md to mdx (#5233) * rename vote.md to vote.mdx * rename license.md to license.mdx * rename glossary.md to glossary.mdx * rename comparison.md to .mdx * rename html-webpack-plugin.md * rename automatic-prefetch-plugin.md * rename banner-plugin.md * rename commons-chunk-plugin.md * rename context-exclusion-plugin.md * rename context-replacement-plugin.md * rename dll-plugin.md * rename environment-plugin.md * rename eval-source-map-dev-tool-plugin.md * rename hashed-module-ids-plugin.md * rename hot-module-replacement-plugin.md * rename ignore-plugin.md * rename index.md * rename limit-chunk-count-plugin.md * rename module-concatenation-plugin.md * rename module-concatenation-plugin.md * rename NoEmitOnErrorsPlugin.md * rename normal-module-replacement-plugin.md * rename prefetch-plugin.md * rename profiling-plugin.md * rename progress-plugin.md * rename provide-plugin.md * rename source-map-dev-tool-plugin.md * rename split-chunks-plugin.md * rename watch-ignore-plugin.md * rename 3.md and fix whitespaces * rename 4.md * rename 5.md * rename index.md * rename blogs * rename api * rename concepts * fix proselint * rename why-webpack.md * rename configuration * rename contribute * rename guides * rename branding.md * Revert "rename branding.md" This reverts commit 2f58c585442a37665b9703c59848bafa962114da. * rename printable.md * Revert "rename printable.md" This reverts commit d256dc374ab92be773562a9c80797aa807fc4146. * rename index.md * Revert "Revert "rename branding.md"" This reverts commit 4abb3a894324416b2d4871dff7a76b6079975cc5. * extract style * Revert "Revert "rename printable.md"" This reverts commit 20799a8308ff20830b992e42fc188eb618eadec2. * Revert "Revert "Revert "rename printable.md""" This reverts commit 9a7a3eaa36bfbf653b347c276ccef22cc3d83937. * Update src/content/concepts/configuration.mdx * rename to mdx --- src/components/BrandingSample.jsx | 7 ++ src/components/Site/Site.jsx | 2 +- src/components/Splash/Splash.jsx | 8 +- src/components/Splash/first/left.mdx | 7 ++ src/components/Splash/first/right.mdx | 7 ++ src/components/Splash/second/left.mdx | 13 ++++ src/components/Splash/second/right.mdx | 15 ++++ src/content/api/{cli.md => cli.mdx} | 0 ...ation-object.md => compilation-object.mdx} | 0 .../{compiler-hooks.md => compiler-hooks.mdx} | 0 ...ooks.md => contextmodulefactory-hooks.mdx} | 0 src/content/api/{index.md => index.mdx} | 0 src/content/api/{logging.md => logging.mdx} | 0 ...hooks.md => normalmodulefactory-hooks.mdx} | 0 src/content/api/{parser.md => parser.mdx} | 0 src/content/api/{plugins.md => plugins.mdx} | 0 .../api/{resolvers.md => resolvers.mdx} | 0 ...awesome-webpack.md => awesome-webpack.mdx} | 2 +- ...se.md => 2020-10-10-webpack-5-release.mdx} | 2 +- ...ap-2021.md => 2020-12-08-roadmap-2021.mdx} | 0 src/content/blog/{index.md => index.mdx} | 0 src/content/{branding.md => branding.mdx} | 69 +++++++++++----- src/content/{comparison.md => comparison.mdx} | 0 .../{configuration.md => configuration.mdx} | 0 ...pendency-graph.md => dependency-graph.mdx} | 0 ...lacement.md => hot-module-replacement.mdx} | 0 src/content/concepts/{index.md => index.mdx} | 0 .../concepts/{manifest.md => manifest.mdx} | 0 ...le-resolution.md => module-resolution.mdx} | 0 .../concepts/{modules.md => modules.mdx} | 0 .../concepts/{output.md => output.mdx} | 0 .../concepts/{plugins.md => plugins.mdx} | 2 +- .../concepts/{targets.md => targets.mdx} | 0 .../{under-the-hood.md => under-the-hood.mdx} | 0 .../{why-webpack.md => why-webpack.mdx} | 0 ...nguages.md => configuration-languages.mdx} | 0 .../{dev-server.md => dev-server.mdx} | 0 .../configuration/{devtool.md => devtool.mdx} | 0 .../{entry-context.md => entry-context.mdx} | 0 .../configuration/{node.md => node.mdx} | 0 .../{performance.md => performance.mdx} | 0 .../configuration/{plugins.md => plugins.mdx} | 0 .../configuration/{target.md => target.mdx} | 0 .../{debugging.md => debugging.mdx} | 0 .../contribute/{index.md => index.mdx} | 19 +++-- ...plugin-patterns.md => plugin-patterns.mdx} | 0 .../{writers-guide.md => writers-guide.mdx} | 0 ...iting-a-loader.md => writing-a-loader.mdx} | 0 ...iting-a-plugin.md => writing-a-plugin.mdx} | 0 src/content/{glossary.md => glossary.mdx} | 0 ...set-management.md => asset-management.mdx} | 2 +- .../{asset-modules.md => asset-modules.mdx} | 0 ...thor-libraries.md => author-libraries.mdx} | 0 ...d-performance.md => build-performance.mdx} | 0 .../guides/{caching.md => caching.mdx} | 8 +- .../{code-splitting.md => code-splitting.mdx} | 2 +- src/content/guides/{csp.md => csp.mdx} | 0 ...anagement.md => dependency-management.mdx} | 0 ...ent-vagrant.md => development-vagrant.mdx} | 0 .../{development.md => development.mdx} | 0 .../{entry-advanced.md => entry-advanced.mdx} | 0 ...variables.md => environment-variables.mdx} | 0 ...lacement.md => hot-module-replacement.mdx} | 0 src/content/guides/{index.md => index.mdx} | 0 .../{installation.md => installation.mdx} | 0 .../{integrations.md => integrations.mdx} | 0 .../{lazy-loading.md => lazy-loading.mdx} | 0 ...ut-management.md => output-management.mdx} | 0 .../guides/{production.md => production.mdx} | 0 ...ion.md => progressive-web-application.mdx} | 0 .../{public-path.md => public-path.mdx} | 0 .../guides/{shimming.md => shimming.mdx} | 0 .../{tree-shaking.md => tree-shaking.mdx} | 0 .../guides/{typescript.md => typescript.mdx} | 0 src/content/index.md | 78 ------------------- src/content/index.mdx | 37 +++++++++ src/content/{license.md => license.mdx} | 0 src/content/loaders/{index.md => index.mdx} | 0 src/content/migrate/{3.md => 3.mdx} | 4 +- src/content/migrate/{4.md => 4.mdx} | 0 src/content/migrate/{5.md => 5.mdx} | 0 src/content/migrate/{index.md => index.mdx} | 0 ...rorsPlugin.md => NoEmitOnErrorsPlugin.mdx} | 0 ...lugin.md => automatic-prefetch-plugin.mdx} | 0 .../{banner-plugin.md => banner-plugin.mdx} | 0 ...unk-plugin.md => commons-chunk-plugin.mdx} | 0 ...plugin.md => context-exclusion-plugin.mdx} | 0 ...ugin.md => context-replacement-plugin.mdx} | 0 .../plugins/{dll-plugin.md => dll-plugin.mdx} | 0 ...nment-plugin.md => environment-plugin.mdx} | 0 ...md => eval-source-map-dev-tool-plugin.mdx} | 0 ...plugin.md => hashed-module-ids-plugin.mdx} | 0 ...n.md => hot-module-replacement-plugin.mdx} | 0 ...pack-plugin.md => html-webpack-plugin.mdx} | 0 .../{ignore-plugin.md => ignore-plugin.mdx} | 0 src/content/plugins/{index.md => index.mdx} | 0 ...plugin.md => limit-chunk-count-plugin.mdx} | 0 ...ze-plugin.md => min-chunk-size-plugin.mdx} | 0 ...gin.md => module-concatenation-plugin.mdx} | 0 ...d => normal-module-replacement-plugin.mdx} | 0 ...prefetch-plugin.md => prefetch-plugin.mdx} | 0 ...ofiling-plugin.md => profiling-plugin.mdx} | 0 ...progress-plugin.md => progress-plugin.mdx} | 0 .../{provide-plugin.md => provide-plugin.mdx} | 0 ...ugin.md => source-map-dev-tool-plugin.mdx} | 0 ...unks-plugin.md => split-chunks-plugin.mdx} | 0 ...nore-plugin.md => watch-ignore-plugin.mdx} | 0 src/content/{vote.md => vote.mdx} | 0 108 files changed, 161 insertions(+), 123 deletions(-) create mode 100644 src/components/BrandingSample.jsx create mode 100644 src/components/Splash/first/left.mdx create mode 100644 src/components/Splash/first/right.mdx create mode 100644 src/components/Splash/second/left.mdx create mode 100644 src/components/Splash/second/right.mdx rename src/content/api/{cli.md => cli.mdx} (100%) rename src/content/api/{compilation-object.md => compilation-object.mdx} (100%) rename src/content/api/{compiler-hooks.md => compiler-hooks.mdx} (100%) rename src/content/api/{contextmodulefactory-hooks.md => contextmodulefactory-hooks.mdx} (100%) rename src/content/api/{index.md => index.mdx} (100%) rename src/content/api/{logging.md => logging.mdx} (100%) rename src/content/api/{normalmodulefactory-hooks.md => normalmodulefactory-hooks.mdx} (100%) rename src/content/api/{parser.md => parser.mdx} (100%) rename src/content/api/{plugins.md => plugins.mdx} (100%) rename src/content/api/{resolvers.md => resolvers.mdx} (100%) rename src/content/{awesome-webpack.md => awesome-webpack.mdx} (99%) rename src/content/blog/{2020-10-10-webpack-5-release.md => 2020-10-10-webpack-5-release.mdx} (99%) rename src/content/blog/{2020-12-08-roadmap-2021.md => 2020-12-08-roadmap-2021.mdx} (100%) rename src/content/blog/{index.md => index.mdx} (100%) rename src/content/{branding.md => branding.mdx} (62%) rename src/content/{comparison.md => comparison.mdx} (100%) rename src/content/concepts/{configuration.md => configuration.mdx} (100%) rename src/content/concepts/{dependency-graph.md => dependency-graph.mdx} (100%) rename src/content/concepts/{hot-module-replacement.md => hot-module-replacement.mdx} (100%) rename src/content/concepts/{index.md => index.mdx} (100%) rename src/content/concepts/{manifest.md => manifest.mdx} (100%) rename src/content/concepts/{module-resolution.md => module-resolution.mdx} (100%) rename src/content/concepts/{modules.md => modules.mdx} (100%) rename src/content/concepts/{output.md => output.mdx} (100%) rename src/content/concepts/{plugins.md => plugins.mdx} (98%) rename src/content/concepts/{targets.md => targets.mdx} (100%) rename src/content/concepts/{under-the-hood.md => under-the-hood.mdx} (100%) rename src/content/concepts/{why-webpack.md => why-webpack.mdx} (100%) rename src/content/configuration/{configuration-languages.md => configuration-languages.mdx} (100%) rename src/content/configuration/{dev-server.md => dev-server.mdx} (100%) rename src/content/configuration/{devtool.md => devtool.mdx} (100%) rename src/content/configuration/{entry-context.md => entry-context.mdx} (100%) rename src/content/configuration/{node.md => node.mdx} (100%) rename src/content/configuration/{performance.md => performance.mdx} (100%) rename src/content/configuration/{plugins.md => plugins.mdx} (100%) rename src/content/configuration/{target.md => target.mdx} (100%) rename src/content/contribute/{debugging.md => debugging.mdx} (100%) rename src/content/contribute/{index.md => index.mdx} (94%) rename src/content/contribute/{plugin-patterns.md => plugin-patterns.mdx} (100%) rename src/content/contribute/{writers-guide.md => writers-guide.mdx} (100%) rename src/content/contribute/{writing-a-loader.md => writing-a-loader.mdx} (100%) rename src/content/contribute/{writing-a-plugin.md => writing-a-plugin.mdx} (100%) rename src/content/{glossary.md => glossary.mdx} (100%) rename src/content/guides/{asset-management.md => asset-management.mdx} (99%) rename src/content/guides/{asset-modules.md => asset-modules.mdx} (100%) rename src/content/guides/{author-libraries.md => author-libraries.mdx} (100%) rename src/content/guides/{build-performance.md => build-performance.mdx} (100%) rename src/content/guides/{caching.md => caching.mdx} (98%) rename src/content/guides/{code-splitting.md => code-splitting.mdx} (99%) rename src/content/guides/{csp.md => csp.mdx} (100%) rename src/content/guides/{dependency-management.md => dependency-management.mdx} (100%) rename src/content/guides/{development-vagrant.md => development-vagrant.mdx} (100%) rename src/content/guides/{development.md => development.mdx} (100%) rename src/content/guides/{entry-advanced.md => entry-advanced.mdx} (100%) rename src/content/guides/{environment-variables.md => environment-variables.mdx} (100%) rename src/content/guides/{hot-module-replacement.md => hot-module-replacement.mdx} (100%) rename src/content/guides/{index.md => index.mdx} (100%) rename src/content/guides/{installation.md => installation.mdx} (100%) rename src/content/guides/{integrations.md => integrations.mdx} (100%) rename src/content/guides/{lazy-loading.md => lazy-loading.mdx} (100%) rename src/content/guides/{output-management.md => output-management.mdx} (100%) rename src/content/guides/{production.md => production.mdx} (100%) rename src/content/guides/{progressive-web-application.md => progressive-web-application.mdx} (100%) rename src/content/guides/{public-path.md => public-path.mdx} (100%) rename src/content/guides/{shimming.md => shimming.mdx} (100%) rename src/content/guides/{tree-shaking.md => tree-shaking.mdx} (100%) rename src/content/guides/{typescript.md => typescript.mdx} (100%) delete mode 100644 src/content/index.md create mode 100644 src/content/index.mdx rename src/content/{license.md => license.mdx} (100%) rename src/content/loaders/{index.md => index.mdx} (100%) rename src/content/migrate/{3.md => 3.mdx} (96%) rename src/content/migrate/{4.md => 4.mdx} (100%) rename src/content/migrate/{5.md => 5.mdx} (100%) rename src/content/migrate/{index.md => index.mdx} (100%) rename src/content/plugins/{NoEmitOnErrorsPlugin.md => NoEmitOnErrorsPlugin.mdx} (100%) rename src/content/plugins/{automatic-prefetch-plugin.md => automatic-prefetch-plugin.mdx} (100%) rename src/content/plugins/{banner-plugin.md => banner-plugin.mdx} (100%) rename src/content/plugins/{commons-chunk-plugin.md => commons-chunk-plugin.mdx} (100%) rename src/content/plugins/{context-exclusion-plugin.md => context-exclusion-plugin.mdx} (100%) rename src/content/plugins/{context-replacement-plugin.md => context-replacement-plugin.mdx} (100%) rename src/content/plugins/{dll-plugin.md => dll-plugin.mdx} (100%) rename src/content/plugins/{environment-plugin.md => environment-plugin.mdx} (100%) rename src/content/plugins/{eval-source-map-dev-tool-plugin.md => eval-source-map-dev-tool-plugin.mdx} (100%) rename src/content/plugins/{hashed-module-ids-plugin.md => hashed-module-ids-plugin.mdx} (100%) rename src/content/plugins/{hot-module-replacement-plugin.md => hot-module-replacement-plugin.mdx} (100%) rename src/content/plugins/{html-webpack-plugin.md => html-webpack-plugin.mdx} (100%) rename src/content/plugins/{ignore-plugin.md => ignore-plugin.mdx} (100%) rename src/content/plugins/{index.md => index.mdx} (100%) rename src/content/plugins/{limit-chunk-count-plugin.md => limit-chunk-count-plugin.mdx} (100%) rename src/content/plugins/{min-chunk-size-plugin.md => min-chunk-size-plugin.mdx} (100%) rename src/content/plugins/{module-concatenation-plugin.md => module-concatenation-plugin.mdx} (100%) rename src/content/plugins/{normal-module-replacement-plugin.md => normal-module-replacement-plugin.mdx} (100%) rename src/content/plugins/{prefetch-plugin.md => prefetch-plugin.mdx} (100%) rename src/content/plugins/{profiling-plugin.md => profiling-plugin.mdx} (100%) rename src/content/plugins/{progress-plugin.md => progress-plugin.mdx} (100%) rename src/content/plugins/{provide-plugin.md => provide-plugin.mdx} (100%) rename src/content/plugins/{source-map-dev-tool-plugin.md => source-map-dev-tool-plugin.mdx} (100%) rename src/content/plugins/{split-chunks-plugin.md => split-chunks-plugin.mdx} (100%) rename src/content/plugins/{watch-ignore-plugin.md => watch-ignore-plugin.mdx} (100%) rename src/content/{vote.md => vote.mdx} (100%) diff --git a/src/components/BrandingSample.jsx b/src/components/BrandingSample.jsx new file mode 100644 index 000000000000..a1f0b81c2564 --- /dev/null +++ b/src/components/BrandingSample.jsx @@ -0,0 +1,7 @@ +import PropTypes from 'prop-types'; +BrandingSample.propTypes = { + color: PropTypes.string.isRequired, +}; +export default function BrandingSample({ color }) { + return
 
; +} diff --git a/src/components/Site/Site.jsx b/src/components/Site/Site.jsx index 99d9709d26a5..bfde423d3cdb 100644 --- a/src/components/Site/Site.jsx +++ b/src/components/Site/Site.jsx @@ -77,7 +77,7 @@ function Site(props) { */ const _strip = (array) => { let anchorTitleIndex = array.findIndex( - (item) => item.name.toLowerCase() === 'index.md' + (item) => item.name.toLowerCase() === 'index.mdx' ); if (anchorTitleIndex !== -1) { diff --git a/src/components/Splash/Splash.jsx b/src/components/Splash/Splash.jsx index c3280e37803a..eddd096dbf6b 100644 --- a/src/components/Splash/Splash.jsx +++ b/src/components/Splash/Splash.jsx @@ -11,7 +11,7 @@ import { PlaceholderComponent } from '../Placeholder/Placeholder'; import isClient from '../../utilities/is-client'; // Import Demo Content -import SplashContent from '../../content/index.md'; +import SplashContent from '../../content/index.mdx'; // Load Styling import './Splash.scss'; @@ -55,11 +55,7 @@ const Splash = () => {
-
+
diff --git a/src/components/Splash/first/left.mdx b/src/components/Splash/first/left.mdx new file mode 100644 index 000000000000..72356a89653e --- /dev/null +++ b/src/components/Splash/first/left.mdx @@ -0,0 +1,7 @@ +**src/index.js** + +```js +import bar from './bar.js'; + +bar(); +``` diff --git a/src/components/Splash/first/right.mdx b/src/components/Splash/first/right.mdx new file mode 100644 index 000000000000..d8a33c6f0595 --- /dev/null +++ b/src/components/Splash/first/right.mdx @@ -0,0 +1,7 @@ +**src/bar.js** + +```js +export default function bar() { + // +} +``` diff --git a/src/components/Splash/second/left.mdx b/src/components/Splash/second/left.mdx new file mode 100644 index 000000000000..657fecab9da0 --- /dev/null +++ b/src/components/Splash/second/left.mdx @@ -0,0 +1,13 @@ +**[Without config](https://youtu.be/3Nv9muOkb6k?t=21293)** or provide custom **webpack.config.js** + +```js +const path = require('path'); + +module.exports = { + entry: './src/index.js', + output: { + path: path.resolve(__dirname, 'dist'), + filename: 'bundle.js', + }, +}; +``` diff --git a/src/components/Splash/second/right.mdx b/src/components/Splash/second/right.mdx new file mode 100644 index 000000000000..3dc7ff2fbc27 --- /dev/null +++ b/src/components/Splash/second/right.mdx @@ -0,0 +1,15 @@ +**page.html** + +```html + + + + + ... + + + ... + + + +``` diff --git a/src/content/api/cli.md b/src/content/api/cli.mdx similarity index 100% rename from src/content/api/cli.md rename to src/content/api/cli.mdx diff --git a/src/content/api/compilation-object.md b/src/content/api/compilation-object.mdx similarity index 100% rename from src/content/api/compilation-object.md rename to src/content/api/compilation-object.mdx diff --git a/src/content/api/compiler-hooks.md b/src/content/api/compiler-hooks.mdx similarity index 100% rename from src/content/api/compiler-hooks.md rename to src/content/api/compiler-hooks.mdx diff --git a/src/content/api/contextmodulefactory-hooks.md b/src/content/api/contextmodulefactory-hooks.mdx similarity index 100% rename from src/content/api/contextmodulefactory-hooks.md rename to src/content/api/contextmodulefactory-hooks.mdx diff --git a/src/content/api/index.md b/src/content/api/index.mdx similarity index 100% rename from src/content/api/index.md rename to src/content/api/index.mdx diff --git a/src/content/api/logging.md b/src/content/api/logging.mdx similarity index 100% rename from src/content/api/logging.md rename to src/content/api/logging.mdx diff --git a/src/content/api/normalmodulefactory-hooks.md b/src/content/api/normalmodulefactory-hooks.mdx similarity index 100% rename from src/content/api/normalmodulefactory-hooks.md rename to src/content/api/normalmodulefactory-hooks.mdx diff --git a/src/content/api/parser.md b/src/content/api/parser.mdx similarity index 100% rename from src/content/api/parser.md rename to src/content/api/parser.mdx diff --git a/src/content/api/plugins.md b/src/content/api/plugins.mdx similarity index 100% rename from src/content/api/plugins.md rename to src/content/api/plugins.mdx diff --git a/src/content/api/resolvers.md b/src/content/api/resolvers.mdx similarity index 100% rename from src/content/api/resolvers.md rename to src/content/api/resolvers.mdx diff --git a/src/content/awesome-webpack.md b/src/content/awesome-webpack.mdx similarity index 99% rename from src/content/awesome-webpack.md rename to src/content/awesome-webpack.mdx index 14d8cfa047b1..ada3e14c132d 100644 --- a/src/content/awesome-webpack.md +++ b/src/content/awesome-webpack.mdx @@ -198,7 +198,7 @@ _People passionate about Webpack (In no particular order)_ - Joseph Zimmerman | 2-Feb-17 - [A Detailed Introduction To Webpack.](https://www.smashingmagazine.com/2017/02/a-detailed-introduction-to-webpack/) - Jamund Ferguson | 22-Jul-16 - [Manually Tuning Webpack Builds.](https://medium.com/@xjamundx/manually-tuning-webpack-builds-284923f47f44#.lbvkidezh) - Sean T. Larkin | 21-Jul-16 - [Learn and Debug webpack with Chrome Dev Tools!.](https://medium.com/webpack/webpack-bits-learn-and-debug-webpack-with-chrome-dev-tools-da1c5b19554#.gpoentuxe) -- Raja Rao DV | 10-Apr-16 - [Webpack  —  The Confusing Parts.](https://medium.com/@rajaraodv/webpack-the-confusing-parts-58712f8fcad9#.qmfmplobc) +- Raja Rao DV | 10-Apr-16 - [Webpack — The Confusing Parts.](https://medium.com/@rajaraodv/webpack-the-confusing-parts-58712f8fcad9#.qmfmplobc) - Andrew Ray | 09-Apr-16 - [Webpack: When To Use and Why.](http://blog.andrewray.me/webpack-when-to-use-and-why/) - Jonathan Creamer | 25-Feb-16 - [WebPack Code splitting with ES6 and Babel 6.](http://jonathancreamer.com/webpack-code-splitting-with-es6-and-babel-6/) - Ilya Zayats | 07-Feb-16 - [How to split your apps by routes with Webpack.](https://medium.com/@somebody32/how-to-split-your-apps-by-routes-with-webpack-36b7a8a6231#.iy99i4f7r) diff --git a/src/content/blog/2020-10-10-webpack-5-release.md b/src/content/blog/2020-10-10-webpack-5-release.mdx similarity index 99% rename from src/content/blog/2020-10-10-webpack-5-release.md rename to src/content/blog/2020-10-10-webpack-5-release.mdx index 4b04ce8238ae..65b0f59fc2aa 100644 --- a/src/content/blog/2020-10-10-webpack-5-release.md +++ b/src/content/blog/2020-10-10-webpack-5-release.mdx @@ -96,7 +96,7 @@ Behavior can be changed with `Rule.parser.requireInclude` to allowed, deprecated ### Automatic Node.js Polyfills Removed -In the early days, webpack's aim was to allow running most Node.js modules in the browser, but the module landscape changed and many module uses are now written mainly for frontend purposes. webpack <= 4 ships with polyfills for many of the Node.js core modules, which are automatically applied once a module uses any of the core modules (i.e. the `crypto` module). +In the early days, webpack's aim was to allow running most Node.js modules in the browser, but the module landscape changed and many module uses are now written mainly for frontend purposes. webpack <= 4 ships with polyfills for many of the Node.js core modules, which are automatically applied once a module uses any of the core modules (i.e. the `crypto` module). While this makes using modules written for Node.js easier, it adds these huge polyfills to the bundle. In many cases these polyfills are unnecessary. diff --git a/src/content/blog/2020-12-08-roadmap-2021.md b/src/content/blog/2020-12-08-roadmap-2021.mdx similarity index 100% rename from src/content/blog/2020-12-08-roadmap-2021.md rename to src/content/blog/2020-12-08-roadmap-2021.mdx diff --git a/src/content/blog/index.md b/src/content/blog/index.mdx similarity index 100% rename from src/content/blog/index.md rename to src/content/blog/index.mdx diff --git a/src/content/branding.md b/src/content/branding.mdx similarity index 62% rename from src/content/branding.md rename to src/content/branding.mdx index 36b9b91fdc2f..14a441009d2d 100644 --- a/src/content/branding.md +++ b/src/content/branding.mdx @@ -8,6 +8,8 @@ contributors: - byzyk --- +import BrandingSample from '../components/BrandingSample.jsx'; + Here you can find **webpack** project brand guidelines, assets, and license. See our official [media repository](https://github.com/webpack/media) for more information and to find the [license](https://github.com/webpack/media/blob/master/LICENSE) that governs this work. Click any of the images to download them. ## The Name @@ -18,7 +20,10 @@ Webpack can be written with a capital W when used at the start of a sentence, ot The webpack logo should be placed on a white background with enough space around it like this: -webpack logo default with proper spacing on light background +webpack logo default with proper spacing on light background [svg](https://github.com/webpack/media/blob/master/logo/logo-on-white-bg.svg) | [png](https://github.com/webpack/media/blob/master/logo/logo-on-white-bg.png) | [jpg](https://github.com/webpack/media/blob/master/logo/logo-on-white-bg.jpg) @@ -26,8 +31,16 @@ Double the size of the inner dark blue cube to get an idea how much space the lo For dark backgrounds, you can use the negative version of the logo: -
- webpack logo default with proper spacing on light background +export const style = { + display: 'block', + background: '#111', +}; + +
+ webpack logo default with proper spacing on light background
[svg](https://github.com/webpack/media/blob/master/logo/logo-on-dark-bg.svg) | [png](https://github.com/webpack/media/blob/master/logo/logo-on-dark-bg.png) | [jpg](https://github.com/webpack/media/blob/master/logo/logo-on-dark-bg.jpg) @@ -38,43 +51,59 @@ T> Please use the **icon + text** whenever possible. **The icon is designed to be used in layout-constrained areas. As previously stated, please prefer icon + text.** -icon example +icon example [svg](https://github.com/webpack/media/blob/master/logo/icon.svg) | [png](https://github.com/webpack/media/blob/master/logo/icon.png) | [jpg](https://github.com/webpack/media/blob/master/logo/icon.jpg) Square-sized icon for bigger areas (like avatars or profile pictures): -icon square big example +icon square big example [svg](https://github.com/webpack/media/blob/master/logo/icon-square-big.svg) | [png](https://github.com/webpack/media/blob/master/logo/icon-square-big.png) | [jpg](https://github.com/webpack/media/blob/master/logo/icon-square-big.jpg) Square-sized icon for smaller areas (like favicons): -icon square small example +icon square small example [svg](https://github.com/webpack/media/blob/master/logo/icon-square-small.svg) | [png](https://github.com/webpack/media/blob/master/logo/icon-square-small.png) | [jpg](https://github.com/webpack/media/blob/master/logo/icon-square-small.jpg) T> For those of you following our guidelines and have gotten this far, we've made a special smaller size image used especially for custom emoji (like in a slack or gitter channel ;)) -icon square small example +icon square small example ## Color Palette The following colors are used throughout the site in various combinations and on our fancy clothing line launched with the help of [Open Collective](https://opencollective.com/) and [Threadless](https://medium.com/u/840563ee2a56) over at the [official webpack store](https://webpack.threadless.com/collections/the-final-release-collection/)! -| Color Name | HEX Code | RGB Code | Sample | -| ------------ | ------------- | -------------------- | ---------------------------------------------------- | -| Malibu: | HEX `#8dd6f9` | `rgb: 141, 214, 249` |
 
| -| Denim: | HEX `#1d78c1` | `rgb: 29, 120, 193` |
 
| -| Fiord: | HEX `#465E69` | `rgb: 70, 94, 105` |
 
| -| Outer Space: | HEX `#2B3A42` | `rgb: 43, 58, 66` |
 
| -| White: | HEX `#ffffff` | `rgb: 255, 255, 255` |
 
| -| Concrete: | HEX `#f2f2f2` | `rgb: 242, 242, 242` |
 
| -| Alto: | HEX `#dedede` | `rgb: 222, 222, 222` |
 
| -| Dusty Gray: | HEX `#999999` | `rgb: 153, 153, 153` |
 
| -| Dove Gray: | HEX `#666666` | `rgb: 102, 102, 102` |
 
| -| Emperor: | HEX `#535353` | `rgb: 83, 83, 83` |
 
| -| Mine Shaft: | HEX `#333333` | `rgb: 51, 51, 51` |
 
| +| Color Name | HEX Code | RGB Code | Sample | +| ------------ | ------------- | -------------------- | ---------------------------------- | +| Malibu: | HEX `#8dd6f9` | `rgb: 141, 214, 249` | | +| Denim: | HEX `#1d78c1` | `rgb: 29, 120, 193` | | +| Fiord: | HEX `#465E69` | `rgb: 70, 94, 105` | | +| Outer Space: | HEX `#2B3A42` | `rgb: 43, 58, 66` | | +| White: | HEX `#ffffff` | `rgb: 255, 255, 255` | | +| Concrete: | HEX `#f2f2f2` | `rgb: 242, 242, 242` | | +| Alto: | HEX `#dedede` | `rgb: 222, 222, 222` | | +| Dusty Gray: | HEX `#999999` | `rgb: 153, 153, 153` | | +| Dove Gray: | HEX `#666666` | `rgb: 102, 102, 102` | | +| Emperor: | HEX `#535353` | `rgb: 83, 83, 83` | | +| Mine Shaft: | HEX `#333333` | `rgb: 51, 51, 51` | | In addition, you can grab the following file types directly from these links: diff --git a/src/content/comparison.md b/src/content/comparison.mdx similarity index 100% rename from src/content/comparison.md rename to src/content/comparison.mdx diff --git a/src/content/concepts/configuration.md b/src/content/concepts/configuration.mdx similarity index 100% rename from src/content/concepts/configuration.md rename to src/content/concepts/configuration.mdx diff --git a/src/content/concepts/dependency-graph.md b/src/content/concepts/dependency-graph.mdx similarity index 100% rename from src/content/concepts/dependency-graph.md rename to src/content/concepts/dependency-graph.mdx diff --git a/src/content/concepts/hot-module-replacement.md b/src/content/concepts/hot-module-replacement.mdx similarity index 100% rename from src/content/concepts/hot-module-replacement.md rename to src/content/concepts/hot-module-replacement.mdx diff --git a/src/content/concepts/index.md b/src/content/concepts/index.mdx similarity index 100% rename from src/content/concepts/index.md rename to src/content/concepts/index.mdx diff --git a/src/content/concepts/manifest.md b/src/content/concepts/manifest.mdx similarity index 100% rename from src/content/concepts/manifest.md rename to src/content/concepts/manifest.mdx diff --git a/src/content/concepts/module-resolution.md b/src/content/concepts/module-resolution.mdx similarity index 100% rename from src/content/concepts/module-resolution.md rename to src/content/concepts/module-resolution.mdx diff --git a/src/content/concepts/modules.md b/src/content/concepts/modules.mdx similarity index 100% rename from src/content/concepts/modules.md rename to src/content/concepts/modules.mdx diff --git a/src/content/concepts/output.md b/src/content/concepts/output.mdx similarity index 100% rename from src/content/concepts/output.md rename to src/content/concepts/output.mdx diff --git a/src/content/concepts/plugins.md b/src/content/concepts/plugins.mdx similarity index 98% rename from src/content/concepts/plugins.md rename to src/content/concepts/plugins.mdx index 3582647142f2..a4c19d321c59 100644 --- a/src/content/concepts/plugins.md +++ b/src/content/concepts/plugins.mdx @@ -29,7 +29,7 @@ const pluginName = 'ConsoleLogOnBuildWebpackPlugin'; class ConsoleLogOnBuildWebpackPlugin { apply(compiler) { compiler.hooks.run.tap(pluginName, (compilation) => { - console.log('The webpack build process is starting!!!'); + console.log('The webpack build process is starting!'); }); } } diff --git a/src/content/concepts/targets.md b/src/content/concepts/targets.mdx similarity index 100% rename from src/content/concepts/targets.md rename to src/content/concepts/targets.mdx diff --git a/src/content/concepts/under-the-hood.md b/src/content/concepts/under-the-hood.mdx similarity index 100% rename from src/content/concepts/under-the-hood.md rename to src/content/concepts/under-the-hood.mdx diff --git a/src/content/concepts/why-webpack.md b/src/content/concepts/why-webpack.mdx similarity index 100% rename from src/content/concepts/why-webpack.md rename to src/content/concepts/why-webpack.mdx diff --git a/src/content/configuration/configuration-languages.md b/src/content/configuration/configuration-languages.mdx similarity index 100% rename from src/content/configuration/configuration-languages.md rename to src/content/configuration/configuration-languages.mdx diff --git a/src/content/configuration/dev-server.md b/src/content/configuration/dev-server.mdx similarity index 100% rename from src/content/configuration/dev-server.md rename to src/content/configuration/dev-server.mdx diff --git a/src/content/configuration/devtool.md b/src/content/configuration/devtool.mdx similarity index 100% rename from src/content/configuration/devtool.md rename to src/content/configuration/devtool.mdx diff --git a/src/content/configuration/entry-context.md b/src/content/configuration/entry-context.mdx similarity index 100% rename from src/content/configuration/entry-context.md rename to src/content/configuration/entry-context.mdx diff --git a/src/content/configuration/node.md b/src/content/configuration/node.mdx similarity index 100% rename from src/content/configuration/node.md rename to src/content/configuration/node.mdx diff --git a/src/content/configuration/performance.md b/src/content/configuration/performance.mdx similarity index 100% rename from src/content/configuration/performance.md rename to src/content/configuration/performance.mdx diff --git a/src/content/configuration/plugins.md b/src/content/configuration/plugins.mdx similarity index 100% rename from src/content/configuration/plugins.md rename to src/content/configuration/plugins.mdx diff --git a/src/content/configuration/target.md b/src/content/configuration/target.mdx similarity index 100% rename from src/content/configuration/target.md rename to src/content/configuration/target.mdx diff --git a/src/content/contribute/debugging.md b/src/content/contribute/debugging.mdx similarity index 100% rename from src/content/contribute/debugging.md rename to src/content/contribute/debugging.mdx diff --git a/src/content/contribute/index.md b/src/content/contribute/index.mdx similarity index 94% rename from src/content/contribute/index.md rename to src/content/contribute/index.mdx index c8c803ae8439..2fc333f1cfb2 100644 --- a/src/content/contribute/index.md +++ b/src/content/contribute/index.mdx @@ -13,9 +13,18 @@ contributors: The people who contribute to webpack do so for the love of open source, our users and ecosystem, and most importantly, pushing the web forward together. Because of our [Open Collective](https://opencollective.com/webpack) model for funding and transparency, we are able to funnel support and funds through contributors, dependent projects, and the contributor and core teams. To make a donation, click the button below...
- - - + + + + +
But what is the return on the investment? @@ -52,8 +61,6 @@ The remainder of this section of the site is dedicated to developers such as you CTO's, VPs, and owners can help too! - - webpack is an all-in-one tool for bundling your code. It can handle fonts, images, data and more with the help of community-driven plugins and loaders. Having all of your assets be handled by one tool is immensely helpful, as you or your team can spend less time making sure a machine with many moving parts is working correctly and more time building your product. ### Sponsorship @@ -69,8 +76,6 @@ You can also encourage your developers to contribute to the ecosystem by open-so To anyone else who is interested in helping our mission – e.g. venture capitalists, government entities, digital agencies, etc. – we would love for you to work with us, one of the top npm packages, to improve your product! Please don't hesitate to reach out with questions. - - ## Pull requests Documentation of webpack features and changes is now being updated as webpack evolves. An automated issue creation integration was established and proven to be effective in the recent years. diff --git a/src/content/contribute/plugin-patterns.md b/src/content/contribute/plugin-patterns.mdx similarity index 100% rename from src/content/contribute/plugin-patterns.md rename to src/content/contribute/plugin-patterns.mdx diff --git a/src/content/contribute/writers-guide.md b/src/content/contribute/writers-guide.mdx similarity index 100% rename from src/content/contribute/writers-guide.md rename to src/content/contribute/writers-guide.mdx diff --git a/src/content/contribute/writing-a-loader.md b/src/content/contribute/writing-a-loader.mdx similarity index 100% rename from src/content/contribute/writing-a-loader.md rename to src/content/contribute/writing-a-loader.mdx diff --git a/src/content/contribute/writing-a-plugin.md b/src/content/contribute/writing-a-plugin.mdx similarity index 100% rename from src/content/contribute/writing-a-plugin.md rename to src/content/contribute/writing-a-plugin.mdx diff --git a/src/content/glossary.md b/src/content/glossary.mdx similarity index 100% rename from src/content/glossary.md rename to src/content/glossary.mdx diff --git a/src/content/guides/asset-management.md b/src/content/guides/asset-management.mdx similarity index 99% rename from src/content/guides/asset-management.md rename to src/content/guides/asset-management.mdx index cecef0f0a49f..d73221f07aad 100644 --- a/src/content/guides/asset-management.md +++ b/src/content/guides/asset-management.mdx @@ -13,7 +13,7 @@ contributors: - astonizer --- -If you've been following the guides from the start, you will now have a small project that shows "Hello webpack". Now let's try to incorporate some other assets, like images, to see how they can be handled. +If you've been following the guides from the start, you will now have a small project that shows "Hello webpack". Now let's try to incorporate some other assets, like images, to see how they can be handled. Prior to webpack, front-end developers would use tools like [grunt](https://gruntjs.com/) and [gulp](https://gulpjs.com/) to process these assets and move them from their `/src` folder into their `/dist` or `/build` directory. The same idea was used for JavaScript modules, but tools like webpack will **dynamically bundle** all dependencies (creating what's known as a [dependency graph](/concepts/dependency-graph)). This is great because every module now _explicitly states its dependencies_ and we'll avoid bundling modules that aren't in use. diff --git a/src/content/guides/asset-modules.md b/src/content/guides/asset-modules.mdx similarity index 100% rename from src/content/guides/asset-modules.md rename to src/content/guides/asset-modules.mdx diff --git a/src/content/guides/author-libraries.md b/src/content/guides/author-libraries.mdx similarity index 100% rename from src/content/guides/author-libraries.md rename to src/content/guides/author-libraries.mdx diff --git a/src/content/guides/build-performance.md b/src/content/guides/build-performance.mdx similarity index 100% rename from src/content/guides/build-performance.md rename to src/content/guides/build-performance.mdx diff --git a/src/content/guides/caching.md b/src/content/guides/caching.mdx similarity index 98% rename from src/content/guides/caching.md rename to src/content/guides/caching.mdx index 368101d05410..ceb3b1ba8fca 100644 --- a/src/content/guides/caching.md +++ b/src/content/guides/caching.mdx @@ -52,8 +52,8 @@ webpack-demo entry: './src/index.js', plugins: [ new HtmlWebpackPlugin({ --       title: 'Output Management', -+       title: 'Caching', +- title: 'Output Management', ++ title: 'Caching', }), ], output: { @@ -103,7 +103,7 @@ As we learned in [code splitting](/guides/code-splitting), the [`SplitChunksPlug entry: './src/index.js', plugins: [ new HtmlWebpackPlugin({ -       title: 'Caching', + title: 'Caching', }), ], output: { @@ -146,7 +146,7 @@ This can be done by using the [`cacheGroups`](/plugins/split-chunks-plugin/#spli entry: './src/index.js', plugins: [ new HtmlWebpackPlugin({ -       title: 'Caching', + title: 'Caching', }), ], output: { diff --git a/src/content/guides/code-splitting.md b/src/content/guides/code-splitting.mdx similarity index 99% rename from src/content/guides/code-splitting.md rename to src/content/guides/code-splitting.mdx index 29a86afc0d4b..63feda102c59 100644 --- a/src/content/guides/code-splitting.md +++ b/src/content/guides/code-splitting.mdx @@ -33,7 +33,7 @@ contributors: - chenxsan - Adarah related: - - title: in webpack + - title: <link rel="prefetch/preload"> in webpack url: https://medium.com/webpack/link-rel-prefetch-preload-in-webpack-51a52358f84c - title: Preload, Prefetch And Priorities in Chrome url: https://medium.com/reloading/preload-prefetch-and-priorities-in-chrome-776165961bbf diff --git a/src/content/guides/csp.md b/src/content/guides/csp.mdx similarity index 100% rename from src/content/guides/csp.md rename to src/content/guides/csp.mdx diff --git a/src/content/guides/dependency-management.md b/src/content/guides/dependency-management.mdx similarity index 100% rename from src/content/guides/dependency-management.md rename to src/content/guides/dependency-management.mdx diff --git a/src/content/guides/development-vagrant.md b/src/content/guides/development-vagrant.mdx similarity index 100% rename from src/content/guides/development-vagrant.md rename to src/content/guides/development-vagrant.mdx diff --git a/src/content/guides/development.md b/src/content/guides/development.mdx similarity index 100% rename from src/content/guides/development.md rename to src/content/guides/development.mdx diff --git a/src/content/guides/entry-advanced.md b/src/content/guides/entry-advanced.mdx similarity index 100% rename from src/content/guides/entry-advanced.md rename to src/content/guides/entry-advanced.mdx diff --git a/src/content/guides/environment-variables.md b/src/content/guides/environment-variables.mdx similarity index 100% rename from src/content/guides/environment-variables.md rename to src/content/guides/environment-variables.mdx diff --git a/src/content/guides/hot-module-replacement.md b/src/content/guides/hot-module-replacement.mdx similarity index 100% rename from src/content/guides/hot-module-replacement.md rename to src/content/guides/hot-module-replacement.mdx diff --git a/src/content/guides/index.md b/src/content/guides/index.mdx similarity index 100% rename from src/content/guides/index.md rename to src/content/guides/index.mdx diff --git a/src/content/guides/installation.md b/src/content/guides/installation.mdx similarity index 100% rename from src/content/guides/installation.md rename to src/content/guides/installation.mdx diff --git a/src/content/guides/integrations.md b/src/content/guides/integrations.mdx similarity index 100% rename from src/content/guides/integrations.md rename to src/content/guides/integrations.mdx diff --git a/src/content/guides/lazy-loading.md b/src/content/guides/lazy-loading.mdx similarity index 100% rename from src/content/guides/lazy-loading.md rename to src/content/guides/lazy-loading.mdx diff --git a/src/content/guides/output-management.md b/src/content/guides/output-management.mdx similarity index 100% rename from src/content/guides/output-management.md rename to src/content/guides/output-management.mdx diff --git a/src/content/guides/production.md b/src/content/guides/production.mdx similarity index 100% rename from src/content/guides/production.md rename to src/content/guides/production.mdx diff --git a/src/content/guides/progressive-web-application.md b/src/content/guides/progressive-web-application.mdx similarity index 100% rename from src/content/guides/progressive-web-application.md rename to src/content/guides/progressive-web-application.mdx diff --git a/src/content/guides/public-path.md b/src/content/guides/public-path.mdx similarity index 100% rename from src/content/guides/public-path.md rename to src/content/guides/public-path.mdx diff --git a/src/content/guides/shimming.md b/src/content/guides/shimming.mdx similarity index 100% rename from src/content/guides/shimming.md rename to src/content/guides/shimming.mdx diff --git a/src/content/guides/tree-shaking.md b/src/content/guides/tree-shaking.mdx similarity index 100% rename from src/content/guides/tree-shaking.md rename to src/content/guides/tree-shaking.mdx diff --git a/src/content/guides/typescript.md b/src/content/guides/typescript.mdx similarity index 100% rename from src/content/guides/typescript.md rename to src/content/guides/typescript.mdx diff --git a/src/content/index.md b/src/content/index.md deleted file mode 100644 index 299d8263ec0c..000000000000 --- a/src/content/index.md +++ /dev/null @@ -1,78 +0,0 @@ ---- -title: webpack -sort: -1 ---- - -## Write Your Code - -
-
- -**src/index.js** - -```js -import bar from './bar.js'; - -bar(); -``` - -
-
- -**src/bar.js** - -```js -export default function bar() { - // -} -``` - -
-
- -## Bundle It - -
-
- -**[Without config](https://youtu.be/3Nv9muOkb6k?t=21293)** or provide custom **webpack.config.js** - -```js -const path = require('path'); - -module.exports = { - entry: './src/index.js', - output: { - path: path.resolve(__dirname, 'dist'), - filename: 'bundle.js', - }, -}; -``` - -
-
- -**page.html** - -```html - - - - - ... - - - ... - - - -``` - -
-
- -Then run `webpack` on the command-line to create `bundle.js`. - -## Awesome isn't it? Let's dive in! - -**[Get Started](/guides/getting-started)** quickly in our **Guides** section, or dig into the **[Concepts](/concepts)** section for more high-level information on the core notions behind webpack. diff --git a/src/content/index.mdx b/src/content/index.mdx new file mode 100644 index 000000000000..dc98ad7353a4 --- /dev/null +++ b/src/content/index.mdx @@ -0,0 +1,37 @@ +--- +title: webpack +sort: -1 +--- + +import FirstLeft from '../components/Splash/first/left.mdx'; +import FirstRigth from '../components/Splash/first/right.mdx'; +import SecondLeft from '../components/Splash/second/left.mdx'; +import SecondRight from '../components/Splash/second/right.mdx'; + +## Write Your Code + +
+
+ +
+
+ +
+
+ +## Bundle It + +
+
+ +
+
+ +
+
+ +Then run `webpack` on the command-line to create `bundle.js`. + +## Awesome isn't it? Let's dive in! + +**[Get Started](/guides/getting-started)** quickly in our **Guides** section, or dig into the **[Concepts](/concepts)** section for more high-level information on the core notions behind webpack. diff --git a/src/content/license.md b/src/content/license.mdx similarity index 100% rename from src/content/license.md rename to src/content/license.mdx diff --git a/src/content/loaders/index.md b/src/content/loaders/index.mdx similarity index 100% rename from src/content/loaders/index.md rename to src/content/loaders/index.mdx diff --git a/src/content/migrate/3.md b/src/content/migrate/3.mdx similarity index 96% rename from src/content/migrate/3.md rename to src/content/migrate/3.mdx index 6c6605ed2231..87ed4fdab519 100644 --- a/src/content/migrate/3.md +++ b/src/content/migrate/3.mdx @@ -349,7 +349,7 @@ These functions are now always asynchronous instead of calling their callback sy ## Loader configuration is through `options` -You can *no longer* configure a loader with a custom property in the `webpack.config.js`. It must be done through the `options`. The following configuration with the `ts` property is no longer valid with webpack 2: +You can _no longer_ configure a loader with a custom property in the `webpack.config.js`. It must be done through the `options`. The following configuration with the `ts` property is no longer valid with webpack 2: ```js module.exports = { @@ -369,7 +369,7 @@ module.exports = { ### What are `options`? -Good question. Well, strictly speaking it's 2 possible things; both ways to configure a webpack loader. Classically `options` was called `query` and was a string which could be appended to the name of the loader. Much like a query string but actually with [greater powers](https://github.com/webpack/loader-utils#parsequery): +Good question. Well, strictly speaking it's 2 possible things; both ways to configure a webpack loader. Classically `options` was called `query` and was a string which could be appended to the name of the loader. Much like a query string but actually with [greater powers](https://github.com/webpack/loader-utils#parsequery): ```js module.exports = { diff --git a/src/content/migrate/4.md b/src/content/migrate/4.mdx similarity index 100% rename from src/content/migrate/4.md rename to src/content/migrate/4.mdx diff --git a/src/content/migrate/5.md b/src/content/migrate/5.mdx similarity index 100% rename from src/content/migrate/5.md rename to src/content/migrate/5.mdx diff --git a/src/content/migrate/index.md b/src/content/migrate/index.mdx similarity index 100% rename from src/content/migrate/index.md rename to src/content/migrate/index.mdx diff --git a/src/content/plugins/NoEmitOnErrorsPlugin.md b/src/content/plugins/NoEmitOnErrorsPlugin.mdx similarity index 100% rename from src/content/plugins/NoEmitOnErrorsPlugin.md rename to src/content/plugins/NoEmitOnErrorsPlugin.mdx diff --git a/src/content/plugins/automatic-prefetch-plugin.md b/src/content/plugins/automatic-prefetch-plugin.mdx similarity index 100% rename from src/content/plugins/automatic-prefetch-plugin.md rename to src/content/plugins/automatic-prefetch-plugin.mdx diff --git a/src/content/plugins/banner-plugin.md b/src/content/plugins/banner-plugin.mdx similarity index 100% rename from src/content/plugins/banner-plugin.md rename to src/content/plugins/banner-plugin.mdx diff --git a/src/content/plugins/commons-chunk-plugin.md b/src/content/plugins/commons-chunk-plugin.mdx similarity index 100% rename from src/content/plugins/commons-chunk-plugin.md rename to src/content/plugins/commons-chunk-plugin.mdx diff --git a/src/content/plugins/context-exclusion-plugin.md b/src/content/plugins/context-exclusion-plugin.mdx similarity index 100% rename from src/content/plugins/context-exclusion-plugin.md rename to src/content/plugins/context-exclusion-plugin.mdx diff --git a/src/content/plugins/context-replacement-plugin.md b/src/content/plugins/context-replacement-plugin.mdx similarity index 100% rename from src/content/plugins/context-replacement-plugin.md rename to src/content/plugins/context-replacement-plugin.mdx diff --git a/src/content/plugins/dll-plugin.md b/src/content/plugins/dll-plugin.mdx similarity index 100% rename from src/content/plugins/dll-plugin.md rename to src/content/plugins/dll-plugin.mdx diff --git a/src/content/plugins/environment-plugin.md b/src/content/plugins/environment-plugin.mdx similarity index 100% rename from src/content/plugins/environment-plugin.md rename to src/content/plugins/environment-plugin.mdx diff --git a/src/content/plugins/eval-source-map-dev-tool-plugin.md b/src/content/plugins/eval-source-map-dev-tool-plugin.mdx similarity index 100% rename from src/content/plugins/eval-source-map-dev-tool-plugin.md rename to src/content/plugins/eval-source-map-dev-tool-plugin.mdx diff --git a/src/content/plugins/hashed-module-ids-plugin.md b/src/content/plugins/hashed-module-ids-plugin.mdx similarity index 100% rename from src/content/plugins/hashed-module-ids-plugin.md rename to src/content/plugins/hashed-module-ids-plugin.mdx diff --git a/src/content/plugins/hot-module-replacement-plugin.md b/src/content/plugins/hot-module-replacement-plugin.mdx similarity index 100% rename from src/content/plugins/hot-module-replacement-plugin.md rename to src/content/plugins/hot-module-replacement-plugin.mdx diff --git a/src/content/plugins/html-webpack-plugin.md b/src/content/plugins/html-webpack-plugin.mdx similarity index 100% rename from src/content/plugins/html-webpack-plugin.md rename to src/content/plugins/html-webpack-plugin.mdx diff --git a/src/content/plugins/ignore-plugin.md b/src/content/plugins/ignore-plugin.mdx similarity index 100% rename from src/content/plugins/ignore-plugin.md rename to src/content/plugins/ignore-plugin.mdx diff --git a/src/content/plugins/index.md b/src/content/plugins/index.mdx similarity index 100% rename from src/content/plugins/index.md rename to src/content/plugins/index.mdx diff --git a/src/content/plugins/limit-chunk-count-plugin.md b/src/content/plugins/limit-chunk-count-plugin.mdx similarity index 100% rename from src/content/plugins/limit-chunk-count-plugin.md rename to src/content/plugins/limit-chunk-count-plugin.mdx diff --git a/src/content/plugins/min-chunk-size-plugin.md b/src/content/plugins/min-chunk-size-plugin.mdx similarity index 100% rename from src/content/plugins/min-chunk-size-plugin.md rename to src/content/plugins/min-chunk-size-plugin.mdx diff --git a/src/content/plugins/module-concatenation-plugin.md b/src/content/plugins/module-concatenation-plugin.mdx similarity index 100% rename from src/content/plugins/module-concatenation-plugin.md rename to src/content/plugins/module-concatenation-plugin.mdx diff --git a/src/content/plugins/normal-module-replacement-plugin.md b/src/content/plugins/normal-module-replacement-plugin.mdx similarity index 100% rename from src/content/plugins/normal-module-replacement-plugin.md rename to src/content/plugins/normal-module-replacement-plugin.mdx diff --git a/src/content/plugins/prefetch-plugin.md b/src/content/plugins/prefetch-plugin.mdx similarity index 100% rename from src/content/plugins/prefetch-plugin.md rename to src/content/plugins/prefetch-plugin.mdx diff --git a/src/content/plugins/profiling-plugin.md b/src/content/plugins/profiling-plugin.mdx similarity index 100% rename from src/content/plugins/profiling-plugin.md rename to src/content/plugins/profiling-plugin.mdx diff --git a/src/content/plugins/progress-plugin.md b/src/content/plugins/progress-plugin.mdx similarity index 100% rename from src/content/plugins/progress-plugin.md rename to src/content/plugins/progress-plugin.mdx diff --git a/src/content/plugins/provide-plugin.md b/src/content/plugins/provide-plugin.mdx similarity index 100% rename from src/content/plugins/provide-plugin.md rename to src/content/plugins/provide-plugin.mdx diff --git a/src/content/plugins/source-map-dev-tool-plugin.md b/src/content/plugins/source-map-dev-tool-plugin.mdx similarity index 100% rename from src/content/plugins/source-map-dev-tool-plugin.md rename to src/content/plugins/source-map-dev-tool-plugin.mdx diff --git a/src/content/plugins/split-chunks-plugin.md b/src/content/plugins/split-chunks-plugin.mdx similarity index 100% rename from src/content/plugins/split-chunks-plugin.md rename to src/content/plugins/split-chunks-plugin.mdx diff --git a/src/content/plugins/watch-ignore-plugin.md b/src/content/plugins/watch-ignore-plugin.mdx similarity index 100% rename from src/content/plugins/watch-ignore-plugin.md rename to src/content/plugins/watch-ignore-plugin.mdx diff --git a/src/content/vote.md b/src/content/vote.mdx similarity index 100% rename from src/content/vote.md rename to src/content/vote.mdx From c63f91bcdfe5e940b20c952051b43bfc5f49b931 Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Wed, 11 Aug 2021 07:57:54 +0800 Subject: [PATCH 08/32] build(deps): bump path-parse from 1.0.6 to 1.0.7 (#5287) Bumps [path-parse](https://github.com/jbgutierrez/path-parse) from 1.0.6 to 1.0.7. - [Release notes](https://github.com/jbgutierrez/path-parse/releases) - [Commits](https://github.com/jbgutierrez/path-parse/commits/v1.0.7) --- updated-dependencies: - dependency-name: path-parse dependency-type: indirect ... Signed-off-by: dependabot[bot] Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> --- yarn.lock | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/yarn.lock b/yarn.lock index 0081594ff2eb..dda9c6a0627e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -9335,9 +9335,9 @@ path-key@^3.0.0, path-key@^3.1.0: integrity sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q== path-parse@^1.0.6: - version "1.0.6" - resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.6.tgz#d62dbb5679405d72c4737ec58600e9ddcf06d24c" - integrity sha512-GSmOT2EbHrINBf9SR7CDELwlJ8AENk3Qn7OikK4nFYAu3Ote2+JYNVvkpAEQm3/TLNEJFD/xZJjzyxg3KBWOzw== + version "1.0.7" + resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.7.tgz#fbc114b60ca42b30d9daf5858e4bd68bbedb6735" + integrity sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw== path-to-regexp@0.1.7: version "0.1.7" From 26b56cd6b0d0c4396bfbe3a97f34602ce120432e Mon Sep 17 00:00:00 2001 From: Nitin Kumar Date: Wed, 11 Aug 2021 17:55:41 +0530 Subject: [PATCH 09/32] docs(configuration): update `infrastructureLogging.debug` and `infrastructureLogging.level` (#5288) --- src/content/configuration/other-options.mdx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/content/configuration/other-options.mdx b/src/content/configuration/other-options.mdx index 412ac004c277..bf9857cd3572 100644 --- a/src/content/configuration/other-options.mdx +++ b/src/content/configuration/other-options.mdx @@ -207,9 +207,9 @@ module.exports = { ### debug -`string` `RegExp` `function(name) => boolean` `[string, RegExp, function(name) => boolean]` +`string` `boolean = false` `RegExp` `function(name) => boolean` `[string, RegExp, function(name) => boolean]` -Enable debug information of specified loggers such as plugins or loaders. Similar to [`stats.loggingDebug`](/configuration/stats/#statsloggingdebug) option but for infrastructure. No default value is given. +Enable debug information of specified loggers such as plugins or loaders. Similar to [`stats.loggingDebug`](/configuration/stats/#statsloggingdebug) option but for infrastructure. Defaults to `false`. **webpack.config.js** @@ -225,9 +225,9 @@ module.exports = { ### level -`string` +`string = 'info' : 'none' | 'error' | 'warn' | 'info' | 'log' | 'verbose'` -Enable infrastructure logging output. Similar to [`stats.logging`](/configuration/stats/#statslogging) option but for infrastructure. No default value is given. +Enable infrastructure logging output. Similar to [`stats.logging`](/configuration/stats/#statslogging) option but for infrastructure. Defaults to `'info'`. Possible values: From 358269645e4528bf75105df2769e55b8dac8cd88 Mon Sep 17 00:00:00 2001 From: James McDonald <38434825+jcmdonald@users.noreply.github.com> Date: Wed, 11 Aug 2021 09:10:41 -0500 Subject: [PATCH 10/32] docs(guides): Update asset-modules.mdx (#5289) Fix dead links for the old loaders --- src/content/guides/asset-modules.mdx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/content/guides/asset-modules.mdx b/src/content/guides/asset-modules.mdx index 438c3fed0d89..2253281f0d5a 100644 --- a/src/content/guides/asset-modules.mdx +++ b/src/content/guides/asset-modules.mdx @@ -16,9 +16,9 @@ Asset Modules is a type of module that allows one to use asset files (fonts, ico Prior to webpack 5 it was common to use: -- [`raw-loader`](/loaders/raw-loader/) to import a file as a string -- [`url-loader`](/loaders/url-loader/) to inline a file into the bundle as a data URI -- [`file-loader`](/loaders/file-loader/) to emit a file into the output directory +- [`raw-loader`](https://v4.webpack.js.org/loaders/raw-loader/) to import a file as a string +- [`url-loader`](https://v4.webpack.js.org/loaders/url-loader/) to inline a file into the bundle as a data URI +- [`file-loader`](https://v4.webpack.js.org/loaders/file-loader/) to emit a file into the output directory Asset Modules type replaces all of these loaders by adding 4 new module types: From 570c5cec2aa7c32e20dc9ec36c06c2791a508946 Mon Sep 17 00:00:00 2001 From: Sam Chen Date: Fri, 13 Aug 2021 08:21:32 +0800 Subject: [PATCH 11/32] docs(configuration): sort output options alphabetically (#5292) * docs(configuration): fix heading level * docs(configuration): move output.futureEmitAssets * docs(configuration): move output.uniqueName * docs(configuration): move output.importFunctionName * docs(configuration): move output.iife * docs(configuration): move output.module * docs(configuration): move output.workerChunkLoading --- src/content/configuration/output.mdx | 150 +++++++++++++-------------- 1 file changed, 75 insertions(+), 75 deletions(-) diff --git a/src/content/configuration/output.mdx b/src/content/configuration/output.mdx index 5873a591147e..41fc705edf02 100644 --- a/src/content/configuration/output.mdx +++ b/src/content/configuration/output.mdx @@ -443,7 +443,7 @@ module.exports = { }; ``` -## `output.filename` +## output.filename `string` `function (pathData, assetInfo) => string` @@ -537,7 +537,7 @@ Note this option is called filename but you are still allowed to use something l Note this option does not affect output files for on-demand-loaded chunks. It only affects output files that are initially loaded. For on-demand-loaded chunk files the [`output.chunkFilename`](#outputchunkfilename) option is used. Files created by loaders also aren't affected. In this case you would have to try the specific loader's available options. -## Template strings +### Template strings The following substitutions are available in template strings (via webpack's internal [`TemplatedPathPlugin`](https://github.com/webpack/webpack/blob/master/lib/TemplatedPathPlugin.js)): @@ -629,37 +629,30 @@ type ModulePathData = { T> In some context properties will use JavaScript code expressions instead of raw values. In these cases the `WithLength` variant is available and should be used instead of slicing the original value. -## `output.globalObject` - -`string = 'window'` +## output.futureEmitAssets -When targeting a library, especially when `libraryTarget` is `'umd'`, this option indicates what global object will be used to mount the library. To make UMD build available on both browsers and Node.js, set `output.globalObject` option to `'this'`. Defaults to `self` for Web-like targets. +`boolean = false` -For example: +Tells webpack to use the future version of asset emitting logic, which allows freeing memory of assets after emitting. It could break plugins which assume that assets are still readable after they were emitted. -**webpack.config.js** +W> `output.futureEmitAssets` option will be removed in webpack v5.0.0 and this behaviour will become the new default. ```javascript module.exports = { - // ... + //... output: { - library: 'myLib', - libraryTarget: 'umd', - filename: 'myLib.js', - globalObject: 'this', + futureEmitAssets: true, }, }; ``` -## `output.uniqueName` - -`string` +## `output.globalObject` -A unique name of the webpack build to avoid multiple webpack runtimes to conflict when using globals. It defaults to [`output.library`](/configuration/output/#outputlibrary) name or the package name from `package.json` in the context, if both aren't found, it is set to an `''`. +`string = 'window'` -`output.uniqueName` will be used to generate unique globals for: +When targeting a library, especially when `libraryTarget` is `'umd'`, this option indicates what global object will be used to mount the library. To make UMD build available on both browsers and Node.js, set `output.globalObject` option to `'this'`. Defaults to `self` for Web-like targets. -- [`output.chunkLoadingGlobal`](/configuration/output/#outputchunkloadingglobal) +For example: **webpack.config.js** @@ -667,7 +660,10 @@ A unique name of the webpack build to avoid multiple webpack runtimes to conflic module.exports = { // ... output: { - uniqueName: 'my-package-xyz', + library: 'myLib', + libraryTarget: 'umd', + filename: 'myLib.js', + globalObject: 'this', }, }; ``` @@ -744,6 +740,38 @@ Customize the main hot update filename. `[fullhash]` and `[runtime]` are availab T> Typically you don't need to change `output.hotUpdateMainFilename`. +## output.iife + +`boolean = true` + +Tells webpack to add [IIFE](https://developer.mozilla.org/en-US/docs/Glossary/IIFE) wrapper around emitted code. + +```javascript +module.exports = { + //... + output: { + iife: true, + }, +}; +``` + +## output.importFunctionName + +`string = 'import'` + +The name of the native `import()` function. Can be used for polyfilling, e.g. with [`dynamic-import-polyfill`](https://github.com/GoogleChromeLabs/dynamic-import-polyfill). + +**webpack.config.js** + +```javascript +module.exports = { + //... + output: { + importFunctionName: '__import__', + }, +}; +``` + ## output.library Output a library exposing the exports of your entry point. @@ -1849,23 +1877,30 @@ MyLibrary(_entry_return_); The dependencies for your library will be defined by the [`externals`](/configuration/externals/) config. -## `output.importFunctionName` +## output.module -`string = 'import'` +`boolean = false` -The name of the native `import()` function. Can be used for polyfilling, e.g. with [`dynamic-import-polyfill`](https://github.com/GoogleChromeLabs/dynamic-import-polyfill). +Output JavaScript files as module type. Disabled by default as it's an experimental feature. -**webpack.config.js** +When enabled, webpack will set [`output.iife`](#outputiife) to `false`, [`output.scriptType`](#outputscripttype) to `'module'` and `terserOptions.module` to `true` internally. + +If you're using webpack to compile a library to be consumed by others, make sure to set [`output.libraryTarget`](#librarytarget-module) to `'module'` when `output.module` is `true`. ```javascript module.exports = { //... + experiments: { + outputModule: true, + }, output: { - importFunctionName: '__import__', + module: true, }, }; ``` +W> `output.module` is an experimental feature and can only be enabled by setting [`experiments.outputModule`](/configuration/experiments/#experiments) to `true`. + ## `output.path` `string = path.join(process.cwd(), 'dist')` @@ -2141,43 +2176,28 @@ module.exports = { }; ``` -## `output.workerChunkLoading` - -`string: 'require' | 'import-scripts' | 'async-node' | 'import' | 'universal'` `boolean: false` - -The new option `workerChunkLoading` controls the chunk loading of workers. - -T> The default value of this option is depending on the `target` setting. For more details, search for `"workerChunkLoading"`: [in the webpack defaults](https://github.com/webpack/webpack/blob/master/lib/config/defaults.js). - -**webpack.config.js** +## output.uniqueName -```javascript -module.exports = { - //... - output: { - workerChunkLoading: false, - }, -}; -``` +`string` -## `output.futureEmitAssets` +A unique name of the webpack build to avoid multiple webpack runtimes to conflict when using globals. It defaults to [`output.library`](/configuration/output/#outputlibrary) name or the package name from `package.json` in the context, if both aren't found, it is set to an `''`. -`boolean = false` +`output.uniqueName` will be used to generate unique globals for: -Tells webpack to use the future version of asset emitting logic, which allows freeing memory of assets after emitting. It could break plugins which assume that assets are still readable after they were emitted. +- [`output.chunkLoadingGlobal`](/configuration/output/#outputchunkloadingglobal) -W> `output.futureEmitAssets` option will be removed in webpack v5.0.0 and this behaviour will become the new default. +**webpack.config.js** ```javascript module.exports = { - //... + // ... output: { - futureEmitAssets: true, + uniqueName: 'my-package-xyz', }, }; ``` -## `output.wasmLoading` +## output.wasmLoading `boolean = false` `string` @@ -2197,41 +2217,21 @@ module.exports = { }; ``` -## `output.iife` - -`boolean = true` - -Tells webpack to add [IIFE](https://developer.mozilla.org/en-US/docs/Glossary/IIFE) wrapper around emitted code. - -```javascript -module.exports = { - //... - output: { - iife: true, - }, -}; -``` +## output.workerChunkLoading -## `output.module` - -`boolean = false` +`string: 'require' | 'import-scripts' | 'async-node' | 'import' | 'universal'` `boolean: false` -Output JavaScript files as module type. Disabled by default as it's an experimental feature. +The new option `workerChunkLoading` controls the chunk loading of workers. -When enabled, webpack will set [`output.iife`](#outputiife) to `false`, [`output.scriptType`](#outputscripttype) to `'module'` and `terserOptions.module` to `true` internally. +T> The default value of this option is depending on the `target` setting. For more details, search for `"workerChunkLoading"`: [in the webpack defaults](https://github.com/webpack/webpack/blob/master/lib/config/defaults.js). -If you're using webpack to compile a library to be consumed by others, make sure to set [`output.libraryTarget`](#librarytarget-module) to `'module'` when `output.module` is `true`. +**webpack.config.js** ```javascript module.exports = { //... - experiments: { - outputModule: true, - }, output: { - module: true, + workerChunkLoading: false, }, }; ``` - -W> `output.module` is an experimental feature and can only be enabled by setting [`experiments.outputModule`](/configuration/experiments/#experiments) to `true`. From 6c8940e4365171416f34fce2396807d4063ce45d Mon Sep 17 00:00:00 2001 From: getsnoopy Date: Fri, 13 Aug 2021 21:24:07 -0500 Subject: [PATCH 12/32] docs(migrate): Fix some grammatical errors in 5.mdx (#5290) --- src/content/migrate/5.mdx | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/src/content/migrate/5.mdx b/src/content/migrate/5.mdx index b4ff9e2d8f60..37ec313152c5 100644 --- a/src/content/migrate/5.mdx +++ b/src/content/migrate/5.mdx @@ -10,6 +10,7 @@ contributors: - rramaa - chenxsan - jamesgeorge007 + - getsnoopy --- This guide aims to help you migrating to webpack 5 when using webpack directly. If you are using a higher level tool to run webpack, please refer to the tool for migration instructions. @@ -179,9 +180,9 @@ console.log(pkg.version); - This doesn't apply to the `webpack(..., callback)` form which automatically closes. - This is optional if you use webpack in watching mode until the user ends the process. The idle phases in watch mode will be used for this kind of work. -### Run a single build and follow advises +### Run a single build and follow advice -Please make sure to read the building errors/warnings carefully. If there is no corresponding advise, please create an issue and we will try to resolve it. +Please make sure to read the building errors/warnings carefully. If there is no corresponding advice, please create an issue and we will try to resolve it. Repeat the following steps until you solved at least level 3 or 4: @@ -203,7 +204,7 @@ Repeat the following steps until you solved at least level 3 or 4: - Level 5: **Runtime Errors**. - This is tricky. You probably have to debug to find the problem. A general advise is difficult here. But we do list some common advices below regarding Runtime Errors: + This is tricky. You probably have to debug to find the problem. General advice is difficult here. But we do list some common advice below regarding Runtime Errors: - `process` is not defined. - webpack 5 does no longer include a polyfill for this Node.js variable. Avoid using it in the frontend code. @@ -221,7 +222,7 @@ Repeat the following steps until you solved at least level 3 or 4: You probably get a lot of deprecation warnings. This is not directly a problem. Plugins need time to catch up with core changes. Please report these deprecations to the plugins. These deprecations are only warnings and the build will still work with only minor drawbacks (like less performance). - You can hide deprecation warnings by running node with `--no-deprecation` flag, e.g.: `node --no-deprecation node_modules/webpack/bin/webpack.js`. This should only be a temporary workaround. - - Plugins and Loaders contributors can follow the advises in the deprecation messages to improve the code. + - Plugins and Loaders contributors can follow the advice in the deprecation messages to improve the code. - Level 7: **Performance issues**. From 164c97b26d7da09b9f2afbea18c7be5d31f2e0a1 Mon Sep 17 00:00:00 2001 From: getsnoopy Date: Fri, 13 Aug 2021 21:31:57 -0500 Subject: [PATCH 13/32] docs(plugins): Replaced jargon words with better equivalents (#5291) --- src/content/plugins/split-chunks-plugin.mdx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/content/plugins/split-chunks-plugin.mdx b/src/content/plugins/split-chunks-plugin.mdx index fcc3ae061aa0..113d1027e831 100644 --- a/src/content/plugins/split-chunks-plugin.mdx +++ b/src/content/plugins/split-chunks-plugin.mdx @@ -48,7 +48,7 @@ When trying to fulfill the last two conditions, bigger chunks are preferred. webpack provides a set of options for developers that want more control over this functionality. -W> The default configuration was chosen to fit web performance best practices, but the optimal strategy for your project might differ. If you're changing the configuration, you should measure the impact of your changes to ensure there's a real benefit. +W> The default configuration was chosen to fit web performance best practices, but the optimal strategy for your project might differ. If you're changing the configuration, you should measure the effect of your changes to ensure there's a real benefit. ## `optimization.splitChunks` @@ -200,7 +200,7 @@ Assign modules to a cache group by module layer. `number = 0` Using `maxSize` (either globally `optimization.splitChunks.maxSize` per cache group `optimization.splitChunks.cacheGroups[x].maxSize` or for the fallback cache group `optimization.splitChunks.fallbackCacheGroup.maxSize`) tells webpack to try to split chunks bigger than `maxSize` bytes into smaller parts. Parts will be at least `minSize` (next to `maxSize`) in size. -The algorithm is deterministic and changes to the modules will only have local impact. So that it is usable when using long term caching and doesn't require records. `maxSize` is only a hint and could be violated when modules are bigger than `maxSize` or splitting would violate `minSize`. +The algorithm is deterministic and changes to the modules will only have local effects. So that it is usable when using long term caching and doesn't require records. `maxSize` is only a hint and could be violated when modules are bigger than `maxSize` or splitting would violate `minSize`. When the chunk has a name already, each part will get a new name derived from that name. Depending on the value of `optimization.splitChunks.hidePathInfo` it will add a key derived from the first module name or a hash of it. @@ -317,7 +317,7 @@ A module can belong to multiple cache groups. The optimization will prefer the c `boolean = true` -If the current chunk contains modules already split out from the main bundle, it will be reused instead of a new one being generated. This can impact the resulting file name of the chunk. +If the current chunk contains modules already split out from the main bundle, it will be reused instead of a new one being generated. This can affect the resulting file name of the chunk. **webpack.config.js** From a95ae235b9a7fa3c432d370e8d901407aad468a8 Mon Sep 17 00:00:00 2001 From: "rex.tsou" Date: Sat, 14 Aug 2021 10:47:27 +0800 Subject: [PATCH 14/32] docs(migrate): Fix optimization.moduleIds setting in 5.mdx (#5293) Upgrade webpack to 5 is the next step, and we can only use `optimization.moduleIds: 'hashed'` in v4 --- src/content/migrate/5.mdx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/content/migrate/5.mdx b/src/content/migrate/5.mdx index 37ec313152c5..b2e6eca90d27 100644 --- a/src/content/migrate/5.mdx +++ b/src/content/migrate/5.mdx @@ -53,12 +53,12 @@ Set `mode` to either [`production`](/configuration/mode/#mode-production) or [`d Update the following options to their new version (if used): -- `optimization.hashedModuleIds: true` → `optimization.moduleIds: 'deterministic'` +- `optimization.hashedModuleIds: true` → `optimization.moduleIds: 'hashed'` - `optimization.namedChunks: true` → `optimization.chunkIds: 'named'` - `optimization.namedModules: true` → `optimization.moduleIds: 'named'` - `NamedModulesPlugin` → `optimization.moduleIds: 'named'` - `NamedChunksPlugin` → `optimization.chunkIds: 'named'` -- `HashedModuleIdsPlugin` → `optimization.moduleIds: 'deterministic'` +- `HashedModuleIdsPlugin` → `optimization.moduleIds: 'hashed'` - `optimization.noEmitOnErrors: false` → `optimization.emitOnErrors: true` - `optimization.occurrenceOrder: true` → `optimization: { chunkIds: 'total-size', moduleIds: 'size' }` - `optimization.splitChunks.cacheGroups.vendors` → `optimization.splitChunks.cacheGroups.defaultVendors` From a444ae41f95ea9d5bdde109e2c7e833de1f01ebf Mon Sep 17 00:00:00 2001 From: Nitin Kumar Date: Sat, 14 Aug 2021 17:38:36 +0530 Subject: [PATCH 15/32] docs(configuration): remove `enforceModuleExtension` from resolve docs (#5296) * docs(configuration): remove resolve.enforceModuleExtension * docs(configuration): remove resolveLoader.enforceModuleExtension --- src/content/configuration/resolve.mdx | 38 --------------------------- 1 file changed, 38 deletions(-) diff --git a/src/content/configuration/resolve.mdx b/src/content/configuration/resolve.mdx index 284392268483..20f2f718aedc 100644 --- a/src/content/configuration/resolve.mdx +++ b/src/content/configuration/resolve.mdx @@ -226,25 +226,6 @@ module.exports = { }; ``` -### `resolve.enforceModuleExtension` - -`boolean = false` - -W> Removed in webpack 5 - -Tells webpack whether to require to use an extension for modules (e.g. loaders). - -**webpack.config.js** - -```js -module.exports = { - //... - resolve: { - enforceModuleExtension: false, - }, -}; -``` - ### resolve.extensions `[string] = ['.js', '.json', '.wasm']` @@ -681,22 +662,3 @@ module.exports = { ``` T> Note that you can use alias here and other features familiar from resolve. For example `{ txt: 'raw-loader' }` would shim `txt!templates/demo.txt` to use `raw-loader`. - -### `resolveLoader.moduleExtensions` - -`[string]` - -W> Removed in webpack 5 - -The extensions/suffixes that are used when resolving loaders. Since version two, we [strongly recommend](/migrate/3/#automatic--loader-module-name-extension-removed) using the full name, e.g. `example-loader`, as much as possible for clarity. However, if you really wanted to exclude the `-loader` bit, i.e. to only use `example`, you can use this option to do so: - -**webpack.config.js** - -```js -module.exports = { - //... - resolveLoader: { - moduleExtensions: ['-loader'], - }, -}; -``` From a7d26c620839ad8df319fb23c0a86f60669cd179 Mon Sep 17 00:00:00 2001 From: Sam Chen Date: Sat, 14 Aug 2021 21:56:27 +0800 Subject: [PATCH 16/32] Deprecate loaders (#5294) * deprecate null-loader for webpack 5 * deprecate mocha-loader * deprecate istanbul-instrumenter-loader * clean up --- src/content/loaders/index.mdx | 5 +---- src/utilities/constants.js | 3 +++ webpack.ssg.js | 6 ++++++ 3 files changed, 10 insertions(+), 4 deletions(-) diff --git a/src/content/loaders/index.mdx b/src/content/loaders/index.mdx index fac1b8fb3b80..bfa4c7aa9f00 100644 --- a/src/content/loaders/index.mdx +++ b/src/content/loaders/index.mdx @@ -10,6 +10,7 @@ contributors: - snitin315 - anshumanv - jamesgeorge007 + - chenxsan --- webpack enables use of [loaders](/concepts/loaders) to preprocess files. This allows you to bundle any static resource way beyond JavaScript. You can easily write your own loaders using Node.js. @@ -56,10 +57,6 @@ Loaders are activated by using `loadername!` prefixes in `require()` statements, - [`postcss-loader`](/loaders/postcss-loader) Loads and transforms a CSS/SSS file using [PostCSS](http://postcss.org) - [`stylus-loader`](/loaders/stylus-loader/) Loads and compiles a Stylus file -## Testing - -- [`mocha-loader`](/loaders/mocha-loader) Tests with [mocha](https://mochajs.org/) (Browser/NodeJS) - ## Frameworks - [`vue-loader`](https://github.com/vuejs/vue-loader) Loads and compiles [Vue Components](https://vuejs.org/v2/guide/components.html) diff --git a/src/utilities/constants.js b/src/utilities/constants.js index b28c557a119b..e40ff399808c 100644 --- a/src/utilities/constants.js +++ b/src/utilities/constants.js @@ -20,6 +20,9 @@ const excludedLoaders = [ 'webpack-contrib/raw-loader', 'webpack-contrib/url-loader', 'webpack-contrib/file-loader', + 'webpack-contrib/null-loader', + 'webpack-contrib/mocha-loader', + 'webpack-contrib/istanbul-instrumenter-loader', ]; const excludedPlugins = [ 'webpack-contrib/component-webpack-plugin', diff --git a/webpack.ssg.js b/webpack.ssg.js index d69a9f20f04b..ec8cc860ddf6 100644 --- a/webpack.ssg.js +++ b/webpack.ssg.js @@ -94,6 +94,12 @@ module.exports = (env) => 'loaders/url-loader': 'https://v4.webpack.js.org/loaders/url-loader', 'loaders/file-loader': 'https://v4.webpack.js.org/loaders/file-loader', + 'loaders/null-loader': + 'https://v4.webpack.js.org/loaders/null-loader/', + 'loaders/mocha-loader': + 'https://v4.webpack.js.org/loaders/mocha-loader/', + 'loaders/istanbul-instrumenter-loader': + 'https://v4.webpack.js.org/loaders/istanbul-instrumenter-loader/', }, }), new CopyWebpackPlugin({ From 8501d042143d99b034101dc02858e284b9a0eacd Mon Sep 17 00:00:00 2001 From: Nitin Kumar Date: Sun, 15 Aug 2021 10:25:28 +0530 Subject: [PATCH 17/32] docs(configuration): sort `performance` options (#5295) * docs: move performance.assetFilters * docs(configuration): move performance.maxAssetSize * docs(configuration): fix heading levels for performance --- src/content/configuration/performance.mdx | 66 +++++++++++------------ 1 file changed, 33 insertions(+), 33 deletions(-) diff --git a/src/content/configuration/performance.mdx b/src/content/configuration/performance.mdx index 4fd2a17daf0b..7db08fd31036 100644 --- a/src/content/configuration/performance.mdx +++ b/src/content/configuration/performance.mdx @@ -18,7 +18,34 @@ This feature was inspired by the idea of [webpack Performance Budgets](https://g Configure how performance hints are shown. For example if you have an asset that is over 250kb, webpack will emit a warning notifying you of this. -## `performance.hints` +### performance.assetFilter + +`function(assetFilename) => boolean` + +This property allows webpack to control what files are used to calculate performance hints. The default function is: + +```js +function assetFilter(assetFilename) { + return !/\.map$/.test(assetFilename); +} +``` + +You can override this property by passing your own function in: + +```js +module.exports = { + //... + performance: { + assetFilter: function (assetFilename) { + return assetFilename.endsWith('.js'); + }, + }, +}; +``` + +The example above will only give you performance hints based on `.js` files. + +### performance.hints `string = 'warning': 'error' | 'warning'` `boolean: false` @@ -59,22 +86,7 @@ module.exports = { An error will be displayed notifying you of a large asset. We recommend using `hints: "error"` during production builds to help prevent deploying production bundles that are too large, impacting webpage performance. -## `performance.maxEntrypointSize` - -`number = 250000` - -An entry point represents all assets that would be utilized during initial load time for a specific entry. This option controls when webpack should emit performance hints based on the maximum entry point size in bytes. - -```js -module.exports = { - //... - performance: { - maxEntrypointSize: 400000, - }, -}; -``` - -## `performance.maxAssetSize` +### performance.maxAssetSize `number = 250000` @@ -89,29 +101,17 @@ module.exports = { }; ``` -## `performance.assetFilter` - -`function(assetFilename) => boolean` - -This property allows webpack to control what files are used to calculate performance hints. The default function is: +### performance.maxEntrypointSize -```js -function assetFilter(assetFilename) { - return !/\.map$/.test(assetFilename); -} -``` +`number = 250000` -You can override this property by passing your own function in: +An entry point represents all assets that would be utilized during initial load time for a specific entry. This option controls when webpack should emit performance hints based on the maximum entry point size in bytes. ```js module.exports = { //... performance: { - assetFilter: function (assetFilename) { - return assetFilename.endsWith('.js'); - }, + maxEntrypointSize: 400000, }, }; ``` - -The example above will only give you performance hints based on `.js` files. From d5569301620bb733c20e2a00469381ca04d208f3 Mon Sep 17 00:00:00 2001 From: Anshuman Verma Date: Tue, 17 Aug 2021 21:40:19 +0530 Subject: [PATCH 18/32] docs(configuration): fix dev server options link (#5301) --- src/content/configuration/dev-server.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/configuration/dev-server.mdx b/src/content/configuration/dev-server.mdx index 2579a56d84e3..44f6460523c1 100644 --- a/src/content/configuration/dev-server.mdx +++ b/src/content/configuration/dev-server.mdx @@ -79,7 +79,7 @@ You can invoke webpack-dev-server via CLI by: npx webpack serve ``` -A list of CLI options for `serve` is available [here](https://github.com/webpack/webpack-cli/blob/master/SERVE-OPTIONS.md) +A list of CLI options for `serve` is available [here](https://github.com/webpack/webpack-cli/blob/master/SERVE-OPTIONS-v3.md) ## `devServer.after` From 78f5e1fe58f9b9f98216a21cd8209a39c6a6be2c Mon Sep 17 00:00:00 2001 From: Nitin Kumar Date: Thu, 19 Aug 2021 08:56:45 +0530 Subject: [PATCH 19/32] docs(configuration): update documentation for webpack-dev-server v4 (#4950) --- src/content/configuration/dev-server.mdx | 1049 +++++++---------- src/content/configuration/stats.mdx | 2 - src/content/guides/development.mdx | 2 +- .../guides/progressive-web-application.mdx | 2 +- 4 files changed, 424 insertions(+), 631 deletions(-) diff --git a/src/content/configuration/dev-server.mdx b/src/content/configuration/dev-server.mdx index 44f6460523c1..7bde56012d5f 100644 --- a/src/content/configuration/dev-server.mdx +++ b/src/content/configuration/dev-server.mdx @@ -26,13 +26,11 @@ contributors: This page describes the options that affect the behavior of webpack-dev-server (short: dev-server). -T> Options that are compatible with [webpack-dev-middleware](https://github.com/webpack/webpack-dev-middleware) have 🔑 next to them. - ## `devServer` `object` -This set of options is picked up by [webpack-dev-server](https://github.com/webpack/webpack-dev-server) and can be used to change its behavior in various ways. Here's a rudimentary example that gzips and serves everything from our `dist/` directory in the project root: +This set of options is picked up by [webpack-dev-server](https://github.com/webpack/webpack-dev-server) and can be used to change its behavior in various ways. Here's a rudimentary example that gzips and serves everything from our `public/` directory in the project root: **webpack.config.js** @@ -42,7 +40,9 @@ var path = require('path'); module.exports = { //... devServer: { - contentBase: path.join(__dirname, 'dist'), + static: { + directory: path.join(__dirname, 'public'), + }, compress: true, port: 9000, }, @@ -52,14 +52,16 @@ module.exports = { When the server is started, there will be a message prior to the list of resolved modules: ```bash -http://localhost:9000/ -webpack output is served from /build/ -Content not from webpack is served from /path/to/dist/ + [webpack-dev-server] Project is running at: + [webpack-dev-server] Loopback: http://localhost:9000/ + [webpack-dev-server] On Your Network (IPv4): http://197.158.164.104:9000/ + [webpack-dev-server] On Your Network (IPv6): http://[fe80::1]:9000/ + [webpack-dev-server] Content not from webpack is served from '/path/to/public' directory ``` that will give some background on where the server is located and what it's serving. -If you're using dev-server through the Node.js API, the options in `devServer` will be ignored. Pass the options as a second parameter instead: `new WebpackDevServer(compiler, {...})`. [See here](https://github.com/webpack/webpack-dev-server/tree/master/examples/api/simple) for an example of how to use webpack-dev-server through the Node.js API. +If you're using dev-server through the Node.js API, the options in `devServer` will be ignored. Pass the options as the first parameter instead: `new WebpackDevServer({...}, compiler)`. [See here](https://github.com/webpack/webpack-dev-server/tree/master/examples/api/simple) for an example of how to use webpack-dev-server through the Node.js API. W> You cannot use the second `compiler` argument (a callback) when using `WebpackDevServer`. @@ -81,29 +83,9 @@ npx webpack serve A list of CLI options for `serve` is available [here](https://github.com/webpack/webpack-cli/blob/master/SERVE-OPTIONS-v3.md) -## `devServer.after` - -`function (app, server, compiler)` - -Provides the ability to execute custom middleware after all other middleware -internally within the server. - -**webpack.config.js** - -```javascript -module.exports = { - //... - devServer: { - after: function (app, server, compiler) { - // do fancy stuff - }, - }, -}; -``` - ## `devServer.allowedHosts` -`[string]` +`'auto' | 'all'` `[string]` This option allows you to whitelist services that are allowed to access the dev server. @@ -139,19 +121,7 @@ module.exports = { }; ``` -To use this option with the CLI pass the `--allowed-hosts` as following: - -```bash -npx webpack serve --entry ./entry/file --output-path ./output/path --allowed-hosts .host.com --allowed-hosts host2.com -``` - -## `devServer.before` - -`function (app, server, compiler)` - -Provides the ability to execute custom middleware prior to all other middleware -internally within the server. This could be used to define custom handlers, for -example: +When set to `'all'` this option bypasses host checking. **THIS IS NOT RECOMMENDED** as apps that do not check the host are vulnerable to DNS rebinding attacks. **webpack.config.js** @@ -159,20 +129,22 @@ example: module.exports = { //... devServer: { - before: function (app, server, compiler) { - app.get('/some/path', function (req, res) { - res.json({ custom: 'response' }); - }); - }, + allowedHosts: 'all', }, }; ``` +To use this option with the CLI pass the `--allowed-hosts` as following: + +```bash +npx webpack serve --entry ./entry/file --output-path ./output/path --allowed-hosts .host.com --allowed-hosts host2.com +``` + ## `devServer.bonjour` -`boolean = false` +`boolean` `object` -This option broadcasts the server via [ZeroConf](http://www.zeroconf.org/) networking on start +This option broadcasts the server via [ZeroConf](http://www.zeroconf.org/) networking on start. **webpack.config.js** @@ -185,21 +157,13 @@ module.exports = { }; ``` -Usage via the CLI +Usage via the CLI: ```bash npx webpack serve --bonjour ``` -## `devServer.clientLogLevel` - -`string = 'info': 'silent' | 'trace' | 'debug' | 'info' | 'warn' | 'error' | 'none' | 'warning'` - -W> `silent`, `trace`, `debug`, and `warning` are going to be deprecated at the next major version. - -When using _inline mode_, the console in your DevTools will show you messages e.g. before reloading, before an error or when [Hot Module Replacement](/concepts/hot-module-replacement/) is enabled. - -`devServer.clientLogLevel` may be too verbose, you can turn logging off by setting it to `'silent'`. +You can also pass [custom options](https://github.com/watson/bonjour#initializing) to bonjour, for example: **webpack.config.js** @@ -207,22 +171,21 @@ When using _inline mode_, the console in your DevTools will show you messages e. module.exports = { //... devServer: { - clientLogLevel: 'silent', + bonjour: { + type: 'http', + protocol: 'udp', + }, }, }; ``` -Usage via the CLI - -```bash -npx webpack serve --client-log-level silent -``` +## `devServer.client` -## `devServer.compress` +### `logging` -`boolean` +`'log' | 'info' | 'warn' | 'error' | 'none' | 'verbose'` -Enable [gzip compression](https://betterexplained.com/articles/how-to-optimize-your-site-with-gzip-compression/) for everything served: +Allows to set log level in the browser, e.g. before reloading, before an error or when [Hot Module Replacement](/concepts/hot-module-replacement/) is enabled. **webpack.config.js** @@ -230,103 +193,71 @@ Enable [gzip compression](https://betterexplained.com/articles/how-to-optimize-y module.exports = { //... devServer: { - compress: true, + client: { + logging: 'info', + }, }, }; ``` -Usage via the CLI +Usage via the CLI: ```bash -npx webpack serve --compress +npx webpack serve --client-logging info ``` -## `devServer.contentBase` +### `overlay` -`boolean: false` `string` `[string]` `number` +`boolean = true` `object: { errors boolean = true, warnings boolean = true }` -Tell the server where to serve content from. This is only necessary if you want to serve static files. [`devServer.publicPath`](#devserverpublicpath-) will be used to determine where the bundles should be served from, and takes precedence. - -T> It is recommended to use an absolute path. - -By default, it will use your current working directory to serve content. To disable `contentBase` set it to `false`. +Shows a full-screen overlay in the browser when there are compiler errors or warnings. **webpack.config.js** ```javascript -const path = require('path'); - module.exports = { //... devServer: { - contentBase: path.join(__dirname, 'public'), - }, -}; -``` - -It is also possible to serve from multiple directories in case you want to serve static content at multiple URLs with [`contentBasePublicPath`](#devservercontentbasepublicpath): - -**webpack.config.js** - -```javascript -const path = require('path'); - -module.exports = { - //... - devServer: { - contentBase: [ - path.join(__dirname, 'public'), - path.join(__dirname, 'assets'), - ], + client: { + overlay: true, + }, }, }; ``` -Usage via the CLI +Usage via the CLI: ```bash -npx webpack serve --content-base ./path/to/content/dir +npx webpack serve --client-overlay ``` -## `devServer.contentBasePublicPath` - -`string = '/'` `[string]` - -Tell the server at what URL to serve `devServer.contentBase` static content. If there was a file `assets/manifest.json`, it would be served at `/serve-content-base-at-this-url/manifest.json` +If you want to show only errors: **webpack.config.js** ```javascript -const path = require('path'); - module.exports = { //... devServer: { - contentBase: path.join(__dirname, 'assets'), - contentBasePublicPath: '/serve-content-base-at-this-url', + client: { + overlay: { + errors: true, + warnings: false, + }, + }, }, }; ``` -Provide an array of strings in case you have multiple static folders set in [`contentBase`](#devservercontentbase). - -**webpack.config.js** +Usage via the CLI: -```javascript -module.exports = { - //... - devServer: { - contentBase: [contentBasePublic, contentBaseOther], - contentBasePublicPath: [contentBasePublicPath, contentBasePublicOtherPath], - }, -}; +```bash +npx webpack serve --client-overlay-errors --no-client-overlay-warnings ``` -## `devServer.disableHostCheck` - -`boolean` +### `progress` -When set to `true` this option bypasses host checking. **THIS IS NOT RECOMMENDED** as apps that do not check the host are vulnerable to DNS rebinding attacks. +Prints compilation progress in percentage in the browser. **webpack.config.js** @@ -334,50 +265,52 @@ When set to `true` this option bypasses host checking. **THIS IS NOT RECOMMENDED module.exports = { //... devServer: { - disableHostCheck: true, + client: { + progress: true, + }, }, }; ``` -Usage via the CLI +Usage via the CLI: ```bash -npx webpack serve --disable-host-check +npx webpack serve --client-progress ``` -## `devServer.filename` 🔑 +### webSocketTransport -`string` +`'ws' | 'sockjs'` `string` -This option lets you reduce the compilations in [lazy mode](#devserverlazy-). -By default in [lazy mode](#devserverlazy-), every request results in a new compilation. With `filename`, it's possible to only compile when a certain file is requested. +This option allows us either to choose the current `devServer` transport mode for client individually or to provide custom client implementation. This allows to specify how browser or other client communicates with the `devServer`. -If [`output.filename`](/configuration/output/#outputfilename) is set to `'bundle.js'` and `devServer.filename` is used like this: +T> Providing `'ws'` or `'sockjs'` to [`webSocketServer`](#devserverwebsocketserver) is a shortcut to setting both `devServer.client.webSocketTransport` and `devServer.webSocketServer` to the given value. **webpack.config.js** ```javascript module.exports = { //... - output: { - filename: 'bundle.js', - }, devServer: { - lazy: true, - filename: 'bundle.js', + client: { + webSocketTransport: 'ws', + }, + webSocketServer: 'ws', }, }; ``` -It will now only compile the bundle when `/bundle.js` is requested. +Usage via the CLI: -T> `filename` has no effect when used without [lazy mode](#devserverlazy-). +```bash +npx webpack serve --client-web-socket-transport ws --web-socket-server ws +``` -## `devServer.headers` 🔑 +T> When providing a custom client and server implementation make sure that they are compatible with one another to communicate successfully. -`object` +To create a custom client implementation, create a class that extends [`BaseClient`](https://github.com/webpack/webpack-dev-server/blob/master/client-src/clients/BaseClient.js). -Adds headers to all responses: +Using path to `CustomClient.js`, a custom WebSocket client implementation, along with the compatible `'ws'` server: **webpack.config.js** @@ -385,18 +318,15 @@ Adds headers to all responses: module.exports = { //... devServer: { - headers: { - 'X-Custom-Foo': 'bar', + client: { + webSocketTransport: require.resolve('./CustomClient'), }, + webSocketServer: 'ws', }, }; ``` -## `devServer.historyApiFallback` - -`boolean = false` `object` - -When using the [HTML5 History API](https://developer.mozilla.org/en-US/docs/Web/API/History), the `index.html` page will likely have to be served in place of any `404` responses. Enable `devServer.historyApiFallback` by setting it to `true`: +Using custom, compatible WebSocket client and server implementations: **webpack.config.js** @@ -404,31 +334,19 @@ When using the [HTML5 History API](https://developer.mozilla.org/en-US/docs/Web/ module.exports = { //... devServer: { - historyApiFallback: true, + client: { + webSocketTransport: require.resolve('./CustomClient'), + }, + webSocketServer: require.resolve('./CustomServer'), }, }; ``` -By passing an object this behavior can be controlled further using options like `rewrites`: +### webSocketURL -**webpack.config.js** +`string` `object` -```javascript -module.exports = { - //... - devServer: { - historyApiFallback: { - rewrites: [ - { from: /^\/$/, to: '/views/landing.html' }, - { from: /^\/subpage/, to: '/views/subpage.html' }, - { from: /./, to: '/views/404.html' }, - ], - }, - }, -}; -``` - -When using dots in your path (common with Angular), you may need to use the `disableDotRule`: +This option allows to specify URL to web socket server (useful when you're proxying dev server and client script does not always know where to connect to). **webpack.config.js** @@ -436,26 +354,27 @@ When using dots in your path (common with Angular), you may need to use the `dis module.exports = { //... devServer: { - historyApiFallback: { - disableDotRule: true, + client: { + webSocketURL: 'ws://0.0.0.0:8080/ws', }, }, }; ``` -Usage via the CLI +Usage via the CLI: ```bash -npx webpack serve --history-api-fallback +npx webpack serve --client-web-socket-url ws://0.0.0.0:8080/ws ``` -For more options and information, see the [connect-history-api-fallback](https://github.com/bripkens/connect-history-api-fallback) documentation. - -## `devServer.host` - -`string = 'localhost'` +You can also specify an object with the following properties: -Specify a host to use. If you want your server to be accessible externally, specify it like this: +- `hostname`: Tells clients connected to devServer to use the provided hostname. +- `pathname`: Tells clients connected to devServer to use the provided path to connect. +- `password`: Tells clients connected to devServer to use the provided password to authenticate. +- `port`: Tells clients connected to devServer to use the provided port. +- `protocol`: Tells clients connected to devServer to use the provided protocol. +- `username`: Tells clients connected to devServer to use the provided username to authenticate. **webpack.config.js** @@ -463,22 +382,27 @@ Specify a host to use. If you want your server to be accessible externally, spec module.exports = { //... devServer: { - host: '0.0.0.0', + client: { + webSocketURL: { + hostname: '0.0.0.0', + pathname: '/ws', + password: 'dev-server', + port: 8080, + protocol: 'ws', + username: 'webpack', + }, + }, }, }; ``` -Usage via the CLI - -```bash -npx webpack serve --host 0.0.0.0 -``` +T> To get `protocol`/`hostname`/`port` from browser use `webSocketURL: 'auto://0.0.0.0:0/ws'`. -## `devServer.hot` +## `devServer.compress` -`boolean` +`boolean = true` -Enable webpack's [Hot Module Replacement](/concepts/hot-module-replacement/) feature: +Enable [gzip compression](https://betterexplained.com/articles/how-to-optimize-your-site-with-gzip-compression/) for everything served: **webpack.config.js** @@ -486,43 +410,40 @@ Enable webpack's [Hot Module Replacement](/concepts/hot-module-replacement/) fea module.exports = { //... devServer: { - hot: true, + compress: true, }, }; ``` -T> Note that [`webpack.HotModuleReplacementPlugin`](/plugins/hot-module-replacement-plugin/) is required to fully enable HMR. If `webpack` or `webpack-dev-server` are launched with the `--hot` option, this plugin will be added automatically, so you may not need to add this to your `webpack.config.js`. See the [HMR concepts page](/concepts/hot-module-replacement/) for more information. +Usage via the CLI: -## `devServer.hotOnly` +```bash +npx webpack serve --compress +``` -`boolean` +## devserver.devMiddleware -Enables Hot Module Replacement (see [`devServer.hot`](#devserverhot)) without page refresh as a fallback in case of build failures. +Provide options to [webpack-dev-middleware](https://github.com/webpack/webpack-dev-middleware) which handles webpack assets. **webpack.config.js** ```javascript module.exports = { - //... devServer: { - hotOnly: true, + index: true, + mimeTypes: { 'text/html': ['phtml'] }, + publicPath: '/publicPathForDevServe', + serverSideRender: true, + writeToDisk: true, }, }; ``` -Usage via the CLI - -```bash -npx webpack serve --hot-only -``` - ## `devServer.http2` -`boolean = false` - -Serve over HTTP/2 using [spdy](https://www.npmjs.com/package/spdy). This option is ignored for Node 10.0.0 and above, as spdy is broken for those versions. The dev server will migrate over to Node's built-in HTTP/2 once [Express](https://expressjs.com/) supports it. +`boolean` -If `devServer.http2` is not explicitly set to `false`, it will default to `true` when [`devServer.https`](#devserverhttps) is enabled. When `devServer.http2` is enabled but the server is unable to serve over HTTP/2, the server defaults to HTTPS. +Serve over HTTP/2 using [spdy](https://www.npmjs.com/package/spdy). This option is ignored for Node 15.0.0 and above, as spdy is broken for those versions. The dev server will migrate over to Node's built-in HTTP/2 once [Express](https://expressjs.com/) supports it. HTTP/2 with a self-signed certificate: @@ -549,7 +470,7 @@ module.exports = { https: { key: fs.readFileSync('/path/to/server.key'), cert: fs.readFileSync('/path/to/server.crt'), - ca: fs.readFileSync('/path/to/ca.pem'), + cacert: fs.readFileSync('/path/to/ca.pem'), }, }, }; @@ -564,14 +485,14 @@ npx webpack serve --http2 To pass your own certificate via CLI, use the following options ```bash -npx webpack serve --http2 --key ./path/to/server.key --cert ./path/to/server.crt --cacert ./path/to/ca.pem +npx webpack serve --http2 --https-key ./path/to/server.key --https-cert ./path/to/server.crt --https-cacert ./path/to/ca.pem ``` ## `devServer.https` `boolean` `object` -By default, dev-server will be served over HTTP. It can optionally be served over HTTP/2 with HTTPS: +By default, dev-server will be served over `HTTP`. It can optionally be served over `HTTP/2` with `HTTPS`: **webpack.config.js** @@ -590,12 +511,14 @@ With the above setting, a self-signed certificate is used, but you can provide y ```javascript module.exports = { - //... devServer: { https: { - key: fs.readFileSync('/path/to/server.key'), - cert: fs.readFileSync('/path/to/server.crt'), - ca: fs.readFileSync('/path/to/ca.pem'), + cacert: './server.pem', + pfx: './server.pfx', + key: './server.key', + cert: './server.crt', + passphrase: 'webpack-dev-server', + requestCert: true, }, }, }; @@ -603,7 +526,7 @@ module.exports = { This object is passed straight to Node.js HTTPS module, so see the [HTTPS documentation](https://nodejs.org/api/https.html) for more information. -Usage via the CLI +Usage via the CLI: ```bash npx webpack serve --https @@ -612,14 +535,14 @@ npx webpack serve --https To pass your own certificate via the CLI use the following options ```bash -npx webpack serve --https --key ./path/to/server.key --cert ./path/to/server.crt --cacert ./path/to/ca.pem +npx webpack serve --https-key ./path/to/server.key --https--cert ./path/to/server.crt --https-cacert ./path/to/ca.pem ``` -## `devServer.index` +## `devServer.headers` -`string` +`function` `object` -The filename that is considered the index file. +Adds headers to all responses: **webpack.config.js** @@ -627,51 +550,50 @@ The filename that is considered the index file. module.exports = { //... devServer: { - index: 'index.html', + headers: { + 'X-Custom-Foo': 'bar', + }, }, }; ``` -## `devServer.injectClient` +## devServer.historyApiFallback -`boolean = false` `function (compilerConfig) => boolean` +`boolean` `object` -Tells `devServer` to inject a client. Setting `devServer.injectClient` to `true` will result in always injecting a client. It is possible to provide a function to inject conditionally: +When using the [HTML5 History API](https://developer.mozilla.org/en-US/docs/Web/API/History), the `index.html` page will likely have to be served in place of any `404` responses. Enable `devServer.historyApiFallback` by setting it to `true`: + +**webpack.config.js** ```javascript module.exports = { //... devServer: { - injectClient: (compilerConfig) => compilerConfig.name === 'only-include', + historyApiFallback: true, }, }; ``` -## `devServer.injectHot` - -`boolean = false` `function (compilerConfig) => boolean` +By passing an object this behavior can be controlled further using options like `rewrites`: -Tells `devServer` to inject a Hot Module Replacement. Setting `devServer.injectHot` to `true` will result in always injecting. It is possible to provide a function to inject conditionally: +**webpack.config.js** ```javascript module.exports = { //... devServer: { - hot: true, - injectHot: (compilerConfig) => compilerConfig.name === 'only-include', + historyApiFallback: { + rewrites: [ + { from: /^\/$/, to: '/views/landing.html' }, + { from: /^\/subpage/, to: '/views/subpage.html' }, + { from: /./, to: '/views/404.html' }, + ], + }, }, }; ``` -W> Make sure that [`devServer.hot`](#devserverhot) is set to `true` because `devServer.injectHot` only works with HMR. - -## `devServer.inline` - -`boolean` - -Toggle between the dev-server's two different modes. By default, the application will be served with _inline mode_ enabled. This means that a script will be inserted in your bundle to take care of live reloading, and build messages will appear in the browser console. - -It is also possible to use **iframe mode**, which uses an `