Merge sync 202501

.github/workflows/deploy.yml

@@ -12,7 +12,7 @@ jobs:
     strategy:
       matrix:
         os: [ubuntu-latest]
-        node-version: [latest]
+        node-version: [lts/*]
     runs-on: ${{ matrix.os }}
     steps:
       - uses: actions/checkout@v4
@@ -35,7 +35,7 @@ jobs:
       - run: yarn lint:links
 
       - name: Deploy
-        uses: JamesIves/github-pages-deploy-action@v4.6.8
+        uses: JamesIves/github-pages-deploy-action@v4.7.2
         with:
           token: ${{ secrets.GITHUB_TOKEN }}
           folder: dist

.github/workflows/testing.yml

@@ -13,7 +13,7 @@ jobs:
     strategy:
       matrix:
         os: [ubuntu-latest]
-        node-version: [latest]
+        node-version: [lts/*]
     runs-on: ${{ matrix.os }}
     steps:
       - uses: actions/checkout@v4
@@ -32,7 +32,7 @@ jobs:
     strategy:
       matrix:
         os: [ubuntu-latest]
-        node-version: [latest]
+        node-version: [lts/*]
     runs-on: ${{ matrix.os }}
     steps:
       - uses: actions/checkout@v4
@@ -51,14 +51,13 @@ jobs:
     name: Proselint
     strategy:
       matrix:
-        # TODO remove after https://github.com/errata-ai/vale-action/issues/128
-        os: [ubuntu-22.04]
+        os: [ubuntu-latest]
     runs-on: ${{ matrix.os }}
     steps:
       - uses: actions/checkout@v4
 
       - name: Vale
-        uses: errata-ai/vale-action@v2.1.0
+        uses: errata-ai/vale-action@v2.1.1
         with:
           files: src/content
         env:
@@ -69,7 +68,7 @@ jobs:
     strategy:
       matrix:
         os: [ubuntu-latest]
-        node-version: [latest]
+        node-version: [lts/*]
     runs-on: ${{ matrix.os }}
     steps:
       - uses: actions/checkout@v4

package.json

@@ -59,27 +59,27 @@
     "prepare": "husky && rimraf ./node_modules/.cache/webpack && yarn-deduplicate --strategy fewer"
   },
   "lint-staged": {
-    "*.{js,jsx,md,mdx}": [
+    "*.{js,mjs,jsx,md,mdx}": [
       "npm run lint-js"
     ],
     "*.{md,mdx}": [
       "npm run lint-markdown"
     ],
-    "*.{js,jsx,css,scss,md,mdx,json}": [
+    "*.{js,mjs,jsx,css,scss,md,mdx,json}": [
       "prettier --write"
     ]
   },
   "devDependencies": {
-    "@babel/core": "^7.25.8",
-    "@babel/eslint-parser": "^7.25.8",
+    "@babel/core": "^7.26.0",
+    "@babel/eslint-parser": "^7.25.9",
     "@babel/plugin-proposal-class-properties": "^7.17.12",
-    "@babel/preset-env": "^7.25.8",
-    "@babel/preset-react": "^7.25.7",
-    "@eslint/compat": "^1.2.0",
-    "@eslint/eslintrc": "^3.1.0",
-    "@eslint/js": "^9.12.0",
-    "@mdx-js/loader": "^3.0.1",
-    "@mdx-js/react": "^3.0.1",
+    "@babel/preset-env": "^7.26.0",
+    "@babel/preset-react": "^7.26.3",
+    "@eslint/compat": "^1.2.4",
+    "@eslint/eslintrc": "^3.2.0",
+    "@eslint/js": "^9.16.0",
+    "@mdx-js/loader": "^3.1.0",
+    "@mdx-js/react": "^3.1.0",
     "@octokit/auth-action": "^5.1.1",
     "@octokit/rest": "^21.0.2",
     "@pmmmwh/react-refresh-webpack-plugin": "next",
@@ -89,36 +89,36 @@
     "copy-webpack-plugin": "^12.0.2",
     "css-loader": "^7.1.2",
     "css-minimizer-webpack-plugin": "^7.0.0",
-    "cypress": "^13.15.0",
+    "cypress": "^13.16.0",
     "directory-tree": "^3.5.2",
     "directory-tree-webpack-plugin": "^1.0.3",
     "duplexer": "^0.1.1",
-    "eslint": "^9.7.0",
+    "eslint": "^9.16.0",
     "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-cypress": "^4.0.0",
+    "eslint-plugin-cypress": "^4.1.0",
     "eslint-plugin-mdx": "^3.1.5",
-    "eslint-plugin-react": "^7.37.1",
-    "eslint-plugin-react-hooks": "^5.0.0",
+    "eslint-plugin-react": "^7.37.2",
+    "eslint-plugin-react-hooks": "^5.1.0",
     "front-matter": "^4.0.2",
     "github-slugger": "^2.0.0",
-    "globals": "^15.11.0",
-    "html-webpack-plugin": "^5.5.4",
+    "globals": "^15.13.0",
+    "html-webpack-plugin": "^5.6.3",
     "http-server": "^14.1.1",
-    "husky": "^9.1.6",
+    "husky": "^9.1.7",
     "hyperlink": "^5.0.4",
     "jest": "^29.7.0",
-    "lightningcss": "^1.27.0",
+    "lightningcss": "^1.28.2",
     "lint-staged": "^15.2.10",
     "lodash": "^4.17.21",
-    "markdownlint-cli": "^0.42.0",
+    "markdownlint-cli": "^0.43.0",
     "mdast-util-to-string": "^4.0.0",
-    "mini-css-extract-plugin": "^2.9.1",
+    "mini-css-extract-plugin": "^2.9.2",
     "mkdirp": "^3.0.1",
     "modularscale-sass": "^3.0.3",
     "npm-run-all": "^4.1.1",
-    "postcss": "^8.4.47",
+    "postcss": "^8.4.49",
     "postcss-loader": "^8.1.1",
-    "prettier": "^3.3.3",
+    "prettier": "^3.4.2",
     "react-refresh": "^0.14.2",
     "redirect-webpack-plugin": "^1.0.0",
     "remark": "^15.0.1",
@@ -131,36 +131,36 @@
     "remark-refractor": "montogeek/remark-refractor",
     "rimraf": "^6.0.1",
     "sass": "^1.79.5",
-    "sass-loader": "^16.0.2",
+    "sass-loader": "^16.0.4",
     "sirv-cli": "^3.0.0",
     "sitemap-static": "^0.4.2",
     "static-site-generator-webpack-plugin": "^3.4.1",
     "style-loader": "^4.0.0",
-    "tailwindcss": "^3.4.14",
+    "tailwindcss": "^3.4.16",
     "tap-spot": "^1.1.2",
     "unist-util-visit": "^5.0.0",
-    "webpack": "^5.95.0",
+    "webpack": "^5.97.1",
     "webpack-bundle-analyzer": "^4.10.2",
     "webpack-cli": "^5.1.4",
     "webpack-dev-server": "^5.1.0",
     "webpack-merge": "^6.0.1",
-    "workbox-webpack-plugin": "^7.1.0",
+    "workbox-webpack-plugin": "^7.3.0",
     "yarn-deduplicate": "^6.0.2"
   },
   "dependencies": {
-    "@docsearch/react": "^3.6.1",
+    "@docsearch/react": "^3.8.0",
     "@react-spring/web": "^9.7.5",
     "path-browserify": "^1.0.1",
     "prop-types": "^15.8.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-helmet-async": "^2.0.5",
-    "react-router-dom": "^6.27.0",
+    "react-router-dom": "^6.28.0",
     "react-tiny-popover": "5",
     "react-use": "^17.5.1",
     "react-visibility-sensor": "^5.0.2",
     "webpack-pwa-manifest": "^4.3.0",
-    "workbox-window": "^7.0.0"
+    "workbox-window": "^7.3.0"
   },
   "resolutions": {
     "sitemap-static/minimist": "1.2.5",

src/content/api/cli.mdx

@@ -45,18 +45,15 @@ W> `npx`를 사용하여 webpack을 실행하려면 `webpack-cli`가 설치되
 
 webpack-cli는 webpack을 더 쉽게 사용할 수 있도록 다양한 명령을 제공합니다. 기본적으로 webpack은 다음과 같은 명령어를 제공합니다.
 
-| 명령어                      | 사용법                                                | 설명                                                                       |
-| --------------------------- | ----------------------------------------------------- | -------------------------------------------------------------------------- |
-| [`build`](#build)           | `build\|bundle\|b [entries...] [options]`             | webpack을 실행합니다. (기본 명령어, 생략 가능).                            |
-| [`configtest`](#configtest) | `configtest\|t [config-path]`                         | webpack 설정을 검증합니다.                                                 |
-| [`help`](#help)             | `help\|h [command] [option]`                          | 명령어 및 옵션에 대한 도움말을 표시합니다.                                 |
-| [`info`](#info)             | `info\|i [options]`                                   | 시스템 정보를 출력합니다.                                                  |
-| [`init`](#init)             | `init\|create\|c\|new\|n [generation-path] [options]` | 새로운 webpack 프로젝트를 초기화합니다.                                    |
-| [`loader`](#loader)         | `loader\|l [output-path] [options]`                   | 로더를 스캐폴드합니다.                                                     |
-| [`plugin`](#plugin)         | `plugin\|p [output-path] [options]`                   | 플러그인을 스캐폴드합니다.                                                 |
-| [`serve`](#serve)           | `serve\|server\|s [options]`                          | `webpack-dev-server`를 실행합니다.                                         |
-| [`version`](#version)       | `version\|v [commands...]`                            | `webpack`, `webpack-cli` 및 `webpack-dev-server`의 버전 넘버를 출력합니다. |
-| [`watch`](#watch)           | `watch\|w [entries...] [options]`                     | webpack을 실행하고 파일 변경을 감지합니다.                                 |
+| 명령어                      | 사용법                                    | 설명                                                                       |
+| --------------------------- | ----------------------------------------- | -------------------------------------------------------------------------- |
+| [`build`](#build)           | `build\|bundle\|b [entries...] [options]` | webpack을 실행합니다. (기본 명령어, 생략 가능).                            |
+| [`configtest`](#configtest) | `configtest\|t [config-path]`             | webpack 설정을 검증합니다.                                                 |
+| [`help`](#help)             | `help\|h [command] [option]`              | 명령어 및 옵션에 대한 도움말을 표시합니다.                                 |
+| [`info`](#info)             | `info\|i [options]`                       | 시스템 정보를 출력합니다.                                                  |
+| [`serve`](#serve)           | `serve\|server\|s [options]`              | `webpack-dev-server`를 실행합니다.                                         |
+| [`version`](#version)       | `version\|v [commands...]`                | `webpack`, `webpack-cli` 및 `webpack-dev-server`의 버전 넘버를 출력합니다. |
+| [`watch`](#watch)           | `watch\|w [entries...] [options]`         | webpack을 실행하고 파일 변경을 감지합니다.                                 |
 
 ### Build
 
@@ -74,16 +71,22 @@ npx webpack build --config ./webpack.config.js --stats verbose
 
 ### Init
 
-새 webpack 프로젝트를 초기화하기 위해 사용합니다.
+`create-new-webpack-app`를 사용하여 새로운 webpack 프로젝트를 초기화하기 위해 사용합니다.
 
 ```bash
-npx webpack init [generation-path] [options]
+npx create-new-webpack-app [generation-path] [options]
 ```
 
 **예시**
 
 ```bash
-npx webpack init ./my-app --force --template=default
+npx create-new-webpack-app ./my-app --force --template=default
+```
+
+별칭으로:
+
+```bash
+npx create-new-webpack-app init ./my-app --force --template=default
 ```
 
 #### Generation Path
@@ -104,20 +107,25 @@ npx webpack init ./my-app --force --template=default
 
 질문 없이 프로젝트를 생성합니다. 활성화하면 각 질문에 대한 기본 답변을 사용합니다.
 
-T> [`webpack init` 명령의 전체 문서](https://github.com/webpack/webpack-cli/blob/master/packages/generators/INIT.md)를 참고하세요.
+#### Templates supported
+
+- `--template=default` - 기본 설정을 갖춘 템플릿입니다.
+- `--template=react` - React 설정을 사용한 템플릿입니다.
+- `--template=vue` - Vue 설정을 사용한 템플릿입니다.
+- `--template=svelte` - Svelte 설정을 사용한 템플릿입니다.
 
 ### Loader
 
 로더를 스캐폴드합니다.
 
 ```bash
-npx webpack loader [output-path] [options]
+npx create-new-webpack-app loader [output-path] [options]
 ```
 
 **example**
 
 ```bash
-npx webpack loader ./my-loader --template=default
+npx create-new-webpack-app loader ./my-loader --template=default
 ```
 
 #### Output Path
@@ -137,13 +145,13 @@ npx webpack loader ./my-loader --template=default
 플러그인을 스캐폴드합니다.
 
 ```bash
-npx webpack plugin [output-path] [options]
+npx create-new-webpack-app plugin [output-path] [options]
 ```
 
 **example**
 
 ```bash
-npx webpack plugin ./my-plugin --template=default
+npx create-new-webpack-app plugin ./my-plugin --template=default
 ```
 
 #### Output Path
@@ -158,6 +166,8 @@ npx webpack plugin ./my-plugin --template=default
 
 템플릿의 유형입니다.
 
+T> `create-new-webpack-app`의 전체 문서를 참고하세요(https://github.com/webpack/webpack-cli/blob/master/packages/create-webpack-app/README.md).
+
 ### Info
 
 시스템에 대한 정보를 출력합니다.

src/content/api/module-methods.mdx

@@ -135,22 +135,52 @@ import(
   /* webpackPreload: true */
   `./locale/${language}`
 );
