Question 1

Node.js 17에서 webpack 사용 시 발생하는 “error:0308010C:digital envelope routines::unsupported” 오류는 어떻게 해결하나요?

Accepted Answer

이 오류는 이전 webpack 버전이 MD4 해싱을 사용하는데, Node.js 17의 OpenSSL 3에서 MD4가 비활성화되어 발생합니다. webpack을 5.61.0 이상으로 업그레이드하세요: `npm install webpack@^5.61.0 --save-dev`, 그런 다음 다시 빌드하세요. 임시 해결 방법으로 Node.js 16을 사용하거나(`nvm use 16`) 레거시 OpenSSL 프로바이더를 활성화하세요: Linux/macOS에서는 `export NODE_OPTIONS=--openssl-legacy-provider`를 실행하고, Windows CMD에서는 `set NODE_OPTIONS=--openssl-legacy-provider`를 실행하고, PowerShell에서는 `$env:NODE_OPTIONS="--openssl-legacy-provider"`를 실행하세요. 그런 다음 빌드를 다시 실행하세요.

Question 2

webpack 5.111.1로 업그레이드한 후 발생하는 Terser "DefaultsError: `as` is not a supported option" 오류를 해결하는 방법

Accepted Answer

`minimizer-webpack-plugin`을 버전 5.12.0 이상으로 업그레이드하세요. 이 회귀 문제는 5.8.0에 존재했습니다. Yarn을 사용하는 경우 다음을 실행하세요:

```bash
yarn up minimizer-webpack-plugin@^5.12.0
```

npm을 사용하는 경우:

```bash
npm install minimizer-webpack-plugin@^5.12.0 -D
```

그런 다음 의존성을 다시 설치하고 리빌드하세요. `yarn why minimizer-webpack-plugin` 또는 `npm ls minimizer-webpack-plugin`으로 설치된 버전을 확인하세요. 5.8.0에서 5.12.0으로 업데이트하면 HTML에 포함된 JavaScript를 압축할 때 Terser에 전달되던 잘못된 `as: 'script'` 옵션 문제가 해결됩니다.

Question 3

processErrors 훅이 모든 오류를 제거한 후에도 webpack stats.hasErrors()가 true를 반환하는 이유는 무엇인가요?

Accepted Answer

이것은 webpack 5의 버그이며, webpack 5.111.1에서 재현되었습니다. `Stats.hasErrors()`는 `compilation.errors`를 직접 읽는 반면, `stats.toJson().errors`와 `getErrors()`는 `compilation.hooks.processErrors` waterfall 훅을 적용합니다. 따라서 `processErrors`에서 오류를 필터링하면 출력에서는 제거되지만 `hasErrors()`는 변경되지 않습니다.

수정 방법은 `hasWarnings()`와 동일하게 `hasErrors()`가 `getErrors()`를 거치도록 하는 것입니다:

```js
hasErrors() {
  return (
    this.compilation.getErrors().length > 0 ||
    this.compilation.children.some((child) => child.getStats().hasErrors())
  );
}
```

issue #22279에 대한 수정이 포함된 릴리스로 webpack을 업그레이드하세요. 그 전까지는 플러그인이 `processErrors`를 통해 오류를 필터링하는 경우 `stats.hasErrors()`에 의존하지 마세요. 대신 처리된 오류 목록을 사용하세요:

```js
function hasProcessedErrors(compilation) {
  return (
    compilation.getErrors().length > 0 ||
    compilation.children.some(hasProcessedErrors)
  );
}

const hasErrors = hasProcessedErrors(stats.compilation);
```

또는 빌드에서 child compilation을 사용하는 경우 이를 고려하여, `stats.toJson().errors.length`로 렌더링된 stats 출력을 확인할 수도 있습니다.

Question 4

webpack의 browserslist 타겟 `safari 10`은 `const`/`let`을 지원하지 않는다고 보고하는 반면 `safari 10.0`은 지원한다고 보고하는 이유는 무엇인가요?

Accepted Answer

이것은 webpack의 `browserslistTargetHandler`에 있는 버그입니다 (webpack 5.111.1 및 `main`에서 확인됨). 타겟이 `safari 10`처럼 메이저 버전만 가지고 있는 경우, 누락된 마이너 버전이 `NaN`이 됩니다. 메이저 버전 동일 여부 검사에서 `NaN >= 0`은 `false`이므로, `[10, 0]`에서 처음 지원되는 기능이 지원되지 않는 것으로 잘못 간주됩니다.

수정 방법: 비교하기 전에 누락된 마이너 버전을 `0`으로 처리합니다:

```js
const parserMinor = Number(parser.minor ?? 0);

if (
  Number(parserMajor) === requiredVersion[0] &&
  parserMinor >= requiredVersion[1]
) {
  // feature is supported
}
```

수정된 webpack 릴리스가 나올 때까지 webpack issue #22278에 대한 업스트림 패치를 적용하거나 `patch-package`를 사용하세요. 임시 해결 방법으로는 `safari 10.0`과 같이 가능한 경우 명시적인 마이너 버전을 사용하세요. 다만 일부 Browserslist 쿼리는 이를 다시 메이저 버전만 있는 형태로 정규화할 수 있습니다.

Question 5

experiments.css와 함께 CSS @import를 사용할 때 발생하는 webpack 크래시 "TypeError: Cannot read properties of null (reading 'userRequest')"를 해결하는 방법

Accepted Answer

이것은 네이티브 CSS 모드(`experiments.css: true`)에서 발생하는 webpack 버그입니다. CSS 규칙이 `parser: { exportType: "style" }`을 사용하고 `@import "./ignored.css"` 대상이 (`IgnorePlugin` 또는 `resolve.alias: { "...": false }`를 통해) 무시되면, `moduleGraph.getModule(dep)`이 null을 반환하고 `CssGenerator._generateImportExpressions`가 `depModule.userRequest`를 읽는 중에 크래시가 발생합니다. 해결 방법: 1) 이 수정 사항이 포함된 릴리스로 webpack을 업그레이드합니다 (issue #22842에 대한 PR에 null 체크가 추가되었습니다). 2) 임시 패치: `node_modules/webpack/lib/css/CssGenerator.js` 파일에서 `_generateImportExpressions` 내부의 `const depModule = moduleGraph.getModule(dep);` 바로 다음에 `if (!depModule) continue;`를 추가합니다 (`patch-package`를 사용하여 패치를 유지합니다). 3) 대안적인 우회 방법: 해당 스타일시트에 대한 `IgnorePlugin`/`resolve.alias: false` 항목을 제거하여 CSS 파일을 무시하지 않도록 하거나, 이 크래시는 `exportType: "style"`에서만 발생하므로 가능한 경우 규칙을 `exportType: "css-style-sheet"` / `"link"`로 전환합니다.

webpack

개요

README 미리보기

FAQ (5)

同类型项目

hermes-agent

firecrawl

go

markitdown