Merge sync 202512

.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 <your-clone-url> && 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=<your-token-here> 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.

.github/actions/webpack-persistent-cache/action.yml

@@ -9,7 +9,7 @@ outputs:
 runs:
   using: composite
   steps:
-    - uses: actions/cache@v4
+    - uses: actions/cache@0057852bfaa89a56745cba8c7296529d2fc39830 # v4.3.0
       id: build-webpack-persistent-cache
       with:
         path: node_modules/.cache

.github/workflows/dependency-review.yml

@@ -9,6 +9,6 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: 'Checkout Repository'
-        uses: actions/checkout@v5
+        uses: actions/checkout@1af3b93b6815bc44a9784bd300feb67ff0d1eeb3 # v6.0.0
       - name: 'Dependency Review'
-        uses: actions/dependency-review-action@v4
+        uses: actions/dependency-review-action@3c4e3dcb1aa7874d2c16be7d79418e9b7efd6261 # v4.8.2

.github/workflows/deploy.yml

@@ -15,10 +15,10 @@ jobs:
         node-version: [lts/*]
     runs-on: ${{ matrix.os }}
     steps:
-      - uses: actions/checkout@v5
+      - uses: actions/checkout@1af3b93b6815bc44a9784bd300feb67ff0d1eeb3 # v6.0.0
 
       - name: Use Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v5
+        uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.0
         with:
           node-version: ${{ matrix.node-version }}
           cache: yarn
@@ -35,7 +35,7 @@ jobs:
       - run: yarn lint:links
 
       - name: Deploy
-        uses: JamesIves/[email protected].3
+        uses: JamesIves/github-pages-deploy-action@4a3abc783e1a24aeb44c16e869ad83caf6b4cc23 # v4.7.4
         with:
           token: ${{ secrets.GITHUB_TOKEN }}
           folder: dist

.github/workflows/testing.yml

@@ -16,10 +16,10 @@ jobs:
         node-version: [lts/*]
     runs-on: ${{ matrix.os }}
     steps:
-      - uses: actions/checkout@v5
+      - uses: actions/checkout@1af3b93b6815bc44a9784bd300feb67ff0d1eeb3 # v6.0.0
 
       - name: Use Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v5
+        uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.0
         with:
           node-version: ${{ matrix.node-version }}
           cache: yarn
@@ -35,10 +35,10 @@ jobs:
         node-version: [lts/*]
     runs-on: ${{ matrix.os }}
     steps:
-      - uses: actions/checkout@v5
+      - uses: actions/checkout@1af3b93b6815bc44a9784bd300feb67ff0d1eeb3 # v6.0.0
 
       - name: Use Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v5
+        uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.0
         with:
           node-version: ${{ matrix.node-version }}
           cache: yarn
@@ -55,10 +55,10 @@ jobs:
         node-version: [lts/*]
     runs-on: ${{ matrix.os }}
     steps:
-      - uses: actions/checkout@v5
+      - uses: actions/checkout@1af3b93b6815bc44a9784bd300feb67ff0d1eeb3 # v6.0.0
 
       - name: Use Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v5
+        uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.0
         with:
           node-version: ${{ matrix.node-version }}
           cache: yarn
@@ -67,7 +67,7 @@ jobs:
         run: npm install -g mdx2vast
 
       - name: Vale
-        uses: errata-ai/[email protected]
+        uses: errata-ai/vale-action@d89dee975228ae261d22c15adcd03578634d429c # v2.1.1
         with:
           files: src/content
         env:
@@ -81,10 +81,10 @@ jobs:
         node-version: [lts/*]
     runs-on: ${{ matrix.os }}
     steps:
-      - uses: actions/checkout@v5
+      - uses: actions/checkout@1af3b93b6815bc44a9784bd300feb67ff0d1eeb3 # v6.0.0
 
       - name: Use Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v5
+        uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.0
         with:
           node-version: ${{ matrix.node-version }}
           cache: yarn
@@ -95,7 +95,7 @@ jobs:
         uses: ./.github/actions/webpack-persistent-cache
 
       - name: Cypress run
-        uses: cypress-io/github-action@v6
+        uses: cypress-io/github-action@7ef72e250a9e564efb4ed4c2433971ada4cc38b4 # v6.10.4
         with:
           browser: chrome
           config-file: cypress.config.js

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.kr/ --internal --skip '%E' --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.kr/ --internal --skip '%E' --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.kr/ > sitemap.xml",
     "serve": "npm run build && sirv start ./dist --port 4000",
     "preprintable": "npm run clean-printable",

src/components/CodeBlockWithCopy/CodeBlockWithCopy.jsx

@@ -0,0 +1,72 @@
+import { useRef, useState } from 'react';
+import PropTypes from 'prop-types';
+import './CodeBlockWithCopy.scss';
+
+export default function CodeBlockWithCopy({ children }) {
+  const preRef = useRef(null);
+  const [copyStatus, setCopyStatus] = useState('copy');
+
+  const handleCopy = async () => {
+    if (!preRef.current) return;
+
+    const codeElement = preRef.current.querySelector('code');
+    if (!codeElement) return;
+
+    const codeText = codeElement.textContent;
+    let successfulCopy = false;
+
+    // Try modern API (navigator.clipboard) -> as document.execCommand() deprecated
+    try {
+      if (navigator.clipboard && window.isSecureContext) {
+        await navigator.clipboard.writeText(codeText);
+        successfulCopy = true;
+      }
+    } catch (err) {
+      console.log(err);
+    }
+
+    // If modern API failed, fall back to deprecated document.execCommand('copy')
+    if (!successfulCopy) {
+      const textarea = document.createElement('textarea');
+      textarea.value = codeText;
+      textarea.style.position = 'fixed';
+      textarea.style.opacity = '0';
+
+      document.body.appendChild(textarea);
+      textarea.select();
+
+      try {
+        // This deprecated method is kept as a fallback for compatibility/iframe environments.
+        successfulCopy = document.execCommand('copy');
+      } catch (err) {
+        successfulCopy = false;
+        console.log(err);
+      }
+
+      document.body.removeChild(textarea);
+    }
+
+    setCopyStatus(successfulCopy ? 'copied' : 'error');
+    setTimeout(() => setCopyStatus('copy'), 2000);
+  };
+
+  return (
+    <div className="code-block-wrapper">
+      <button onClick={handleCopy} className={`copy-button ${copyStatus}`}>
+        {copyStatus === 'copied'
+          ? 'Copied!'
+          : copyStatus === 'error'
+            ? 'Error'
+            : 'Copy'}
+      </button>
+
+      <pre ref={preRef} className="code-block">
+        {children}
+      </pre>
+    </div>
+  );
+}
+
+CodeBlockWithCopy.propTypes = {
+  children: PropTypes.node.isRequired,
+};

src/components/CodeBlockWithCopy/CodeBlockWithCopy.scss

@@ -0,0 +1,74 @@
+.code-block-wrapper {
+  position: relative;
+  margin-bottom: 1.5rem;
+}
+
+.code-block {
+  background-color: #2d3748;
+  color: #e2e8f0;
+  padding: 1rem;
+  padding-right: 3.5rem;
+  border-radius: 0.5rem;
+  overflow-x: auto;
+  font-size: 0.875rem;
+  line-height: 1.5;
+  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
+
+  code {
+    font-family: monospace;
+  }
+}
+
+.copy-button {
+  position: absolute;
+  top: 0.32rem;
+  right: 0.5rem;
+  z-index: 10;
+
+  padding: 0.4rem 0.7rem;
+  border-radius: 0.35rem;
+
+  border: none;
+  cursor: pointer;
+
+  font-size: 0.75rem;
+  font-weight: 500;
+
+  /* Always visible */
+  opacity: 1;
+
+  background-color: #7c3aed;
+  color: #e2e8f0;
+
+  transition:
+    background-color 0.2s,
+    transform 0.1s;
+
+  &:hover {
+    background-color: #6d28d9;
+  }
+
+  /* Success */
+  &.copied {
+    background-color: #38a169;
+  }
+  &.copied:hover {
+    background-color: #2f855a;
+  }
+
+  /* Error */
+  &.error {
+    background-color: #e53e3e;
+  }
+  &.error:hover {
+    background-color: #c53030;
+  }
+
+  &:focus {
+    outline: none;
+  }
+
+  &:active {
+    transform: scale(0.95);
+  }
+}

