{props.children}
;
5 | Markdown.propTypes = {
6 | children: PropTypes.node,
7 | };
8 | export default Markdown;
9 |
--------------------------------------------------------------------------------
/src/components/Page/Page.scss:
--------------------------------------------------------------------------------
1 | @import 'mixins';
2 | @import 'functions';
3 |
4 | .page {
5 | flex: 1 1 auto;
6 | position: relative;
7 | overflow-x: hidden;
8 | padding: 1.5em 1em;
9 |
10 | @include break {
11 | flex: 3;
12 | padding: 1.5em;
13 | }
14 | }
15 |
--------------------------------------------------------------------------------
/src/remark-plugins/remark-remove-heading-id/__snapshots__/index.test.mjs.snap:
--------------------------------------------------------------------------------
1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
2 |
3 | exports[`customize blockquote should add id 1`] = `
4 | "hello world
5 |this is me.
6 | " 7 | `; 8 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | dist 3 | !examples/**/dist 4 | src/**/_*.json 5 | src/**/_*.mdx 6 | .vscode 7 | .idea 8 | .DS_Store 9 | npm-debug.log 10 | yarn-error.log 11 | package-lock.json 12 | .cache 13 | internal-links.tap 14 | stats.json 15 | printable.mdx 16 | repositories/*.json 17 | -------------------------------------------------------------------------------- /.vale/proselint/Typography.yml: -------------------------------------------------------------------------------- 1 | extends: substitution 2 | message: Consider using the '%s' symbol instead of '%s'. 3 | level: error 4 | nonword: true 5 | swap: 6 | '\.\.\.': … 7 | '\([cC]\)': © 8 | '\(TM\)': ™ 9 | '\(tm\)': ™ 10 | '\([rR]\)': ® 11 | '[0-9]+ ?x ?[0-9]+': × 12 | -------------------------------------------------------------------------------- /cypress/e2e/search.cy.js: -------------------------------------------------------------------------------- 1 | describe('Search', () => { 2 | it('should visit entry page', () => { 3 | cy.visit('/concepts/'); 4 | cy.get('.DocSearch').click(); 5 | cy.get('#docsearch-input').type('roadmap'); 6 | cy.get('.DocSearch-Hits').should('be.visible'); 7 | }); 8 | }); 9 | -------------------------------------------------------------------------------- /src/components/Contributors/404.js: -------------------------------------------------------------------------------- 1 | // contributors 404 2 | export const contributorsNotFound = [ 3 | 'bartushek', 4 | 'rynclark', 5 | 'henriquea', 6 | 'makuzaverite', 7 | 'MijaelWatts', 8 | 'Kolhar730', 9 | 'grrizzly', 10 | 'maxloh', 11 | 'varunjayaraman', 12 | ]; 13 | -------------------------------------------------------------------------------- /src/components/Splash/second/right.mdx: -------------------------------------------------------------------------------- 1 | **page.html** 2 | 3 | ```html 4 | 5 | 6 | 7 | 8 | ... 9 | 10 | 11 | ... 12 | 13 | 14 | 15 | ``` 16 | -------------------------------------------------------------------------------- /src/remark-plugins/remark-slug/__snapshots__/index.test.mjs.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`remark slug should add id 1`] = ` 4 | "hello world
5 |this is me.
6 | " 7 | `; 8 | -------------------------------------------------------------------------------- /src/styles/icons/menu.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.vale/proselint/Cursing.yml: -------------------------------------------------------------------------------- 1 | extends: existence 2 | message: "Consider replacing '%s'." 3 | level: error 4 | ignorecase: true 5 | tokens: 6 | - shit 7 | - piss 8 | - fuck 9 | - cunt 10 | - cocksucker 11 | - motherfucker 12 | - tits 13 | - fart 14 | - turd 15 | - twat 16 | -------------------------------------------------------------------------------- /src/styles/icons/medium.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /repositories/README.md: -------------------------------------------------------------------------------- 1 | # webpack documentation repositories 2 | 3 | The files in this directory are auto generated from [`fetch-package-repos.mjs`](../src/utilities/fetch-package-repos.mjs) and should not be edited by hand. Any manual changes will be overwritten by the automation next time it runs. 4 | -------------------------------------------------------------------------------- /src/content/blog/index.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: Blog 3 | sort: -1 4 | contributors: 5 | - sokra 6 | --- 7 | 8 | Read here for announcements. 9 | 10 | See recent blog posts in the side bar. 11 | 12 | ## Popular posts 13 | 14 | - [Webpack 5 release (2020-10-10)](/blog/2020-10-10-webpack-5-release/) 15 | -------------------------------------------------------------------------------- /src/remark-plugins/remark-custom-asides/__snapshots__/index.test.mjs.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`customize blockquote should transform W> into aside of warning 1`] = ` 4 | " 5 | " 6 | `; 7 | -------------------------------------------------------------------------------- /.vale.ini: -------------------------------------------------------------------------------- 1 | # Vale configuration file. 2 | # 3 | # For more information, see https://vale.sh/docs/topics/config/ 4 | 5 | 6 | StylesPath = .vale 7 | MinAlertLevel = warning 8 | 9 | [*.{md,mdx}] 10 | BasedOnStyles = proselint 11 | 12 | proselint.But = NO 13 | proselint.Typography = NO 14 | proselint.Annotations = NO -------------------------------------------------------------------------------- /.vale/proselint/Skunked.yml: -------------------------------------------------------------------------------- 1 | extends: existence 2 | message: "'%s' is a bit of a skunked term — impossible to use without issue." 3 | ignorecase: true 4 | level: error 5 | tokens: 6 | - bona fides 7 | - deceptively 8 | - decimate 9 | - effete 10 | - fulsome 11 | - hopefully 12 | - impassionate 13 | - Thankfully 14 | -------------------------------------------------------------------------------- /src/components/Logo/Logo.jsx: -------------------------------------------------------------------------------- 1 | import Logo from '../../assets/site-logo.svg'; 2 | import './Logo.scss'; 3 | 4 | export default function LogoComp() { 5 | return ( 6 |
11 |
13 | )
14 | }
15 |
16 | export default App;
17 |
18 |
--------------------------------------------------------------------------------
/src/utilities/list2Tree/findTopLevel.test.js:
--------------------------------------------------------------------------------
1 | const findTopLevel = require('./findTopLevel');
2 | describe('findTopLevel', () => {
3 | test('should return level 1', () => {
4 | expect(findTopLevel([{ level: 1 }, { level: 2 }])).toBe(1);
5 | });
6 | test('should be undefined', () => {
7 | expect(findTopLevel([])).toBeUndefined();
8 | });
9 | });
10 |
--------------------------------------------------------------------------------
/src/components/Page/AdjacentPages.scss:
--------------------------------------------------------------------------------
1 | .adjacent-links {
2 | display: flex;
3 | padding: 30px 0;
4 | justify-content: space-between;
5 | &__prev {
6 | margin-right: auto;
7 | }
8 | &__next {
9 | margin-left: auto;
10 | }
11 | &__link {
12 | font-size: 1.125rem;
13 | }
14 | &__label--next {
15 | text-align: right;
16 | }
17 | }
18 |
--------------------------------------------------------------------------------
/src/components/Splash/second/left.mdx:
--------------------------------------------------------------------------------
1 | **[Without config](https://youtu.be/3Nv9muOkb6k?t=21293)** or provide custom **webpack.config.js**
2 |
3 | ```js
4 | const path = require('path');
5 |
6 | module.exports = {
7 | entry: './src/index.js',
8 | output: {
9 | path: path.resolve(__dirname, 'dist'),
10 | filename: 'bundle.js',
11 | },
12 | };
13 | ```
14 |
--------------------------------------------------------------------------------
/src/utilities/flatten-content-tree.mjs:
--------------------------------------------------------------------------------
1 | export default (tree) => {
2 | let paths = [];
3 |
4 | const crawl = (node) => {
5 | if ('url' in node) {
6 | paths.push(node.url);
7 | }
8 |
9 | if ('children' in node) {
10 | node.children.map(crawl);
11 | }
12 | };
13 |
14 | tree.children.map(crawl);
15 |
16 | return paths;
17 | };
18 |
--------------------------------------------------------------------------------
/src/utilities/find-files-in-dist.js:
--------------------------------------------------------------------------------
1 | // grab .css files from ssg run
2 | const fs = require('fs');
3 |
4 | module.exports = function (fileSuffixes = []) {
5 | const filesInDist = fs.readdirSync('./dist');
6 | return fileSuffixes.length
7 | ? filesInDist.filter((file) =>
8 | fileSuffixes.find((suffix) => file.endsWith(suffix))
9 | )
10 | : [];
11 | };
12 |
--------------------------------------------------------------------------------
/src/utilities/list2Tree/findTopLevel.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Find the minimum level in the anchors
3 | */
4 | module.exports = function findTopLevel(anchors = []) {
5 | if (anchors.length === 0) return;
6 | let result = 99;
7 | for (const anchor of anchors) {
8 | if (anchor.level < result) {
9 | result = anchor.level;
10 | }
11 | }
12 | return result;
13 | };
14 |
--------------------------------------------------------------------------------
/examples/module-federation/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "module-federation",
3 | "private": true,
4 | "workspaces": {
5 | "packages": [
6 | "app1",
7 | "app2"
8 | ]
9 | },
10 | "scripts": {
11 | "start": "lerna run --parallel start",
12 | "build": "lerna run build"
13 | },
14 | "devDependencies": {
15 | "lerna": "^4.0.0"
16 | }
17 | }
18 |
--------------------------------------------------------------------------------
/src/components/Container/Container.jsx:
--------------------------------------------------------------------------------
1 | import './Container.scss';
2 | import PropTypes from 'prop-types';
3 | Container.propTypes = {
4 | className: PropTypes.string,
5 | children: PropTypes.node,
6 | };
7 | export default function Container(props = {}) {
8 | let { className = '' } = props;
9 |
10 | return App 2
12 |{props.children}
;
11 | }
12 |
--------------------------------------------------------------------------------
/src/components/Shield/Shield.jsx:
--------------------------------------------------------------------------------
1 | import PropTypes from 'prop-types';
2 | const Shield = (props) => (
3 | 
7 | );
8 | Shield.propTypes = {
9 | content: PropTypes.string,
10 | label: PropTypes.string,
11 | };
12 | export default Shield;
13 |
--------------------------------------------------------------------------------
/src/utilities/get-adjacent-pages/index.mjs:
--------------------------------------------------------------------------------
1 | export default function getAdjacentPages(haystack, needle, by = 'url') {
2 | let previous, next;
3 | const findMe = haystack.findIndex((page) => page[by] === needle[by]);
4 | if (findMe !== -1) {
5 | previous = haystack[findMe - 1];
6 | next = haystack[findMe + 1];
7 | }
8 | return {
9 | previous,
10 | next,
11 | };
12 | }
13 |
--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
1 | # Top-most EditorConfig file
2 | root = true
3 |
4 | # AutoFormat All Files
5 | [*]
6 | trim_trailing_whitespace = true
7 | insert_final_newline = true
8 |
9 | # Format Source Code
10 | [*.{md,mdx,js,jsx,json,scss,hbs}]
11 | charset = utf-8
12 | indent_style = space
13 | indent_size = 2
14 | quote_type = single
15 |
16 | # Format Configs
17 | [.eslintignore,*rc]
18 | indent_style = space
19 | indent_size = 2
20 |
--------------------------------------------------------------------------------
/cypress/e2e/toggle-dark-mode.cy.js:
--------------------------------------------------------------------------------
1 | describe('Toggle dark mode', () => {
2 | it('should toggle .dark class for html element', () => {
3 | cy.visit('/');
4 |
5 | const selector = '[data-testid="hello-darkness"]';
6 |
7 | cy.get(selector).click();
8 | cy.get('html').should('have.class', 'dark');
9 |
10 | cy.get(selector).click();
11 | cy.get('html').should('not.have.class', 'dark');
12 | });
13 | });
14 |
--------------------------------------------------------------------------------
/sitemap-ignore.json:
--------------------------------------------------------------------------------
1 | [
2 | "app-shell/index.html",
3 | "appcache/manifest.html",
4 | "printable/index.html",
5 | "api/printable/index.html",
6 | "concepts/printable/index.html",
7 | "configuration/printable/index.html",
8 | "contribute/printable/index.html",
9 | "guides/printable/index.html",
10 | "migrate/printable/index.html",
11 | "loaders/printable/index.html",
12 | "plugins/printable/index.html"
13 | ]
14 |
--------------------------------------------------------------------------------
/src/styles/icons/exit-right.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/.vale/proselint/Spelling.yml:
--------------------------------------------------------------------------------
1 | extends: consistency
2 | message: "Inconsistent spelling of '%s'."
3 | level: error
4 | ignorecase: true
5 | either:
6 | advisor: adviser
7 | centre: center
8 | colour: color
9 | emphasise: emphasize
10 | finalise: finalize
11 | focussed: focused
12 | labour: labor
13 | learnt: learned
14 | organise: organize
15 | organised: organized
16 | organising: organizing
17 | recognise: recognize
18 |
--------------------------------------------------------------------------------
/cypress.config.js:
--------------------------------------------------------------------------------
1 | const { defineConfig } = require('cypress');
2 |
3 | module.exports = defineConfig({
4 | video: false,
5 | e2e: {
6 | // We've imported your old cypress plugins here.
7 | // You may want to clean this up later by importing these.
8 | setupNodeEvents(on, config) {
9 | return require('./cypress/plugins/index.js')(on, config);
10 | },
11 | baseUrl: 'http://localhost:4200',
12 | },
13 | });
14 |
--------------------------------------------------------------------------------
/src/components/Configuration/Configuration.scss:
--------------------------------------------------------------------------------
1 | .shadow {
2 | overflow: visible;
3 | border-radius: 4px;
4 | box-shadow: -1px 1px 10px 0 rgba(255, 255, 255, 0.44);
5 |
6 | pre.inline {
7 | padding: 0;
8 | display: block;
9 | }
10 | }
11 |
12 | .shadow > .markdown {
13 | max-height: 48vh !important;
14 | overflow: auto;
15 | }
16 |
17 | .inline {
18 | padding-right: 15px !important;
19 | margin: 0 !important;
20 | }
21 |
--------------------------------------------------------------------------------
/src/components/mdxComponents/Link.js:
--------------------------------------------------------------------------------
1 | import PropTypes from 'prop-types';
2 | import { Link } from 'react-router-dom';
3 | LinkComponent.propTypes = {
4 | href: PropTypes.string.isRequired,
5 | };
6 | export default function LinkComponent(props) {
7 | // if it's internal link
8 | // use Link instead
9 | if (props.href.startsWith('/')) {
10 | return ;
11 | }
12 | return ;
13 | }
14 |
--------------------------------------------------------------------------------
/src/styles/icons/hamburger.svg:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/src/styles/icons/github.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/.markdownlint.json:
--------------------------------------------------------------------------------
1 | {
2 | "default": true,
3 | "MD002": false,
4 | "MD004": { "style": "dash" },
5 | "MD007": { "indent": 2 },
6 | "MD013": { "line_length": 600, "code_blocks": false },
7 | "MD024": {
8 | "siblings_only": true
9 | },
10 | "MD026": false,
11 | "MD029": { "style": "ordered" },
12 | "MD033": false,
13 | "MD034": false,
14 | "MD036": false,
15 | "MD041": false,
16 | "no-hard-tabs": false,
17 | "whitespace": false
18 | }
19 |
--------------------------------------------------------------------------------
/src/remark-plugins/remark-remove-heading-id/index.mjs:
--------------------------------------------------------------------------------
1 | import { visit } from 'unist-util-visit';
2 | export default function () {
3 | return function transformer(ast) {
4 | visit(ast, 'heading', visitor);
5 | };
6 | function visitor(node) {
7 | if (node.data && node.data.id) {
8 | delete node.data.id;
9 | }
10 | if (node.data && node.data.hProperties && node.data.hProperties.id) {
11 | delete node.data.hProperties.id;
12 | }
13 | }
14 | }
15 |
--------------------------------------------------------------------------------
/.github/workflows/dependency-review.yml:
--------------------------------------------------------------------------------
1 | name: 'Dependency Review'
2 | on: [pull_request]
3 |
4 | permissions:
5 | contents: read
6 |
7 | jobs:
8 | dependency-review:
9 | runs-on: ubuntu-latest
10 | steps:
11 | - name: 'Checkout Repository'
12 | uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
13 | - name: 'Dependency Review'
14 | uses: actions/dependency-review-action@3c4e3dcb1aa7874d2c16be7d79418e9b7efd6261 # v4.8.2
15 |
--------------------------------------------------------------------------------
/src/components/PageNotFound/PageNotFound.jsx:
--------------------------------------------------------------------------------
1 | import { Link } from 'react-router-dom';
2 |
3 | // Styles
4 | import './PageNotFound.scss';
5 |
6 | export default function PageNotFound() {
7 | return (
8 |
9 |
15 | );
16 | }
17 |
--------------------------------------------------------------------------------
/cypress/e2e/check-sub-navigation.cy.js:
--------------------------------------------------------------------------------
1 | describe('Detect sub navigation', () => {
2 | it('should show sub navigation', () => {
3 | cy.visit('/concepts/');
4 |
5 | const selector = '[data-testid="sub-navigation"]';
6 |
7 | cy.get(selector).should('exist');
8 | });
9 |
10 | it('should not show sub navigation', () => {
11 | cy.visit('/');
12 |
13 | const selector = '[data-testid="sub-navigation"]';
14 |
15 | cy.get(selector).should('not.exist');
16 | });
17 | });
18 |
--------------------------------------------------------------------------------
/cypress/e2e/client-side-redirection.cy.js:
--------------------------------------------------------------------------------
1 | describe('Redirect on client side', () => {
2 | it('should redirect', () => {
3 | const target = '/configuration/other-options/#cache';
4 | cy.visit(target);
5 |
6 | cy.url().should('include', '/configuration/cache/');
7 | });
8 | it('should not redirect', () => {
9 | cy.visit('/concepts/entry-points/#multi-page-application');
10 | cy.url().should(
11 | 'include',
12 | '/concepts/entry-points/#multi-page-application'
13 | );
14 | });
15 | });
16 |
--------------------------------------------------------------------------------
/examples/module-federation/README.md:
--------------------------------------------------------------------------------
1 | # Module Federation
2 |
3 | ## How to use
4 |
5 | Run the following commands in the root directory.
6 |
7 | ```bash
8 | yarn
9 | yarn start
10 | ```
11 |
12 | Both `app1` and `app2` are independently deployed apps:
13 |
14 | - `app1`: http://localhost:3001
15 | - `app2`: http://localhost:3002
16 |
17 | Check out this link below for more examples:
18 |
19 | [https://github.com/module-federation/module-federation-examples](https://github.com/module-federation/module-federation-examples)
20 |
--------------------------------------------------------------------------------
/src/components/Site/clientSideRedirections.js:
--------------------------------------------------------------------------------
1 | // RedirectWebpackPlugin won't work for URI fragments
2 | // hence we redirect them with client side script
3 | export default function (location) {
4 | // cache options were splitted into a separate page
5 | // see https://github.com/webpack/webpack.js.org/pull/5146
6 | if (
7 | location.pathname === '/configuration/other-options/' &&
8 | location.hash.startsWith('#cache')
9 | ) {
10 | return `/configuration/cache/${location.hash}`;
11 | }
12 | return false;
13 | }
14 |
--------------------------------------------------------------------------------
/src/utilities/test-local-storage.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Test if localStorage is enabled.
3 | *
4 | * {@link https://github.com/Modernizr/Modernizr/blob/master/feature-detects/storage/localstorage.js}
5 | * @return {undefined|boolean} Returns false on error.
6 | */
7 | module.exports = function () {
8 | const test = 'localStorageTest';
9 | try {
10 | localStorage.setItem(test, test);
11 | localStorage.removeItem(test);
12 | // eslint-disable-next-line no-unused-vars
13 | } catch (e) {
14 | return false;
15 | }
16 | };
17 |
--------------------------------------------------------------------------------
/cypress/e2e/click-menu-scroll-top.cy.js:
--------------------------------------------------------------------------------
1 | describe('Click menu', () => {
2 | it('scroll to top when menu clicked', () => {
3 | cy.visit('/concepts/modules/');
4 | // scroll to Contributors section
5 | // note that there's no hash in url
6 | cy.get('[data-testid="contributors"]').scrollIntoView();
7 |
8 | const selector = '.sidebar-item__title[href="/concepts/modules/"]';
9 |
10 | cy.get(selector).click();
11 | cy.window().then((win) => {
12 | expect(win.scrollY).to.equal(0);
13 | });
14 | });
15 | });
16 |
--------------------------------------------------------------------------------
/src/utilities/yaml-headmatter.mjs:
--------------------------------------------------------------------------------
1 | export default function yamlHeadmatter(fields) {
2 | let ret = '---\n';
3 |
4 | Object.keys(fields).map((field) => {
5 | if (field === 'contributors') {
6 | if(fields[field].length) {
7 | ret += `${field}:\n`;
8 | fields[field].forEach((contributor) => {
9 | ret += ` - ${contributor}\n`;
10 | });
11 | }
12 | } else {
13 | ret += `${field}: ${fields[field]}\n`;
14 | }
15 | });
16 |
17 | ret = `${ret}---\n`;
18 |
19 | return ret;
20 | };
21 |
--------------------------------------------------------------------------------
/src/content/plugins/NoEmitOnErrorsPlugin.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: NoEmitOnErrorsPlugin
3 | group: webpack
4 | contributors:
5 | - jeffin
6 | - chenxsan
7 | - snitin315
8 | ---
9 |
10 | The `NoEmitOnErrorsPlugin` allows you to avoid emitting assets when there are any errors. Enabled by default, you can disable using [`optimization.emitOnErrors`](/configuration/optimization/#optimizationemitonerrors)
11 |
12 | **webpack.config.js**
13 |
14 | ```javascript
15 | module.exports = {
16 | plugins: [new webpack.NoEmitOnErrorsPlugin()],
17 | };
18 | ```
19 |
--------------------------------------------------------------------------------
/src/styles/partials/_mixins.scss:
--------------------------------------------------------------------------------
1 | @mixin break($size: medium) {
2 | @media (min-width: map-get($screens, $size)) {
3 | @content;
4 | }
5 | }
6 |
7 | @mixin control-overflow {
8 | overflow: hidden;
9 | white-space: nowrap;
10 | text-overflow: ellipsis;
11 | }
12 |
13 | @mixin fontantialias($on) {
14 | @if $on == true {
15 | -webkit-font-smoothing: antialiased;
16 | -moz-osx-font-smoothing: grayscale;
17 | } @else {
18 | -webkit-font-smoothing: subpixel-antialiased;
19 | -moz-osx-font-smoothing: auto;
20 | }
21 | }
22 |
--------------------------------------------------------------------------------
/examples/getting-started/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "getting-started-using-a-configuration",
3 | "version": "1.0.0",
4 | "private": true,
5 | "scripts": {
6 | "test": "echo \"Error: no test specified\" && exit 1",
7 | "build": "webpack",
8 | "start": "serve dist"
9 | },
10 | "keywords": [],
11 | "author": "",
12 | "license": "MIT",
13 | "dependencies": {
14 | "lodash": "^4.17.21"
15 | },
16 | "devDependencies": {
17 | "serve": "^12.0.0",
18 | "webpack": "^5.38.1",
19 | "webpack-cli": "^4.7.2"
20 | }
21 | }
22 |
--------------------------------------------------------------------------------
/.github/dependabot.yml:
--------------------------------------------------------------------------------
1 | version: 2
2 | updates:
3 | - package-ecosystem: "npm"
4 | directory: "/"
5 | open-pull-requests-limit: 10
6 | schedule:
7 | interval: "weekly"
8 | labels:
9 | - "dependencies"
10 | ignore:
11 | - dependency-name: "react"
12 | - dependency-name: "react-dom"
13 | groups:
14 | dependencies:
15 | patterns:
16 | - "*"
17 | # Maintain dependencies for GitHub Actions
18 | - package-ecosystem: "github-actions"
19 | directory: "/"
20 | schedule:
21 | interval: "weekly"
--------------------------------------------------------------------------------
/examples/module-federation/app1/src/App.js:
--------------------------------------------------------------------------------
1 | import React, {Suspense} from "react";
2 | const RemoteApp = React.lazy(() => import("app2/App"));
3 |
4 | const App = () => {
5 | return (
6 | Page Not Found
10 |Oops! The page you are looking for has been removed or relocated.
11 | 12 | Go to Homepage 13 | 14 |
7 |
16 |
18 |
)
19 | }
20 |
21 |
22 | export default App;
23 |
--------------------------------------------------------------------------------
/src/assets/icon-square-small.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/mdx-components.js:
--------------------------------------------------------------------------------
1 | import Badge from './components/Badge/Badge';
2 | import LinkComponent from './components/mdxComponents/Link';
3 | import StackBlitzPreview from './components/StackBlitzPreview/StackBlitzPreview';
4 | import CodeBlockWithCopy from './components/CodeBlockWithCopy/CodeBlockWithCopy';
5 |
6 | /** @returns {import('mdx/types.js').MDXComponents} */
7 | export function useMDXComponents() {
8 | return {
9 | a: LinkComponent,
10 | Badge: Badge,
11 | StackBlitzPreview: StackBlitzPreview,
12 | pre: CodeBlockWithCopy,
13 | };
14 | }
15 |
--------------------------------------------------------------------------------
/src/remark-plugins/remark-slug/index.test.mjs:
--------------------------------------------------------------------------------
1 | import { remark } from 'remark';
2 | import remarkHtml from 'remark-html';
3 | import Plugin from './index.mjs';
4 | describe('remark slug', () => {
5 | it('should add id', () => {
6 | remark()
7 | .use(Plugin)
8 | .use(remarkHtml)
9 | .process(
10 | `## hello world
11 |
12 | this is me.
13 | `,
14 | function (err, { value: contents }) {
15 | expect(err).toBeUndefined();
16 | expect(contents).toMatchSnapshot();
17 | }
18 | );
19 | });
20 | });
21 |
--------------------------------------------------------------------------------
/.vale/proselint/Oxymorons.yml:
--------------------------------------------------------------------------------
1 | extends: existence
2 | message: "'%s' is an oxymoron."
3 | ignorecase: true
4 | level: error
5 | tokens:
6 | - amateur expert
7 | - increasingly less
8 | - advancing backwards
9 | - alludes explicitly to
10 | - explicitly alludes to
11 | - totally obsolescent
12 | - completely obsolescent
13 | - generally always
14 | - usually always
15 | - increasingly less
16 | - build down
17 | - conspicuous absence
18 | - exact estimate
19 | - found missing
20 | - intense apathy
21 | - mandatory choice
22 | - organized mess
23 |
--------------------------------------------------------------------------------
/src/assets/icon-square-big.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/styles/icons/loading.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/content/plugins/min-chunk-size-plugin.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: MinChunkSizePlugin
3 | group: webpack
4 | contributors:
5 | - byzyk
6 | - erykpiast
7 | ---
8 |
9 | Keep chunk size above the specified limit by merging chunks that are smaller than the `minChunkSize`.
10 |
11 | ```js
12 | new webpack.optimize.MinChunkSizePlugin({
13 | minChunkSize: 10000, // Minimum number of characters
14 | });
15 | ```
16 |
17 | ## Usage via CLI
18 |
19 | This plugin and it's options can also be invoked via the [CLI](/api/cli/):
20 |
21 | ```bash
22 | webpack --optimize-min-chunk-size 10000
23 | ```
24 |
--------------------------------------------------------------------------------
/.vale/proselint/RASSyndrome.yml:
--------------------------------------------------------------------------------
1 | extends: existence
2 | message: "'%s' is redundant."
3 | level: error
4 | action:
5 | name: edit
6 | params:
7 | - split
8 | - ' '
9 | - '0'
10 | tokens:
11 | - ABM missile
12 | - ACT test
13 | - ABM missiles
14 | - ABS braking system
15 | - ATM machine
16 | - CD disc
17 | - CPI Index
18 | - GPS system
19 | - GUI interface
20 | - HIV virus
21 | - ISBN number
22 | - LCD display
23 | - PDF format
24 | - PIN number
25 | - RAS syndrome
26 | - RIP in peace
27 | - please RSVP
28 | - SALT talks
29 | - SAT test
30 | - UPC codes
31 |
--------------------------------------------------------------------------------
/src/content/plugins/prefetch-plugin.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: PrefetchPlugin
3 | group: webpack
4 | contributors:
5 | - skipjack
6 | - byzyk
7 | ---
8 |
9 | Prefetch normal module requests, causing them to be resolved and built before the first `import` or `require` of that module occurs. Using this plugin can boost performance. Try to profile the build first to determine clever prefetching points.
10 |
11 | ```javascript
12 | new webpack.PrefetchPlugin([context], request);
13 | ```
14 |
15 | ## Options
16 |
17 | - `context`: An absolute path to a directory
18 | - `request`: A request string for a normal module
19 |
--------------------------------------------------------------------------------
/src/components/Site/Site.scss:
--------------------------------------------------------------------------------
1 | .site {
2 | display: flex;
3 | flex-direction: column;
4 | min-height: 100vh;
5 | background: #ffffff;
6 |
7 | &__header {
8 | z-index: 100;
9 | position: fixed;
10 | width: 100%;
11 | }
12 |
13 | &__content {
14 | flex: 1 1 auto;
15 | position: relative;
16 | display: flex;
17 | margin-top: 110px;
18 |
19 | @media print {
20 | margin-top: 0px;
21 | }
22 | }
23 |
24 | &__sidebar {
25 | flex: 0 0 280px;
26 | }
27 | }
28 |
29 | @media print {
30 | header,
31 | nav,
32 | footer {
33 | display: none;
34 | }
35 | }
36 |
--------------------------------------------------------------------------------
/.vale/proselint/meta.json:
--------------------------------------------------------------------------------
1 | {
2 | "author": "jdkato",
3 | "description": "A Vale-compatible implementation of the proselint linter.",
4 | "email": "support@errata.ai",
5 | "lang": "en",
6 | "url": "https://github.com/errata-ai/proselint/releases/latest/download/proselint.zip",
7 | "feed": "https://github.com/errata-ai/proselint/releases.atom",
8 | "issues": "https://github.com/errata-ai/proselint/issues/new",
9 | "license": "BSD-3-Clause",
10 | "name": "proselint",
11 | "sources": ["https://github.com/amperser/proselint"],
12 | "vale_version": ">=1.0.0",
13 | "coverage": 0.0,
14 | "version": "0.1.0"
15 | }
16 |
--------------------------------------------------------------------------------
/src/content/plugins/context-exclusion-plugin.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: ContextExclusionPlugin
3 | group: webpack
4 | contributors:
5 | - jeffin
6 | ---
7 |
8 | _Context_ refers to a [require with an expression](/guides/dependency-management/#require-with-expression) such as `require('./locale/' + name + '.json')`.
9 |
10 | The `ContextExclusionPlugin` allows you to exclude context. Provide RegExp as an argument when initializing the Plugin to exclude all context that matches it.
11 |
12 | **webpack.config.js**
13 |
14 | ```javascript
15 | module.exports = {
16 | plugins: [new webpack.ContextExclusionPlugin(/dont/)],
17 | };
18 | ```
19 |
--------------------------------------------------------------------------------
/examples/module-federation/app2/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "app2",
3 | "version": "1.0.0",
4 | "main": "index.js",
5 | "license": "MIT",
6 | "scripts": {
7 | "start": "webpack serve",
8 | "build": "webpack --mode production"
9 | },
10 | "dependencies": {
11 | "react": "^17.0.2",
12 | "react-dom": "^17.0.2"
13 | },
14 | "devDependencies": {
15 | "@babel/core": "^7.14.3",
16 | "@babel/preset-react": "^7.13.13",
17 | "babel-loader": "^8.2.2",
18 | "html-webpack-plugin": "^5.3.1",
19 | "webpack": "^5.38.1",
20 | "webpack-cli": "^4.7.2",
21 | "webpack-dev-server": "^4.0.0"
22 | }
23 | }
24 |
--------------------------------------------------------------------------------
/cypress/support/commands.js:
--------------------------------------------------------------------------------
1 | Cypress.Commands.add('isNotInViewport', (element) => {
2 | cy.get(element).then(($el) => {
3 | // we won't have horizontal scollbar
4 | const rect = $el[0].getBoundingClientRect();
5 | if (rect.top < 0) {
6 | expect(rect.bottom).to.be.lessThan(0);
7 | } else {
8 | expect(rect.top).to.be.at.least(0);
9 | }
10 | });
11 | });
12 |
13 | Cypress.Commands.add('isInViewport', (element) => {
14 | cy.get(element).then(($el) => {
15 | const rect = $el[0].getBoundingClientRect();
16 |
17 | expect(rect.top).to.be.at.least(0);
18 | expect(rect.left).to.be.at.least(0);
19 | });
20 | });
21 |
--------------------------------------------------------------------------------
/src/assets/by.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/components/Link/Link.jsx:
--------------------------------------------------------------------------------
1 | import { Link as ReactRouterLink } from 'react-router-dom';
2 | import PropTypes from 'prop-types';
3 |
4 | const Link = ({ to = '', url, ...props }) => {
5 | if (url) to = url;
6 |
7 | // eslint-disable-next-line
8 | const { isActive, ...others } = props;
9 | if (to.startsWith('http') || to.startsWith('//')) {
10 | return (
11 |
12 | );
13 | } else {
14 | return
13 |
15 |