From 3f2b14828095532d7d27aaed06247db4565ec274 Mon Sep 17 00:00:00 2001 From: Sam Chen Date: Mon, 9 Aug 2021 19:58:58 +0800 Subject: [PATCH 01/11] 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/11] 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/11] 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/11] 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/11] 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/11] 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/11] 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/11] 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/11] 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/11] 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 c9862096119b81bf6f0fd806800bfbafc1a0075a Mon Sep 17 00:00:00 2001 From: jacob-lcs Date: Fri, 13 Aug 2021 15:23:24 +0800 Subject: [PATCH 11/11] docs(en): fix conflicts --- .../blog/2020-10-10-webpack-5-release.mdx | 6 +-- src/content/branding.mdx | 22 +--------- src/content/concepts/plugins.mdx | 4 -- src/content/configuration/experiments.mdx | 40 ++++++++----------- src/content/configuration/index.mdx | 21 ++-------- src/content/configuration/other-options.mdx | 12 +----- src/content/contribute/index.mdx | 6 --- src/content/guides/asset-management.mdx | 4 -- src/content/guides/asset-modules.mdx | 12 ++---- src/content/guides/code-splitting.mdx | 6 +-- src/content/loaders/index.mdx | 6 +-- src/content/migrate/3.mdx | 18 +++------ src/content/migrate/4.mdx | 8 +--- 13 files changed, 35 insertions(+), 130 deletions(-) diff --git a/src/content/blog/2020-10-10-webpack-5-release.mdx b/src/content/blog/2020-10-10-webpack-5-release.mdx index 53d628f9f22c..c7846c3c83a0 100644 --- a/src/content/blog/2020-10-10-webpack-5-release.mdx +++ b/src/content/blog/2020-10-10-webpack-5-release.mdx @@ -100,11 +100,7 @@ webpack 是完全基于[赞助](https://opencollective.com/webpack)的。 ### 不再为 Node.js 模块 自动引用 Polyfills {#automatic-nodejs-polyfills-removed} -<<<<<<< HEAD:src/content/blog/2020-10-10-webpack-5-release.md -在早期，webpack 的目的是为了让大多数的 Node.js 模块运行在浏览器中，但如今模块的格局已经发生了变化，现在许多模块主要是为前端而编写。webpack <= 4 的版本中提供了许多 Node.js 核心模块的 polyfills，一旦某个模块引用了任何一个核心模块（如 `cypto` 模块），webpack 就会自动引用这些 polyfills。 -======= -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). ->>>>>>> 358269645e4528bf75105df2769e55b8dac8cd88:src/content/blog/2020-10-10-webpack-5-release.mdx +在早期，webpack 的目的是为了让大多数的 Node.js 模块运行在浏览器中，但如今模块的格局已经发生了变化，现在许多模块主要是为前端而编写。webpack <= 4 的版本中提供了许多 Node.js 核心模块的 polyfills，一旦某个模块引用了任何一个核心模块（如 `cypto` 模块），webpack 就会自动引用这些 polyfills。 尽管这会使得使用为 Node.js 编写模块变得容易，但它在构建时给 bundle 附加了庞大的 polyfills。在大部分情况下，这些 polyfills 并非必须。 diff --git a/src/content/branding.mdx b/src/content/branding.mdx index e45bfe225571..5e1915c95a01 100644 --- a/src/content/branding.mdx +++ b/src/content/branding.mdx @@ -12,13 +12,9 @@ translators: - jacob-lcs --- -<<<<<<< HEAD:src/content/branding.md -在这里你可以找到 **webpack** 项目的品牌指南、资源和许可证。有关更多信息，请通过查看我们的官方[媒体仓库](https://github.com/webpack/media)，并找到[许可证](https://github.com/webpack/media/blob/master/LICENSE)来了解。点击任意图片下载它们。 -======= 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. ->>>>>>> 358269645e4528bf75105df2769e55b8dac8cd88:src/content/branding.mdx +在这里你可以找到 **webpack** 项目的品牌指南、资源和许可证。有关更多信息，请通过查看我们的官方[媒体仓库](https://github.com/webpack/media)，并找到[许可证](https://github.com/webpack/media/blob/master/LICENSE)来了解。点击任意图片下载它们。 ## 名称 {#the-name} @@ -99,23 +95,8 @@ T> 对于那些遵循我们的指南，并已经深入了解的人，我们还 在 [Open Collective](https://opencollective.com/) 和 [Threadless](https://medium.com/u/840563ee2a56) 的帮助下，以下颜色在我们整个网站中被以各种组合形式使用，并且在 [webpack 官方商城](https://webpack.threadless.com/collections/the-final-release-collection/) 推出的时尚服装系列中也用了这些颜色！ -<<<<<<< HEAD:src/content/branding.md | 颜色名称 | HEX 码 | RGB 码 | 示例 | | ------------ | ------------- | -------------------- | ---------------------------------------------------- | -| 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` | | @@ -127,7 +108,6 @@ T> 对于那些遵循我们的指南，并已经深入了解的人，我们还 | Dove Gray: | HEX `#666666` | `rgb: 102, 102, 102` | | | Emperor: | HEX `#535353` | `rgb: 83, 83, 83` | | | Mine Shaft: | HEX `#333333` | `rgb: 51, 51, 51` | | ->>>>>>> 358269645e4528bf75105df2769e55b8dac8cd88:src/content/branding.mdx 此外，你可以直接从下面的链接，获取这些类型的文件： diff --git a/src/content/concepts/plugins.mdx b/src/content/concepts/plugins.mdx index f85c26aa2c41..0a19e6b6f463 100644 --- a/src/content/concepts/plugins.mdx +++ b/src/content/concepts/plugins.mdx @@ -34,11 +34,7 @@ const pluginName = 'ConsoleLogOnBuildWebpackPlugin'; class ConsoleLogOnBuildWebpackPlugin { apply(compiler) { compiler.hooks.run.tap(pluginName, (compilation) => { -<<<<<<< HEAD:src/content/concepts/plugins.md console.log('webpack 构建过程开始！'); -======= - console.log('The webpack build process is starting!'); ->>>>>>> 358269645e4528bf75105df2769e55b8dac8cd88:src/content/concepts/plugins.mdx }); } } diff --git a/src/content/configuration/experiments.mdx b/src/content/configuration/experiments.mdx index 9950293777b5..95c8aa13049b 100644 --- a/src/content/configuration/experiments.mdx +++ b/src/content/configuration/experiments.mdx @@ -11,11 +11,7 @@ translators: - QC-L --- -<<<<<<< HEAD -## `experiments` {#experiments} -======= -## experiments ->>>>>>> 358269645e4528bf75105df2769e55b8dac8cd88 +## experiments {#experiments} `boolean: false` @@ -52,12 +48,9 @@ module.exports = { }; ``` -<<<<<<< HEAD -### experiments.executeModule {#experimentsexecutemodule} -======= -### experiments.buildHttp +### experiments.buildHttp {#experimentsbuildhttp} -When enabled, webpack can build remote resources that begin with the `http(s):` protocol. +启用该配置项时，webpack 可以构建以 `http(s):` 协议开头的远程资源。 - Type: @@ -90,13 +83,13 @@ When enabled, webpack can build remote resources that begin with the `http(s):` ```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 + // `buildHttp` 启用时，webpack 会想本地模块一样构建 pMap1 console.log(pMap1); ``` -#### experiments.buildHttp.cacheLocation +#### experiments.buildHttp.cacheLocation {#experimentsbuildhttpcachelocation} -Define the location for caching remote resources. +定义缓存远程资源的位置。 - Type - `string` @@ -114,32 +107,31 @@ Define the location for caching remote resources. }; ``` -By default webpack would use `webpack.lock.data/` for caching, but you can disable it by setting its value to `false`. +webpack 默认使用 `webpack.lock.data/` 进行缓存，但是你可以将其设为 `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.cacheLocation` 下提交文件到版本控制系统中，因为在 `production` 构建过程中不会发出网络请求。 -#### experiments.buildHttp.frozen +#### experiments.buildHttp.frozen {#experimentsbuildhttpfrozen} -Freeze the remote resources and lockfile. Any modification to the lockfile or resource contents will result in an error. +冻结远程资源并锁定文件。对锁文件（lockfile）或资源内容的任何修改都将导致错误。 - Type: `boolean` -#### experiments.buildHttp.lockfileLocation +#### experiments.buildHttp.lockfileLocation {#experimentsbuildhttplockfilelocation} -Define the location to store the lockfile. +定义存储锁文件（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). +webpack 默认会创建一个 `webpack.lock`。请确保将其提交到版本控制系统中。在 `production` 构建过程中，webpack 将会构建锁文件（lockfile）中以 `http(s):` 协议开头的模块，并将其缓存在 [`experiments.buildHttp.cacheLocation`](#experimentsbuildhttpcachelocation)。 -#### experiments.buildHttp.upgrade +#### experiments.buildHttp.upgrade {#experimentsbuildhttpupgrade} -Detect changes to remote resources and upgrade them automatically. +检测远程资源的更改并自动升级。 - Type: `boolean` -### experiments.executeModule ->>>>>>> 358269645e4528bf75105df2769e55b8dac8cd88 +### experiments.executeModule {#experimentsexecutemodule} Enable execution of modules from the module graph for plugins and loaders at build time to generate code or other assets. diff --git a/src/content/configuration/index.mdx b/src/content/configuration/index.mdx index f47adf531e64..f254d29d0c11 100644 --- a/src/content/configuration/index.mdx +++ b/src/content/configuration/index.mdx @@ -25,27 +25,17 @@ translators: webpack 开箱即用，可以无需使用任何配置文件。然而，webpack 会假定项目的入口起点为 `src/index.js`，然后会在 `dist/main.js` 输出结果，并且在生产环境开启压缩和优化。 -<<<<<<< HEAD -通常你的项目还需要继续扩展此能力，为此你可以在项目根目录下创建一个 `webpack.config.js` 文件，然后 webpack 会自动使用它。 -======= -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. +T> [createapp.dev](https://createapp.dev/webpack) 是一个创建自定义 webpack 配置的在线工具。它允许你选择各种特性，其将会被添加到最后的配置文件中。它也会基于生成的 webpack 配置初始化一个示例项目，你可以在浏览器中查看该项目并且下载。 -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. ->>>>>>> 358269645e4528bf75105df2769e55b8dac8cd88 +通常你的项目还需要继续扩展此能力，为此你可以在项目根目录下创建一个 `webpack.config.js` 文件，然后 webpack 会自动使用它。 下面指定了所有可用的配置选项。 T> 刚开始学习 webpack？请查看我们提供的指南，从 webpack 一些 [核心概念](/concepts) 开始学习吧！ -<<<<<<< HEAD ## 使用不同的配置文件 {#use-different-configuration-file} -如果出于某些原因，需要根据特定情况使用不同的配置文件，则可以通过在命令行中使用 `--config` flag 修改此配置文件名称。 -======= -## 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. ->>>>>>> 358269645e4528bf75105df2769e55b8dac8cd88 +如果出于某些原因，需要根据特定情况使用不同的配置文件，则可以通过在命令行中使用 `--config` 标志修改。 **package.json** @@ -1185,8 +1175,3 @@ found 0 vulnerabilities Congratulations! Your new webpack configuration file has been created! ``` -<<<<<<< HEAD -[createapp.dev - 在浏览器中创建 webpack 配置](https://createapp.dev/webpack)，是一个用于创建自定义 webpack 配置的在线工具。它可以选择各种功能，这些功能将被组合并添加到生成的配置文件中。此外，它还会基于提供的 webpack 配置生成示例项目，可以在浏览器中查看并下载。 -======= - ->>>>>>> 358269645e4528bf75105df2769e55b8dac8cd88 diff --git a/src/content/configuration/other-options.mdx b/src/content/configuration/other-options.mdx index 82fe524b9d7f..ac5385aab8e6 100644 --- a/src/content/configuration/other-options.mdx +++ b/src/content/configuration/other-options.mdx @@ -213,11 +213,7 @@ module.exports = { `string` `boolean = false` `RegExp` `function(name) => boolean` `[string, RegExp, function(name) => boolean]` -<<<<<<< HEAD -开启特定日志比如插件(plugins)和加载器(loaders)的调试信息。 与 [`stats.loggingDebug`](/configuration/stats/#statsloggingdebug) 选项类似但仅仅对于基础设施而言。没有默认配置提供。 -======= -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`. ->>>>>>> 358269645e4528bf75105df2769e55b8dac8cd88 +开启特定日志比如插件(plugins)和加载器(loaders)的调试信息。 与 [`stats.loggingDebug`](/configuration/stats/#statsloggingdebug) 选项类似但仅仅对于基础设施而言。默认为 `false`。 **webpack.config.js** @@ -235,11 +231,7 @@ module.exports = { `string = 'info' : 'none' | 'error' | 'warn' | 'info' | 'log' | 'verbose'` -<<<<<<< HEAD -开启基础设施日志输出。与 [`stats.logging`](/configuration/stats/#statslogging) 选项类似但仅仅是对于基础设施而言。没有默认值提供。 -======= -Enable infrastructure logging output. Similar to [`stats.logging`](/configuration/stats/#statslogging) option but for infrastructure. Defaults to `'info'`. ->>>>>>> 358269645e4528bf75105df2769e55b8dac8cd88 +开启基础设施日志输出。与 [`stats.logging`](/configuration/stats/#statslogging) 选项类似但仅仅是对于基础设施而言。默认值为 `'info'`。 可能的取值： diff --git a/src/content/contribute/index.mdx b/src/content/contribute/index.mdx index b5b077a94143..ff9bfbb74f56 100644 --- a/src/content/contribute/index.mdx +++ b/src/content/contribute/index.mdx @@ -76,13 +76,7 @@ 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. -<<<<<<< HEAD:src/content/contribute/index.md - - ## Pull requests {#pull-requests} -======= -## Pull requests ->>>>>>> 358269645e4528bf75105df2769e55b8dac8cd88:src/content/contribute/index.mdx 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. When a feature gets merged, an issue with a documentation request is created in our repository and we expect to resolve it in a timely manner. This means that there are features, changes and breaking changes awaiting to be documented, reviewed and released. That said, if Pull Request's author is abandoning it for more than 30 days, we may mark such Pull Request as stale. We may take over the work that is needed to finish it. diff --git a/src/content/guides/asset-management.mdx b/src/content/guides/asset-management.mdx index 2140066d695c..bcb31015d5a0 100644 --- a/src/content/guides/asset-management.mdx +++ b/src/content/guides/asset-management.mdx @@ -16,11 +16,7 @@ translators: - dear-lizhihua --- -<<<<<<< HEAD:src/content/guides/asset-management.md 如果你是从开始一直在沿用指南的示例，现在会有一个小项目，显示 "Hello webpack"。现在我们尝试混合一些其他资源，比如 images，看看 webpack 如何处理。 -======= -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. ->>>>>>> 358269645e4528bf75105df2769e55b8dac8cd88:src/content/guides/asset-management.mdx 在 webpack 出现之前，前端开发人员会使用 [grunt](https://gruntjs.com/) 和 [gulp](https://gulpjs.com/) 等工具来处理资源，并将它们从 `/src` 文件夹移动到 `/dist` 或 `/build` 目录中。JavaScript 模块也遵循同样方式，但是，像 webpack 这样的工具，将**动态打包**所有依赖（创建所谓的 [依赖图(dependency graph)](/concepts/dependency-graph)）。这是极好的创举，因为现在每个模块都可以**明确表述它自身的依赖**，可以避免打包未使用的模块。 diff --git a/src/content/guides/asset-modules.mdx b/src/content/guides/asset-modules.mdx index 8d6d388292d0..396b6a282e65 100644 --- a/src/content/guides/asset-modules.mdx +++ b/src/content/guides/asset-modules.mdx @@ -20,15 +20,9 @@ related: 在 webpack 5 之前，通常使用： -<<<<<<< HEAD:src/content/guides/asset-modules.md -- [`raw-loader`](/loaders/raw-loader/) 将文件导入为字符串 -- [`url-loader`](/loaders/url-loader/) 将文件作为 data URI 内联到 bundle 中 -- [`file-loader`](/loaders/file-loader/) 将文件发送到输出目录 -======= -- [`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 ->>>>>>> 358269645e4528bf75105df2769e55b8dac8cd88:src/content/guides/asset-modules.mdx +- [`raw-loader`](https://v4.webpack.docschina.org/loaders/raw-loader/) 将文件导入为字符串 +- [`url-loader`](https://v4.webpack.docschina.org/loaders/url-loader/) 将文件作为 data URI 内联到 bundle 中 +- [`file-loader`](https://v4.webpack.docschina.org/loaders/file-loader/) 将文件发送到输出目录 资源模块类型(asset module type)，通过添加 4 种新的模块类型，来替换所有这些 loader： diff --git a/src/content/guides/code-splitting.mdx b/src/content/guides/code-splitting.mdx index 14f34b665ef1..ea74bcc5d8ab 100644 --- a/src/content/guides/code-splitting.mdx +++ b/src/content/guides/code-splitting.mdx @@ -37,11 +37,7 @@ translators: - jacob-lcs - dear-lizhihua related: -<<<<<<< HEAD:src/content/guides/code-splitting.md - - title: webpack 中的 -======= - - title: <link rel="prefetch/preload"> in webpack ->>>>>>> 358269645e4528bf75105df2769e55b8dac8cd88:src/content/guides/code-splitting.mdx + - title: webpack 中的 <link rel="prefetch/preload"> url: https://medium.com/webpack/link-rel-prefetch-preload-in-webpack-51a52358f84c - title: Chrome 中的预加载、预获取和优先级(Preload, Prefetch And Priorities) url: https://medium.com/reloading/preload-prefetch-and-priorities-in-chrome-776165961bbf diff --git a/src/content/loaders/index.mdx b/src/content/loaders/index.mdx index 8c8660cb4e1d..8ab967d6abcb 100644 --- a/src/content/loaders/index.mdx +++ b/src/content/loaders/index.mdx @@ -72,8 +72,4 @@ webpack 支持使用 [loader](/concepts/loaders) 对文件进行预处理。你 ## Awesome {#awesome} -<<<<<<< HEAD:src/content/loaders/index.md -有关更多第三方加载器，请参阅 [awesome-webpack](https://github.com/webpack-contrib/awesome-webpack#loaders) 中的列表。 -======= -For more third-party loaders, see the list from [awesome-webpack](/awesome-webpack/#loaders). ->>>>>>> 358269645e4528bf75105df2769e55b8dac8cd88:src/content/loaders/index.mdx +有关更多第三方加载器，请参阅 [awesome-webpack](/awesome-webpack#loaders) 中的列表。 diff --git a/src/content/migrate/3.mdx b/src/content/migrate/3.mdx index f0c40fda1f2f..d245dbfe6d50 100644 --- a/src/content/migrate/3.mdx +++ b/src/content/migrate/3.mdx @@ -76,7 +76,7 @@ T> 注意：webpack 从 1 到 2 的变化，比从 2 到 3 要少很多，所以 }, { test: /\.jsx$/, - loader: "babel-loader", // 在这里不要使用 "use" + loader: "babel-loader", // 在这里不要使用 "use" options: { // ... } @@ -153,7 +153,7 @@ T> 注意：webpack 从 1 到 2 的变化，比从 2 到 3 要少很多，所以 } ``` -[我们决定这样做](https://github.com/webpack/webpack/issues/3363) +[我们决定这样做](https://github.com/webpack/webpack/issues/3363) 是为了消除 webpack、 node.js 和 browserify 之间的环境差异。 ## 配置中的 loader 默认相对于 context 进行解析 {#loaders-in-configuration-resolve-relative-to-context} @@ -237,7 +237,7 @@ loaders 的压缩模式将在 webpack 3 或后续版本中取消。 ] ``` -## 移除 `DedupePlugin` {#dedupeplugin-has-been-removed} +## 移除 `DedupePlugin` {#dedupeplugin-has-been-removed} 不再需要 `webpack.optimize.DedupePlugin`。请从配置中移除。 @@ -350,11 +350,7 @@ module.exports = function (env) { ## 通过 `options` 中配置 loader {#loader-configuration-is-through-options} -<<<<<<< HEAD:src/content/migrate/3.md -你**不能再**通过 `webpack.config.js` 的自定义属性来配置 loader 。只能通过 `options` 来配置。下面配置的 `ts` 属性在 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: ->>>>>>> 358269645e4528bf75105df2769e55b8dac8cd88:src/content/migrate/3.mdx +你 _不能再_ 通过 `webpack.config.js` 的自定义属性来配置 loader 。只能通过 `options` 来配置。下面配置的 `ts` 属性在 webpack 2 下不再有效： ```js module.exports = { @@ -374,11 +370,7 @@ module.exports = { ### 什么是 `options` ？ {#what-are-options} -<<<<<<< HEAD:src/content/migrate/3.md -好问题。严格来说，有两种办法，都可以用来配置 webpack 的 loader 。典型的 `options` 被称为 `query`，是一个可以被添加到 loader 名之后的字符串。它比较像一个查询字符串(query string)，但是实际上有[更强大的能力](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): ->>>>>>> 358269645e4528bf75105df2769e55b8dac8cd88:src/content/migrate/3.mdx +好问题。严格来说，有两种办法，都可以用来配置 webpack 的 loader。典型的 `options` 被称为 `query`，是一个可以被添加到 loader 名之后的字符串。它比较像一个查询字符串(query string)，但是实际上有[更强大的能力](https://github.com/webpack/loader-utils#parsequery): ```js module.exports = { diff --git a/src/content/migrate/4.mdx b/src/content/migrate/4.mdx index 5930f8f1aef9..16dce48e752f 100644 --- a/src/content/migrate/4.mdx +++ b/src/content/migrate/4.mdx @@ -33,15 +33,11 @@ related: ## 更新插件 {#update-plugins} -<<<<<<< HEAD:src/content/migrate/4.md -为了兼容 webpack4，许多第三方插件需要更新至最新版本。一些流行的插件链接见[这里](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). ->>>>>>> 358269645e4528bf75105df2769e55b8dac8cd88:src/content/migrate/4.mdx +为了兼容 webpack4，许多第三方插件需要更新至最新版本。一些流行的插件链接见[这里](/awesome-webpack#webpack-plugins)。 ## 模式（mode） {#mode} -在你的配置中添加新的 [`模式 （mode）`](/configuration/mode/) 选项。设置它为 `'production'`, `'development'` or `'无 (none)'` +在你的配置中添加新的 [`模式 （mode）`](/configuration/mode/) 选项。设置它为 `'production'`, `'development'` or `'无 (none)'` **webpack.config.js**