diff --git a/.github/CODE_OF_CONDUCT.md b/.github/CODE_OF_CONDUCT.md deleted file mode 100644 index 70840a86abdd..000000000000 --- a/.github/CODE_OF_CONDUCT.md +++ /dev/null @@ -1,8 +0,0 @@ -## Code of Conduct - -At webpack and all webpack/webpack-contrib repositories we follow the -[JSFoundation Code of Conduct][1]. Please adhere to the guidelines there and -feel free to report any violation of them to the @webpack/core-team, -@webpack/documentation-team, or . - -[1]: https://github.com/openjs-foundation/code-and-learn/blob/master/CODE_OF_CONDUCT.md diff --git a/.github/CONTRIBUTING.md b/.github/CONTRIBUTING.md index 621c05136696..d4ab933ab3d6 100644 --- a/.github/CONTRIBUTING.md +++ b/.github/CONTRIBUTING.md @@ -13,12 +13,21 @@ Start by ensuring that you have Node.js installed and forking the repository: - Fork the **webpack.js.org** repo from [the main repository][2]. - `git clone && cd webpack.js.org` +> To run the project, you must run scripts that download the website content from GitHub. +> To avoid hitting rate limits, you'll need to use your GitHub token. +> The build scripts (`fetch-repo` and `fetch:*` commands) use this token to retrieve repository data, +> including documentation, examples, and contributors. +> If you do not have one, you can create it on the [GitHub Personal Access Tokens page](https://github.com/settings/personal-access-tokens). + Once you are in the project directory, run the following commands: - `yarn` to pull all dependencies. +- `GITHUB_TOKEN= yarn fetch-all` - Fetches all updated website content from GitHub. - `yarn build` to create a production version of the site. - `yarn start` to develop on a local webpack-dev-server: [localhost:3000][3]. +**Note:** The `fetch` and `fetch-repos` commands must be run before building the site as they populate necessary data for the build process. + > NOTE: run `yarn fetch-repos` and then `yarn fetch` before running `yarn start` command for the first time - `yarn fetch` to retrieve external documentation/data. diff --git a/.github/FUNDING.yml b/.github/FUNDING.yml deleted file mode 100644 index 1152177bf468..000000000000 --- a/.github/FUNDING.yml +++ /dev/null @@ -1,2 +0,0 @@ -open_collective: webpack - diff --git a/.github/ISSUE_TEMPLATE.md b/.github/ISSUE_TEMPLATE.md deleted file mode 100644 index b489f0e6e61f..000000000000 --- a/.github/ISSUE_TEMPLATE.md +++ /dev/null @@ -1,7 +0,0 @@ -- [ ] Check the current issues to ensure you aren't creating a duplicate. -- [ ] Consider making small typo fixes and such directly as pull requests. -- [ ] For the voting application, go to https://github.com/webpack-contrib/voting-app. -- [ ] For the document of Chinese translation（中文版文档), go to https://github.com/docschina/webpack.js.org. -- [ ] For loader/plugin docs, consider opening an issue in the corresponding repository. -- [ ] No existing issue? Go ahead and open a new one. -- **Remove these instructions from your PR as they are for your eyes only.** diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md deleted file mode 100644 index fb181665c983..000000000000 --- a/.github/PULL_REQUEST_TEMPLATE.md +++ /dev/null @@ -1,11 +0,0 @@ -_describe your changes..._ - -- [ ] Read and sign the [CLA][1]. PRs that haven't signed it won't be accepted. -- [ ] Make sure your PR complies with the [writer's guide][2]. -- [ ] Review the diff carefully as sometimes this can reveal issues. -- [ ] Do not abandon your Pull Request: [Stale Pull Requests][3]. -- **Remove these instructions from your PR as they are for your eyes only.** - -[1]: https://github.com/openjs-foundation/EasyCLA#openjs-foundation-cla -[2]: https://webpack.js.org/contribute/writers-guide/ -[3]: https://webpack.js.org/contribute/#pull-requests diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml index 32cd1792d0c6..520d7e071c80 100644 --- a/.github/workflows/deploy.yml +++ b/.github/workflows/deploy.yml @@ -18,7 +18,7 @@ jobs: - uses: actions/checkout@v5 - name: Use Node.js ${{ matrix.node-version }} - uses: actions/setup-node@v5 + uses: actions/setup-node@v6 with: node-version: ${{ matrix.node-version }} cache: yarn diff --git a/.github/workflows/testing.yml b/.github/workflows/testing.yml index 584c74669453..c1f1b901feb0 100644 --- a/.github/workflows/testing.yml +++ b/.github/workflows/testing.yml @@ -19,7 +19,7 @@ jobs: - uses: actions/checkout@v5 - name: Use Node.js ${{ matrix.node-version }} - uses: actions/setup-node@v5 + uses: actions/setup-node@v6 with: node-version: ${{ matrix.node-version }} cache: yarn @@ -38,7 +38,7 @@ jobs: - uses: actions/checkout@v5 - name: Use Node.js ${{ matrix.node-version }} - uses: actions/setup-node@v5 + uses: actions/setup-node@v6 with: node-version: ${{ matrix.node-version }} cache: yarn @@ -58,7 +58,7 @@ jobs: - uses: actions/checkout@v5 - name: Use Node.js ${{ matrix.node-version }} - uses: actions/setup-node@v5 + uses: actions/setup-node@v6 with: node-version: ${{ matrix.node-version }} cache: yarn @@ -84,7 +84,7 @@ jobs: - uses: actions/checkout@v5 - name: Use Node.js ${{ matrix.node-version }} - uses: actions/setup-node@v5 + uses: actions/setup-node@v6 with: node-version: ${{ matrix.node-version }} cache: yarn diff --git a/package.json b/package.json index 0638f85a813c..8a191d76f306 100644 --- a/package.json +++ b/package.json @@ -35,8 +35,10 @@ "fetch": "run-p fetch:*", "fetch:readmes": "node src/utilities/fetch-package-readmes.mjs", "fetch:supporters": "node src/utilities/fetch-supporters.mjs", + "fetch:governance": "node src/utilities/fetch-governance.mjs", + "fetch-all": "run-s fetch-repos fetch", "prebuild": "npm run clean", - "build": "run-s fetch-repos fetch content && webpack --config webpack.prod.mjs --config-node-env production && run-s printable content && webpack --config webpack.ssg.mjs --config-node-env production --env ssg", + "build": "run-s fetch-repos fetch:governance fetch content && webpack --config webpack.prod.mjs --config-node-env production && run-s printable content && webpack --config webpack.ssg.mjs --config-node-env production --env ssg", "postbuild": "npm run sitemap", "build-test": "npm run build && http-server --port 4200 dist/", "serve-dist": "http-server --port 4200 dist/", @@ -47,7 +49,7 @@ "lint:markdown": "npm run lint-markdown '**/*.{md,mdx}'", "lint-markdown": "markdownlint --config ./.markdownlint.json", "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 --skip /vendor > 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 /contribute/Governance --skip https:// --skip http:// --skip sw.js --skip /vendor > 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", diff --git a/src/content/api/cli.mdx b/src/content/api/cli.mdx index 6752d56978fa..1e8f6e899cec 100644 --- a/src/content/api/cli.mdx +++ b/src/content/api/cli.mdx @@ -578,7 +578,7 @@ npx webpack --json npx webpack --json stats.json ``` -In every other case, webpack prints out a set of stats showing bundle, chunk and timing details. Using this option, the output can be a JSON object. This response is accepted by webpack's [analyse tool](https://webpack.github.io/analyse/), or chrisbateman's [webpack-visualizer](https://chrisbateman.github.io/webpack-visualizer/), or th0r's [webpack-bundle-analyzer](https://github.com/webpack-contrib/webpack-bundle-analyzer). The analyse tool will take in the JSON and provide all the details of the build in graphical form. +In every other case, webpack prints out a set of stats showing bundle, chunk and timing details. Using this option, the output can be a JSON object. This response is accepted by webpack's [analyse tool](https://webpack.github.io/analyse/), or chrisbateman's [webpack-visualizer](https://chrisbateman.github.io/webpack-visualizer/), or th0r's [webpack-bundle-analyzer](https://github.com/webpack/webpack-bundle-analyzer). The analyse tool will take in the JSON and provide all the details of the build in graphical form. T> See the [stats data api](/api/stats) to read more about the stats generated here. diff --git a/src/content/api/loaders.mdx b/src/content/api/loaders.mdx index 1739ce5cae50..4c9a2620a260 100644 --- a/src/content/api/loaders.mdx +++ b/src/content/api/loaders.mdx @@ -224,7 +224,7 @@ addDependency(file: string) dependency(file: string) // shortcut ``` -Add an existing file as a dependency of the loader result in order to make them watchable. For example, [`sass-loader`](https://github.com/webpack-contrib/sass-loader), [`less-loader`](https://github.com/webpack-contrib/less-loader) uses this to recompile whenever any imported `css` file changes. +Add an existing file as a dependency of the loader result in order to make them watchable. For example, [`sass-loader`](https://github.com/webpack/sass-loader), [`less-loader`](https://github.com/webpack/less-loader) uses this to recompile whenever any imported `css` file changes. ### this.addMissingDependency diff --git a/src/content/api/module-methods.mdx b/src/content/api/module-methods.mdx index c2c095404efb..fd27ca8140b2 100644 --- a/src/content/api/module-methods.mdx +++ b/src/content/api/module-methods.mdx @@ -14,6 +14,7 @@ contributors: - jamesgeorge007 - WofWca - snitin315 + - adriancuadrado related: - title: CommonJS Wikipedia url: https://en.wikipedia.org/wiki/CommonJS @@ -97,7 +98,8 @@ W> This feature relies on [`Promise`](https://developer.mozilla.org/en-US/docs/W It is not possible to use a fully dynamic import statement, such as `import(foo)`. Because `foo` could potentially be any path to any file in your system or project. -The `import()` must contain at least some information about where the module is located. Bundling can be limited to a specific directory or set of files so that when you are using a dynamic expression - every module that could potentially be requested on an `import()` call is included. For example, ``import(`./locale/${language}.json`)`` will cause every `.json` file in the `./locale` directory to be bundled into the new chunk. At run time, when the variable `language` has been computed, any file like `english.json` or `german.json` will be available for consumption. +The `import()` must contain at least some information about where the module is located. Bundling can be limited to a specific directory or set of files so that when you are using a dynamic expression - every module that could potentially be requested on an `import()` call is included. +For example, ``import(`./locale/${language}.json`)`` will only bundle all `.json` files in the `./locale` directory and subdirectories into the new chunk and exclude files with other file extensions. At run time, when the variable `language` has been computed, any file like `english.json` or `german.json` will be available for consumption. ```javascript // imagine we had a method to get language from cookies or other storage @@ -111,7 +113,7 @@ T> Using the [`webpackInclude` and `webpackExclude`](/api/module-methods/#magic- #### Magic Comments -Inline comments to make features work. By adding comments to the import, we can do things such as name our chunk or select different modes. For a full list of these magic comments see the code below followed by an explanation of what these comments do. +By adding comments to the import, we can do things such as name our chunk or select different modes. For a full list of these magic comments see the code below followed by an explanation of what these comments do. ```js // Single target @@ -137,6 +139,8 @@ import( import(/* webpackIgnore: true */ 'ignored-module.js'); ``` +T> Single line comments (`//`) are also supported. JSDoc comments (`/** */`) are not. + ##### webpackIgnore **JavaScript Usage** diff --git a/src/content/api/normalmodulefactory-hooks.mdx b/src/content/api/normalmodulefactory-hooks.mdx index 39c33fb3a7ba..18617f126760 100644 --- a/src/content/api/normalmodulefactory-hooks.mdx +++ b/src/content/api/normalmodulefactory-hooks.mdx @@ -152,3 +152,4 @@ Possible default identifiers: 5. `asset/source` 6. `asset/resource` 7. `asset/inline` +8. `asset/bytes` diff --git a/src/content/api/plugins.mdx b/src/content/api/plugins.mdx index da1e06c75482..069dc469d14f 100644 --- a/src/content/api/plugins.mdx +++ b/src/content/api/plugins.mdx @@ -10,6 +10,7 @@ contributors: - EugeneHlushko - wizardofhogwarts - snitin315 + - evenstensberg --- Plugins are a key piece of the webpack ecosystem and provide the community with diff --git a/src/content/awesome-webpack.mdx b/src/content/awesome-webpack.mdx index 6815d5774cf4..81cc0161b62f 100644 --- a/src/content/awesome-webpack.mdx +++ b/src/content/awesome-webpack.mdx @@ -71,11 +71,11 @@ _People passionate about Webpack (In no particular order)_ #### 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) +- [PostCSS Loader](https://github.com/webpack/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) +- [SASS Loader](https://github.com/webpack/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) +- [Stylus Loader](https://github.com/webpack/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) @@ -95,7 +95,6 @@ _People passionate about Webpack (In no particular order)_ - [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) @@ -129,11 +128,11 @@ _People passionate about Webpack (In no particular order)_ - [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) +- [Copy Webpack Plugin](https://github.com/webpack/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) +- [Bundle Analyzer](https://github.com/webpack/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) @@ -154,14 +153,14 @@ _People passionate about Webpack (In no particular order)_ - [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): +- [Mini css extract plugin](https://github.com/webpack/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) +- [Stylelint Webpack Plugin](https://github.com/webpack/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) diff --git a/src/content/concepts/hot-module-replacement.mdx b/src/content/concepts/hot-module-replacement.mdx index d596e48d081a..8c99a66a4063 100644 --- a/src/content/concepts/hot-module-replacement.mdx +++ b/src/content/concepts/hot-module-replacement.mdx @@ -44,7 +44,7 @@ The compiler ensures that module IDs and chunk IDs are consistent between these ### In a Module -HMR is an opt-in feature that only affects modules containing HMR code. One example would be patching styling through the [`style-loader`](https://github.com/webpack-contrib/style-loader). In order for patching to work, the `style-loader` implements the HMR interface; when it receives an update through HMR, it replaces the old styles with the new ones. +HMR is an opt-in feature that only affects modules containing HMR code. One example would be patching styling through the [`style-loader`](https://github.com/webpack/style-loader). In order for patching to work, the `style-loader` implements the HMR interface; when it receives an update through HMR, it replaces the old styles with the new ones. Similarly, when implementing the HMR interface in a module, you can describe what should happen when the module is updated. However, in most cases, it's not mandatory to write HMR code in every module. If a module has no HMR handlers, the update bubbles up. This means that a single handler can update a complete module tree. If a single module from the tree is updated, the entire set of dependencies is reloaded. diff --git a/src/content/configuration/devtool.mdx b/src/content/configuration/devtool.mdx index ae3a4866392c..6dc63c43daa9 100644 --- a/src/content/configuration/devtool.mdx +++ b/src/content/configuration/devtool.mdx @@ -18,8 +18,7 @@ related: --- This option controls if and how source maps are generated. - -Use the [`SourceMapDevToolPlugin`](/plugins/source-map-dev-tool-plugin) for a more fine grained configuration. See the [`source-map-loader`](/loaders/source-map-loader) to deal with existing source maps. +Use the [`SourceMapDevToolPlugin`](/plugins/source-map-dev-tool-plugin) for a more fine grained configuration. See the [`Rule.extractSourceMap`](/configuration/module/#ruleextractsourcemap) to deal with existing source maps. ## devtool diff --git a/src/content/configuration/experiments.mdx b/src/content/configuration/experiments.mdx index a76407919858..dca8613267cc 100644 --- a/src/content/configuration/experiments.mdx +++ b/src/content/configuration/experiments.mdx @@ -27,11 +27,11 @@ Available options: - [`css`](#experimentscss) - [`deferImport`](#experimentsdeferimport) - [`futureDefaults`](#experimentsfuturedefaults) -- `layers`: Enable module and chunk layers. - [`lazyCompilation`](#experimentslazycompilation) - [`outputModule`](#experimentsoutputmodule) - `syncWebAssembly`: Support the old WebAssembly like in webpack 4. -- [`topLevelAwait`](#experimentstoplevelawait) +- `layers`: Enable module and chunk layers, removed and works without additional options since `5.102.0`. +- `topLevelAwait`: Transforms a module into an `async` module when an `await` is used at the top level. Starting from webpack version `5.83.0` (however, in versions prior to that, you can enable it by setting `experiments.topLevelAwait` to `true`), this feature is enabled by default, removed and works without additional options since `5.102.0`. **webpack.config.js** @@ -41,7 +41,6 @@ module.exports = { experiments: { asyncWebAssembly: true, buildHttp: true, - layers: true, lazyCompilation: true, outputModule: true, syncWebAssembly: true, @@ -368,17 +367,3 @@ module.exports = { }, }; ``` - -### experiments.topLevelAwait - -`boolean = true` - -The `topLevelAwait` option transforms a module into an `async` module when an `await` is used at the top level. Starting from webpack version `5.83.0`, this feature is enabled by default. However, in versions prior to that, you can enable it by setting `experiments.topLevelAwait` to `true`. - -```js -module.exports = { - experiments: { - topLevelAwait: true, - }, -}; -``` diff --git a/src/content/configuration/module.mdx b/src/content/configuration/module.mdx index 17b89833d1e8..70b69b0d6f78 100644 --- a/src/content/configuration/module.mdx +++ b/src/content/configuration/module.mdx @@ -141,6 +141,9 @@ module.exports = { // type: string | ((pathData: PathData, assetInfo?: AssetInfo) => string) outputPath: 'cdn-assets/', }, + 'asset/bytes': { + // No generator options are supported for this module type yet + } javascript: { // No generator options are supported for this module type yet }, @@ -249,6 +252,9 @@ module.exports = { 'asset/source': { // ditto }, + 'asset/bytes': { + // ditto + }, javascript: { // Parser options for javascript modules // e.g, enable parsing of require.ensure syntax @@ -1019,6 +1025,28 @@ module.exports = { }; ``` +## Rule.extractSourceMap + +`boolean = false` + +Extracts existing source map data from files (from their `//# sourceMappingURL` comment), useful for preserving the source maps of third-party libraries. + +**webpack.config.js** + +```js +module.exports = { + // ... + module: { + rules: [ + { + test: /\.m?js$/, + extractSourceMap: true, + }, + ], + }, +}; +``` + ## Rule.loader `Rule.loader` is a shortcut to `Rule.use: [ { loader } ]`. See [`Rule.use`](#ruleuse) and [`UseEntry.loader`](#useentry) for details. @@ -1280,11 +1308,11 @@ module.exports = { module: { rules: [ { - test: /\.png/, + test: /\.png$/, type: 'asset/resource', }, { - test: /\.html/, + test: /\.html$/, type: 'asset/resource', generator: { filename: 'static/[hash][ext]', @@ -1444,7 +1472,7 @@ Include all modules that pass test assertion. If you supply a `Rule.test` option `string` -Possible values: `'javascript/auto' | 'javascript/dynamic' | 'javascript/esm' | 'json' | 'webassembly/sync' | 'webassembly/async' | 'asset' | 'asset/source' | 'asset/resource' | 'asset/inline' | 'css/auto'` +Possible values: `'javascript/auto' | 'javascript/dynamic' | 'javascript/esm' | 'json' | 'webassembly/sync' | 'webassembly/async' | 'asset' | 'asset/source' | 'asset/resource' | 'asset/inline' | 'asset/bytes' | 'css' | 'css/auto' | 'css/module' | 'css/global'` `Rule.type` sets the type for a matching module. This prevents defaultRules and their default importing behaviors from occurring. For example, if you want to load a `.json` file through a custom loader, you'd need to set the `type` to `javascript/auto` to bypass webpack's built-in json importing. diff --git a/src/content/configuration/optimization.mdx b/src/content/configuration/optimization.mdx index 6218865980c2..7256d4eb759b 100644 --- a/src/content/configuration/optimization.mdx +++ b/src/content/configuration/optimization.mdx @@ -281,7 +281,7 @@ module.exports = { new TerserPlugin({ parallel: true, terserOptions: { - // https://github.com/webpack-contrib/terser-webpack-plugin#terseroptions + // https://github.com/webpack/terser-webpack-plugin#terseroptions }, }), ], diff --git a/src/content/configuration/other-options.mdx b/src/content/configuration/other-options.mdx index 05b496f50b2e..b1104e634f3b 100644 --- a/src/content/configuration/other-options.mdx +++ b/src/content/configuration/other-options.mdx @@ -260,6 +260,10 @@ module.exports = { module: { timestamp: true, }, + contextModule: { + hash: true, + timestamp: true, + }, resolve: { timestamp: true, }, @@ -337,6 +341,16 @@ Snapshots for building modules. - `hash`: Compare content hashes to determine invalidation (more expensive than `timestamp`, but changes less often). - `timestamp`: Compare timestamps to determine invalidation. +### contextModule + +`object = {hash boolean = true, timestamp boolean = true}` + +Snapshots for building context modules. + +- `hash`: Compare content hashes to determine invalidation (more expensive than `timestamp`, but changes less often). +- `timestamp`: Compare timestamps to determine invalidation. + + ### resolve `object = {hash boolean = true, timestamp boolean = true}` diff --git a/src/content/contribute/writing-a-loader.mdx b/src/content/contribute/writing-a-loader.mdx index 5f1c3efc444b..e7286112a96e 100644 --- a/src/content/contribute/writing-a-loader.mdx +++ b/src/content/contribute/writing-a-loader.mdx @@ -9,6 +9,7 @@ contributors: - jamesgeorge007 - chenxsan - dev-itsheng + - evenstensberg --- A loader is a node module that exports a function. This function is called when a resource should be transformed by this loader. The given function will have access to the [Loader API](/api/loaders/) using the `this` context provided to it. @@ -138,7 +139,7 @@ Make sure the loader does not retain state between module transformations. Each ### Loader Utilities -Take advantage of the [`loader-utils`](https://github.com/webpack/loader-utils) package which provides a variety of useful tools. Along with `loader-utils`, the [`schema-utils`](https://github.com/webpack-contrib/schema-utils) package should be used for consistent JSON Schema based validation of loader options. Here's a brief example that utilizes both: +Take advantage of the [`loader-utils`](https://github.com/webpack/loader-utils) package which provides a variety of useful tools. Along with `loader-utils`, the [`schema-utils`](https://github.com/webpack/schema-utils) package should be used for consistent JSON Schema based validation of loader options. Here's a brief example that utilizes both: **loader.js** @@ -273,7 +274,7 @@ JSON.stringify( If the loader you're working on is a simple wrapper around another package, then you should include the package as a `peerDependency`. This approach allows the application's developer to specify the exact version in the `package.json` if desired. -For instance, the `sass-loader` [specifies `node-sass`](https://github.com/webpack-contrib/sass-loader/blob/master/package.json) as peer dependency like so: +For instance, the `sass-loader` [specifies `node-sass`](https://github.com/webpack/sass-loader/blob/main/package.json) as peer dependency like so: ```json { diff --git a/src/content/guides/asset-modules.mdx b/src/content/guides/asset-modules.mdx index 3d3206c57d2c..6af7c775666f 100644 --- a/src/content/guides/asset-modules.mdx +++ b/src/content/guides/asset-modules.mdx @@ -8,6 +8,7 @@ contributors: - anshumanv - spence-s - dkdk225 + - alexander-akait related: - title: webpack 5 - Asset Modules url: https://dev.to/smelukov/webpack-5-asset-modules-2o3h @@ -21,11 +22,12 @@ Prior to webpack 5 it was common to use: - [`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 types replace all of these loaders by adding 4 new module types: +Asset Modules types replace all of these loaders by adding 5 new module types: - `asset/resource` emits a separate file and exports the URL. Previously achievable by using `file-loader`. - `asset/inline` exports a data URI of the asset. Previously achievable by using `url-loader`. - `asset/source` exports the source code of the asset. Previously achievable by using `raw-loader`. +- `asset/bytes` exports a [`Uint8Array`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Uint8Array) view of the asset. - `asset` automatically chooses between exporting a data URI and emitting a separate file. Previously achievable by using `url-loader` with asset size limit. When using the old assets loaders (i.e. `file-loader`/`url-loader`/`raw-loader`) along with Asset Modules in webpack 5, you might want to stop Asset Modules from processing your assets again as that would result in asset duplication. This can be done by setting the asset's module type to `'javascript/auto'`. @@ -104,7 +106,7 @@ Alternatively, you can do the following in your `App.js` without modifying your import './publicPath.js'; ``` -## Resource assets +## Resource type **webpack.config.js** @@ -121,9 +123,9 @@ module.exports = { + rules: [ + { + test: /\.png/, -+ type: 'asset/resource' -+ } -+ ] ++ type: 'asset/resource', ++ }, ++ ], + }, }; ``` @@ -154,15 +156,15 @@ module.exports = { output: { filename: 'main.js', path: path.resolve(__dirname, 'dist'), -+ assetModuleFilename: 'images/[hash][ext][query]' ++ assetModuleFilename: 'images/[hash][ext][query]', }, module: { rules: [ { test: /\.png/, - type: 'asset/resource' - } - ] + type: 'asset/resource', + }, + ], }, }; ``` @@ -177,23 +179,18 @@ module.exports = { output: { filename: 'main.js', path: path.resolve(__dirname, 'dist'), -+ assetModuleFilename: 'images/[hash][ext][query]' ++ assetModuleFilename: 'images/[hash][ext][query]', }, module: { rules: [ - { - test: /\.png/, - type: 'asset/resource' -- } -+ }, + { + test: /\.html/, + type: 'asset/resource', + generator: { -+ filename: 'static/[hash][ext][query]' -+ } -+ } - ] ++ filename: 'static/[hash][ext][query]', ++ }, ++ }, + ], }, }; ``` @@ -206,7 +203,7 @@ With this configuration all the `html` files will be emitted into a `static` dir **webpack.config.js** -```diff +```js const path = require('path'); module.exports = { @@ -214,37 +211,24 @@ module.exports = { output: { filename: 'main.js', path: path.resolve(__dirname, 'dist'), -- assetModuleFilename: 'images/[hash][ext][query]' }, module: { rules: [ - { -- test: /\.png/, -- type: 'asset/resource' ++ { + test: /\.svg/, -+ type: 'asset/inline' -- }, -+ } -- { -- test: /\.html/, -- type: 'asset/resource', -- generator: { -- filename: 'static/[hash][ext][query]' -- } -- } - ] - } ++ type: 'asset/inline', ++ }, + ], + }, }; ``` **src/index.js** -```diff -- import mainImage from './images/main.png'; -+ import metroMap from './images/metro.svg'; +```js +import metroMap from './images/metro.svg'; -- img.src = mainImage; // '/dist/151cfcfa1bd74779aadb.png' -+ block.style.background = `url(https://github.com/$%7BmetroMap%7D)`; // url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDo...vc3ZnPgo=) +block.style.background = `url(https://github.com/$%7BmetroMap%7D)`; // url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDo...vc3ZnPgo=) ``` All `.svg` files will be injected into the bundles as data URI. @@ -276,49 +260,42 @@ module.exports = { + dataUrl: content => { + content = content.toString(); + return svgToMiniDataURI(content); -+ } -+ } - } - ] ++ }, ++ }, + }, + ], }, }; ``` Now all `.svg` files will be encoded by `mini-svg-data-uri` package. -## Source assets +## Source type **webpack.config.js** ```diff const path = require('path'); -- const svgToMiniDataURI = require('mini-svg-data-uri'); module.exports = { entry: './src/index.js', output: { filename: 'main.js', - path: path.resolve(__dirname, 'dist') + path: path.resolve(__dirname, 'dist'), }, module: { rules: [ - { -- test: /\.svg/, -- type: 'asset/inline', -- generator: { -- dataUrl: content => { -- content = content.toString(); -- return svgToMiniDataURI(content); -- } -- } ++ { + test: /\.txt/, + type: 'asset/source', - } - ] ++ }, + ], }, }; ``` +T> You don't need to add rules when using `import text from './file.txt' with { type: "text" };` syntax. + **src/example.txt** ```text @@ -327,12 +304,20 @@ Hello world **src/index.js** -```diff -- import metroMap from './images/metro.svg'; -+ import exampleText from './example.txt'; +```js +import exampleText from './example.txt'; + +block.textContent = exampleText; // 'Hello world'; +``` + +Alternative usage: + +**src/index.js** -- block.style.background = `url(https://github.com/$%7BmetroMap%7D); // url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDo...vc3ZnPgo=) -+ block.textContent = exampleText; // 'Hello world' +```js +import exampleText from './example.txt' with { type: 'text' }; + +block.textContent = exampleText; // 'Hello world'; ``` All `.txt` files will be injected into the bundles as is. @@ -341,6 +326,8 @@ All `.txt` files will be injected into the bundles as is. When using `new URL('./path/to/asset', import.meta.url)`, webpack creates an asset module too. +T> You don't need to add rules when using `const file = new URL('./file.ext', import.meta.url);` syntax. + **src/index.js** ```js @@ -377,7 +364,7 @@ console.log(url.protocol === 'data:'); console.log(url.pathname === ','); ``` -## General asset type +## Asset type **webpack.config.js** @@ -392,11 +379,11 @@ module.exports = { }, module: { rules: [ - { ++ { + test: /\.txt/, + type: 'asset', - } - ] ++ }, + ], }, }; ``` @@ -414,7 +401,7 @@ module.exports = { entry: './src/index.js', output: { filename: 'main.js', - path: path.resolve(__dirname, 'dist') + path: path.resolve(__dirname, 'dist'), }, module: { rules: [ @@ -423,17 +410,75 @@ module.exports = { type: 'asset', + parser: { + dataUrlCondition: { -+ maxSize: 4 * 1024 // 4kb -+ } -+ } - } - ] ++ maxSize: 4 * 1024, // 4kb ++ }, ++ }, + }, + ], }, }; ``` Also you can [specify a function](/configuration/module/#ruleparserdataurlcondition) to decide to inlining a module or not. +## Bytes type + +**webpack.config.js** + +```diff +const path = require('path'); + +module.exports = { + entry: './src/index.js', + output: { + filename: 'main.js', + path: path.resolve(__dirname, 'dist'), + }, + module: { + rules: [ ++ { ++ test: /\.txt/, ++ type: 'asset/bytes', ++ }, + ], + }, +}; +``` + +T> You don't need to add rules when using `import data from './file.ext' with { type: "bytes" };` syntax. + +**src/example.txt** + +```text +Hello world +``` + +**src/index.js** + +```js +import exampleText from './example.txt'; + +const decoder = new TextDecoder('utf-8'); +const textString = decoder.decode(exampleText); // 'Uint8Array' + +block.textContent = exampleText; // 'Hello world'; +``` + +Alternative usage: + +**src/index.js** + +```js +import exampleText from './example.txt' with { type: 'bytes' }; + +const decoder = new TextDecoder('utf-8'); +const textString = decoder.decode(exampleText); // 'Uint8Array' + +block.textContent = exampleText; // 'Hello world'; +``` + +All `.txt` files will be injected into the bundles as is. + ## Replacing Inline Loader Syntax Before Asset Modules and Webpack 5, it was possible to use [inline syntax](https://webpack.js.org/concepts/loaders/#inline) with the legacy loaders mentioned above. diff --git a/src/content/guides/code-splitting.mdx b/src/content/guides/code-splitting.mdx index 7cbefa6a3ddb..0eff013ab4a9 100644 --- a/src/content/guides/code-splitting.mdx +++ b/src/content/guides/code-splitting.mdx @@ -458,7 +458,7 @@ Once you start splitting your code, it can be useful to analyze the output to ch - [webpack-chart](https://alexkuz.github.io/webpack-chart/): Interactive pie chart for webpack stats. - [webpack-visualizer](https://chrisbateman.github.io/webpack-visualizer/): Visualize and analyze your bundles to see which modules are taking up space and which might be duplicates. -- [webpack-bundle-analyzer](https://github.com/webpack-contrib/webpack-bundle-analyzer): A plugin and CLI utility that represents bundle content as a convenient interactive zoomable treemap. +- [webpack-bundle-analyzer](https://github.com/webpack/webpack-bundle-analyzer): A plugin and CLI utility that represents bundle content as a convenient interactive zoomable treemap. - [webpack bundle optimize helper](https://webpack.jakoblind.no/optimize): This tool will analyze your bundle and give you actionable suggestions on what to improve to reduce your bundle size. - [bundle-stats](https://github.com/bundle-stats/bundle-stats): Generate a bundle report(bundle size, assets, modules) and compare the results between different builds. - [webpack-stats-viewer](https://github.com/moonrailgun/webpack-stats-viewer): A plugin with build for webpack stats. Show more information about webpack bundle detail. diff --git a/src/content/guides/getting-started.mdx b/src/content/guides/getting-started.mdx index 5f0d559f1a1d..f82a51dae02d 100644 --- a/src/content/guides/getting-started.mdx +++ b/src/content/guides/getting-started.mdx @@ -27,6 +27,7 @@ contributors: - d3lm - snitin315 - Etheryen + - zowiebeha --- Webpack is used to compile JavaScript modules. Once [installed](/guides/installation), you can interact with webpack either from its [CLI](/api/cli) or [API](/api/node). If you're still new to webpack, please read through the [core concepts](/concepts) and [this comparison](/comparison) to learn why you might use it over the other tools that are out in the community. @@ -200,6 +201,8 @@ Now, since we'll be bundling our scripts, we have to update our `index.html` fil ``` +T> A couple other script loading strategies exist. Deferred loading is one such alternative to the above, where instead scripts are consolidated into the `` and are given the `defer` attribute. This strategy downloads the external script resource(s) in parallel with document parsing, and will execute the scripts in order of document appearance after parsing has finished. This is in contrast to the above, in which the parser pauses to download and then execute the external resource syncronously. To learn more about this process, MDN has a nice [`reference guide`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/script#async_and_defer). + In this setup, `index.js` explicitly requires `lodash` to be present, and binds it as `_` (no global scope pollution). By stating what dependencies a module needs, webpack can use this information to build a dependency graph. It then uses the graph to generate an optimized bundle where scripts will be executed in the correct order. With that said, let's run `npx webpack`, which will take our script at `src/index.js` as the [entry point](/concepts/entry-points), and will generate `dist/main.js` as the [output](/concepts/output). The `npx` command, which ships with Node 8.2/npm 5.2.0 or higher, runs the webpack binary (`./node_modules/.bin/webpack`) of the webpack package we installed in the beginning: diff --git a/src/content/guides/hot-module-replacement.mdx b/src/content/guides/hot-module-replacement.mdx index 918516fbc9ff..cfed0bc16a64 100644 --- a/src/content/guides/hot-module-replacement.mdx +++ b/src/content/guides/hot-module-replacement.mdx @@ -41,7 +41,7 @@ This feature is great for productivity. All we need to do is update our [webpack Since `webpack-dev-server` v4.0.0, Hot Module Replacement is enabled by default. -T> If you took the route of using `webpack-dev-middleware` instead of `webpack-dev-server`, please use the [`webpack-hot-middleware`](https://github.com/webpack-contrib/webpack-hot-middleware) package to enable HMR on your custom server or application. +T> If you took the route of using `webpack-dev-middleware` instead of `webpack-dev-server`, please use the [`webpack-hot-middleware`](https://github.com/webpack/webpack-hot-middleware) package to enable HMR on your custom server or application. **webpack.config.js** @@ -225,7 +225,7 @@ const server = new webpackDevServer({ hot: false, client: false }, compiler); See the [full documentation of `webpack-dev-server` Node.js API](/api/webpack-dev-server/). -T> If you're [using `webpack-dev-middleware`](/guides/development/#using-webpack-dev-middleware), check out the [`webpack-hot-middleware`](https://github.com/webpack-contrib/webpack-hot-middleware) package to enable HMR on your custom dev server. +T> If you're [using `webpack-dev-middleware`](/guides/development/#using-webpack-dev-middleware), check out the [`webpack-hot-middleware`](https://github.com/webpack/webpack-hot-middleware) package to enable HMR on your custom dev server. ## Gotchas diff --git a/src/content/guides/integrations.mdx b/src/content/guides/integrations.mdx index ece2275d4428..066d1f9452a3 100644 --- a/src/content/guides/integrations.mdx +++ b/src/content/guides/integrations.mdx @@ -51,7 +51,7 @@ module.exports = function (grunt) { }; ``` -For more information, please visit the [repository](https://github.com/webpack-contrib/grunt-webpack). +For more information, please visit the [repository](https://github.com/webpack/grunt-webpack). ## Gulp diff --git a/src/content/loaders/index.mdx b/src/content/loaders/index.mdx index cd24fb520300..28f349ec9887 100644 --- a/src/content/loaders/index.mdx +++ b/src/content/loaders/index.mdx @@ -19,7 +19,6 @@ Loaders are activated by using `loadername!` prefixes in `require()` statements, ## Files -- [`val-loader`](/loaders/val-loader) Executes code as module and consider exports as JS code - [`ref-loader`](https://www.npmjs.com/package/ref-loader) Create dependencies between any files manually ## JSON @@ -47,7 +46,7 @@ Loaders are activated by using `loadername!` prefixes in `require()` statements, - [`handlebars-loader`](https://github.com/pcardune/handlebars-loader) Compiles Handlebars to HTML - [`markup-inline-loader`](https://github.com/asnowwolf/markup-inline-loader) Inline SVG/MathML files to HTML. It’s useful when applying icon font or applying CSS animation to SVG. - [`twig-loader`](https://github.com/zimmo-be/twig-loader) Compiles Twig templates and returns a function -- [`remark-loader`](https://github.com/webpack-contrib/remark-loader) Load markdown through `remark` with built-in image resolution +- [`remark-loader`](https://github.com/webpack/remark-loader) Load markdown through `remark` with built-in image resolution ## Styling diff --git a/src/content/migrate/3.mdx b/src/content/migrate/3.mdx index cabd81e004a3..dec239634b6a 100644 --- a/src/content/migrate/3.mdx +++ b/src/content/migrate/3.mdx @@ -267,7 +267,7 @@ Thus make sure to remove the plugin from your configuration: ## ExtractTextWebpackPlugin - breaking change -[ExtractTextPlugin](https://github.com/webpack-contrib/extract-text-webpack-plugin) requires version 2 to work with webpack 2. +[ExtractTextPlugin](https://github.com/webpack/extract-text-webpack-plugin) requires version 2 to work with webpack 2. `npm install --save-dev extract-text-webpack-plugin` diff --git a/src/remark-plugins/remark-cleanup-readme/index.test.mjs b/src/remark-plugins/remark-cleanup-readme/index.test.mjs index 1d8bd0c2e211..bedbf16e46a0 100644 --- a/src/remark-plugins/remark-cleanup-readme/index.test.mjs +++ b/src/remark-plugins/remark-cleanup-readme/index.test.mjs @@ -39,7 +39,7 @@ describe('cleanup readme', () => { }); it('should clean up nested div[align="center"] block ', () => { - // see https://github.com/webpack-contrib/postcss-loader/blob/master/README.md + // see https://github.com/webpack/postcss-loader/blob/master/README.md const mdxText = `
c.toUpperCase()); +} + +// Fix internal markdown links (.md → /) +function fixMarkdownLinks(content) { + return content.replace(/(\]\([A-Z0-9_-]+)\.md(\))/gi, '$1/$2'); +} + +async function fetchGovernanceDocs() { + console.log('Fetching governance markdown files from webpack/governance...'); + + await mkdirp(outputDir); + + try { + // Get markdown files from governance repo + const { data: files } = await api.repos.getContent({ + owner, + repo, + path: '', + }); + + const markdownFiles = files.filter((file) => file.name.endsWith('.md')); + + for (const file of markdownFiles) { + const filename = file.name; + + // Create Capitalized prefixed filenames + const baseName = filename + .replace('.md', '') + .replace(/_/g, '-') + .toLowerCase(); + + const destFile = + filename === 'README.md' + ? 'Governance-Overview.mdx' + : `Governance-${baseName}.mdx`; + + // Fetch content from GitHub and fix markdown links + const response = await fetch(file.download_url); + let content = await response.text(); + content = fixMarkdownLinks(content); + + // Generate title and sorting order + const title = generateTitle(filename); + const sortOrder = + { + 'README.md': 0, + 'CHARTER.md': 1, + 'MEMBER_EXPECTATIONS.md': 2, + 'MODERATION_POLICY.md': 3, + 'WORKING_GROUPS.md': 4, + }[filename] ?? 10; + + // Build YAML frontmatter + const fm = { + title, + group: 'Contribute', + sort: sortOrder, + source: `https://github.com/${owner}/${repo}/blob/main/${filename}`, + edit: `https://github.com/${owner}/${repo}/edit/main/${filename}`, + }; + + const frontmatter = yamlHeadmatter(fm); + + // Write .mdx file + const destPath = path.join(outputDir, destFile); + await writeFile(destPath, frontmatter + content, 'utf8'); + console.log(`Synced: ${filename} → ${destFile}`); + } + + console.log( + '\nGovernance content generated successfully with Capitalized prefix!' + ); + } catch (error) { + console.error('Error fetching governance files:', error.message); + process.exitCode = 1; + } +} + +fetchGovernanceDocs(); diff --git a/src/utilities/fetch-package-repos.mjs b/src/utilities/fetch-package-repos.mjs index eb92f36a5bbf..f80187c19d01 100644 --- a/src/utilities/fetch-package-repos.mjs +++ b/src/utilities/fetch-package-repos.mjs @@ -20,6 +20,11 @@ const fetch = { suffixes: ['-loader'], hides: excludedLoaders, }, + { + organization: 'webpack', + suffixes: ['-loader'], + hides: [], + }, 'babel/babel-loader', ], plugins: [ @@ -28,6 +33,11 @@ const fetch = { suffixes: ['-webpack-plugin', '-extract-plugin'], hides: excludedPlugins, }, + { + organization: 'webpack', + suffixes: ['-webpack-plugin', '-extract-plugin'], + hides: excludedPlugins, + }, 'yoriiis/svg-chunk-webpack-plugin', 'yoriiis/chunks-webpack-plugin', ], diff --git a/src/utilities/process-readme.test.mjs b/src/utilities/process-readme.test.mjs index 77311324ccbe..45c6409be81a 100644 --- a/src/utilities/process-readme.test.mjs +++ b/src/utilities/process-readme.test.mjs @@ -31,19 +31,19 @@ describe('processReadme', () => { it('rewrite relative url', () => { const options = { source: - 'https://raw.githubusercontent.com/webpack-contrib/postcss-loader/master/README.md', + 'https://raw.githubusercontent.com/webpack/postcss-loader/main/README.md', }; const loaderMDData = 'See the file [`./src/config.d.ts`](./src/config.d.ts).'; expect(processReadme(loaderMDData, options)).toEqual( - 'See the file [`https://github.com/webpack-contrib/postcss-loader/blob/master/src/config.d.ts`](https://github.com/webpack-contrib/postcss-loader/blob/master/src/config.d.ts).' + 'See the file [`https://github.com/webpack/postcss-loader/main/src/config.d.ts`](https://github.com/webpack/postcss-loader/main/src/config.d.ts).' ); }); it('should preserve comments inside code blocks', () => { const options = { source: - 'https://raw.githubusercontent.com/webpack-contrib/postcss-loader/master/README.md', + 'https://raw.githubusercontent.com/webpack/postcss-loader/main/README.md', }; const loaderMDData = `