src/content/api/cli.mdx

@@ -581,7 +581,7 @@ npx webpack --json
 npx webpack --json stats.json
 ```
 
-다른 모든 경우에 webpack은 번들, 청크 및 타이밍 세부 정보를 보여주는 일련의 통계를 출력합니다. 이 옵션을 사용하면 출력이 JSON 객체가 될 수 있습니다. webpack의 [분석 도구](https://webpack.github.io/analyse/), chrisbateman의 [webpack-visualizer](https://chrisbateman.github.io/webpack-visualizer/) 또는 th0r의 [webpack-bundle-analyzer](https://github.com/webpack-contrib/webpack-bundle-analyzer) 에서 이 응답이 수락됩니다. 이러한 분석 도구는 JSON을 가져와서 빌드의 모든 세부 정보를 그래픽 형식으로 제공합니다.
+다른 모든 경우에 webpack은 번들, 청크 및 타이밍 세부 정보를 보여주는 일련의 통계를 출력합니다. 이 옵션을 사용하면 출력이 JSON 객체가 될 수 있습니다. webpack의 [분석 도구](https://webpack.github.io/analyse/), chrisbateman의 [webpack-visualizer](https://chrisbateman.github.io/webpack-visualizer/) 또는 th0r의 [webpack-bundle-analyzer](https://github.com/webpack/webpack-bundle-analyzer) 에서 이 응답이 수락됩니다. 이러한 분석 도구는 JSON을 가져와서 빌드의 모든 세부 정보를 그래픽 형식으로 제공합니다.
 
 T> 여기에서 생성된 통계에 대한 자세한 내용은 [통계 데이터 api](/api/stats)를 참고하세요.
 

src/content/api/loaders.mdx

@@ -15,6 +15,7 @@ contributors:
   - chenxsan
   - jamesgeorge007
   - alexeyr
+  - evenstensberg
 translators:
   - 1ilsang
 ---
@@ -226,7 +227,7 @@ addDependency(file: string)
 dependency(file: string) // 단축
 ```
 