-```
 
-```js
 import(/* webpackIgnore: true */ 'ignored-module.js');
-
-new URL(/* webpackIgnore: true */ 'file1.css', import.meta.url);
 ```
 
 ##### webpackIgnore
 
+**JavaScript Usage**
+
 `true`로 설정하면 동적 import 구문 파싱을 비활성화합니다.
 
 `import.meta.url`을 사용할 때, 그대로 유지되지 않고, 대신 `baseURI`에 따라 대체됩니다. 모듈의 경우 `new URL("./", import.meta.url)`로 대체되고, 다른 경우에는 `document.baseURI`로 기본 설정됩니다. 이렇게 하면 기본 URL 컨텍스트에 맞게 상대 URL이 올바르게 작동합니다.
 
+```js
+import(/* webpackIgnore: true */ 'ignored-module.js');
+
+new URL(/* webpackIgnore: true */ 'file1.css', import.meta.url);
+```
+
 W> `webpackIgnore`를 `true`로 설정하면 코드 분할이 해제됩니다.
 
+**CSS Usage**
+
+`webpackIgnore` 주석은 webpack이 특정 가져오기 또는 URL 참조를 처리할지 여부를 제어할 수 있습니다.
+특정 경우에는 바로 사용할 수 있지만 성능상의 이유로 **모든 경우를 지원하지는 않습니다.**
+
+다음의 경우에는 `webpackIgnore`를 지원합니다:
+
+```css
+@import /* webpackIgnore: false */ url(./basic.css);
+
+.class {
+  color: red;
+  background: /* webpackIgnore: true */ url('./url/img.png');
+}
+
+.class {
+  background-image: image-set(
+    /*webpackIgnore:  true*/ url(./url/img1x.png) 1x,
+    url(./url/img2x.png) 2x,
+    url(./url/img3x.png) 3x
+  );
+}
+```
+
+T> 다른 CSS 시나리오의 경우 [`css-loader`는 `webpackIgnore`](/loaders/css-loader/#disable-url-resolving-using-the--webpackignore-true--comment)를 완벽하게 지원하여 필요한 경우 더 많은 유연성을 제공합니다.
+
 ##### webpackChunkName
 
 새 청크의 이름입니다. Webpack 2.6.0부터 플레이스홀더 `[index]`와 `[request]`는 주어진 문자열 내에서 증가된 숫자 또는 실제 확인된 파일 이름으로 각각 지원합니다. 이 주석을 추가하면 개별 청크 이름이 [id].js 대신 [my-chunk-name].js로 지정됩니다.

src/content/awesome-webpack.mdx

@@ -176,6 +176,7 @@ _People passionate about Webpack (In no particular order)_
 - [Transpile Webpack Plugin](https://github.com/licg9999/transpile-webpack-plugin#readme): Transpiles input files into output files individually without bundling together. -- _Maintainer_: `Chungen Li` [![Github][githubicon]](https://github.com/licg9999) [![Twitter][twittericon]](https://twitter.com/licg9999)
 - [Manifest Extraction Plugin](https://github.com/shellscape/webpack-manifest-plugin): Generates an asset manifest after compiling webpack. -- _Maintainer_: `Andrew Powell` [![Github][githubicon]](https://github.com/shellscape)
 - [Transform Async Modules Plugin](https://github.com/steverep/transform-async-modules-webpack-plugin): A Webpack plugin to transpile async module output using Babel. Allows transpiling top level await to ES5. -- _Maintainer_: `Steve Repsher` [![Github][githubicon]](https://github.com/steverep)
+- [CSS Layering Plugin](https://github.com/kburich/css-layering-webpack-plugin): Wrap CSS in cascade layers. -- _Maintainer_: `Kresimir Buric` [![Github][githubicon]](https://github.com/kburich)
 
 ### Webpack Tools