-기존 파일을 감시할 수 있게 만들기 위해 로더 결과의 의존성으로 파일을 추가합니다. 예를 들어, [`sass-loader`](https://github.com/webpack-contrib/sass-loader), [`less-loader`](https://github.com/webpack-contrib/less-loader)는 가져온 `css` 파일이 변경될 때마다 이를 사용하여 재컴파일합니다.
+기존 파일을 감시할 수 있게 만들기 위해 로더 결과의 의존성으로 파일을 추가합니다. 예를 들어, [`sass-loader`](https://github.com/webpack/sass-loader), [`less-loader`](https://github.com/webpack/less-loader)는 가져온 `css` 파일이 변경될 때마다 이를 사용하여 재컴파일합니다.
 
 ### this.addMissingDependency
 

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
@@ -99,7 +100,8 @@ W> 이 기능은 내부적으로 [`Promise`](https://developer.mozilla.org/en-US
 
 `import(foo)`와 같은 완전히 동적인 import 문을 사용하는 것은 불가능합니다. `foo`는 잠재적으로 시스템이나 프로젝트의 모든 파일에 대한 경로가 될 수 있기 때문입니다.
 
-`import()`는 최소한 모듈 위치에 대한 정보를 포함해야 합니다. 번들링은 특정 디렉터리 또는 파일 집합으로 제한될 수 있습니다. 그러므로 동적 표현 식을 사용할 때 `import()` 호출 시 잠재적으로 요청 가능한 모든 모듈이 포함됩니다. 예를 들어 ``import(`./locale/${language}.json`)``은 `./locale` 디렉터리의 모든 `.json` 파일을 새로운 청크로 번들합니다. 런타임에 `language` 변수가 계산되면 `english.json` 또는 `german.json`과 같은 모든 파일이 사용 가능하게 됩니다.
+`import()`는 최소한 모듈 위치에 대한 정보를 포함해야 합니다. 번들링은 특정 디렉터리 또는 파일 집합으로 제한될 수 있습니다. 그러므로 동적 표현 식을 사용할 때 `import()` 호출 시 잠재적으로 요청 가능한 모든 모듈이 포함됩니다.
+예를 들어, ``import(`./locale/${language}.json`)``는 `./locale` 디렉터리와 하위 디렉터리에 있는 모든 `.json` 파일만 새 청크로 묶고 다른 파일 확장자를 가진 파일은 제외합니다. 런타임에 `language` 변수가 계산되면 `english.json`이나 `german.json`과 같은 모든 파일을 사용할 수 있습니다.
 
 ```javascript
 // 쿠키나 다른 저장소에서 언어를 가져오는 방법이 있다고 상상해 보세요.
@@ -113,7 +115,7 @@ T> [`webpackInclude` 및 `webpackExclude`](/api/module-methods/#magic-comments)
 
 #### Magic Comments
 
-기능을 작동시키기 위한 인라인 주석입니다. 가져오기에 주석을 추가하여 청크의 이름을 지정하거나 다른 모드를 선택하는 등의 여러 작업을 할 수 있습니다. 이 특별한 주석의 전체 목록과 주석이 수행하는 작업은 아래 코드와 설명을 참고하세요.
+가져오기에 주석을 추가하여 청크의 이름을 지정하거나 다른 모드를 선택하는 등의 여러 작업을 할 수 있습니다. 이 특별한 주석의 전체 목록과 주석이 수행하는 작업은 아래 코드와 설명을 참고하세요.
 
 ```js
 // 단일 대상
@@ -139,6 +141,8 @@ import(
 import(/* webpackIgnore: true */ 'ignored-module.js');
 ```
 
+T> Single line comments (`//`) are also supported. JSDoc comments (`/** */`) are not.
+
 ##### webpackIgnore
 
 **JavaScript Usage**

src/content/api/normalmodulefactory-hooks.mdx

@@ -152,3 +152,4 @@ NormalModuleFactory.hooks.someHook.for('identifier').tap(/* ... */);
 5. `asset/source`
 6. `asset/resource`
 7. `asset/inline`
+8. `asset/bytes`

src/content/api/plugins.mdx

@@ -10,6 +10,7 @@ contributors:
   - EugeneHlushko
   - wizardofhogwarts
   - snitin315
+  - evenstensberg
 translators:
   - Eunbin-Kim
 ---