From e641a25f4ac05cba860ef325d5930aec92c76752 Mon Sep 17 00:00:00 2001 From: jiwoo0629 <90768869+jiwoo0629@users.noreply.github.com> Date: Sun, 10 Oct 2021 21:39:00 +0900 Subject: [PATCH 01/15] Translate plugin/process-plugin.mdx --- src/content/plugins/progress-plugin.mdx | 46 +++++++++++++------------ 1 file changed, 24 insertions(+), 22 deletions(-) diff --git a/src/content/plugins/progress-plugin.mdx b/src/content/plugins/progress-plugin.mdx index 5a35b7e645e..83d0fd94b2d 100644 --- a/src/content/plugins/progress-plugin.mdx +++ b/src/content/plugins/progress-plugin.mdx @@ -6,25 +6,27 @@ contributors: - EugeneHlushko - byzyk - smelukov +translators: + - jiwoo0629 --- `object = { boolean activeModules = true, boolean entries = false, function (number percentage, string message, [string] ...args) handler, boolean modules = true, number modulesCount = 500, boolean profile = false }` `function (number percentage, string message, [string] ...args)` -The `ProgressPlugin` provides a way to customize how progress is reported during a compilation. +`ProgressPlugin`은 컴파일 도중에 진행 상황을 보고받을 방법을 자신이 원하는대로 정하는 방법을 제공합니다. ## Usage -Create an instance of `ProgressPlugin` and provide one of the allowed params. +`ProgressPlugin`의 인스턴스를 만들고, 허용되는 여러 매개변수 중 하나를 제공합니다. ### Providing `function` -Provide a handler function which will be called when hooks report progress. `handler` function arguments: +훅이 진행 상황을 보고할 때 호출될 handler 함수를 제공합니다. 함수 `handler`의 실행 인자: -- `percentage`: a number between 0 and 1 indicating the completion percentage of the compilation -- `message`: a short description of the currently-executing hook -- `...args`: zero or more additional strings describing the current progress +- `percentage`: 컴파일의 성공 확률을 나타내는 0과 1 사이의 숫자 +- `message`: 현재 실행중인 훅에 대한 짧은 설명 +- `...args`: 현재 실행 상황을 묘사하는 0개 이상의 추가적인 문자열 ```js const handler = (percentage, message, ...args) => { @@ -37,17 +39,17 @@ new webpack.ProgressPlugin(handler); ### Providing `object` -When providing an `object` to the `ProgressPlugin`, following properties are supported: +`ProgressPlugin`에 `object`를 제공할 때, 다음의 속성이 지원됩니다 -- `activeModules` (`boolean = false`): Shows active modules count and one active module in progress message. -- `entries` (`boolean = true`): Shows entries count in progress message. -- `handler` (See [Providing function](#providing-function)) -- `modules` (`boolean = true`): Shows modules count in progress message. -- `modulesCount` (`number = 5000`): A minimum modules count to start with. Takes effect when `modules` property is enabled. -- `profile` (`boolean = false`): Tells `ProgressPlugin` to collect profile data for progress steps. -- `dependencies` (`boolean = true`): Shows the count of dependencies in progress message. -- `dependenciesCount` (`number = 10000`): A minimum dependencies count to start with. Takes effect when `dependencies` property is enabled. -- `percentBy` (`string = null: 'entries' | 'dependencies' | 'modules' | null`): Tells `ProgressPlugin` how to calculate progress percentage. +- `activeModules` (`boolean = false`): 활성화된 모듈의 수와 활성화된 모듈 하나를 진행 메세지로 보여줍니다. +- `entries` (`boolean = true`): entries 수를 진행 메세지로 보여줍니다. +- `handler` ([Providing function](#providing-function)을 보세요) +- `modules` (`boolean = true`): modules 수를 진행 메세지로 보여줍니다. +- `modulesCount` (`number = 5000`): 시작할 modules 수의 최솟값이며 `modules` 속성이 활성화되면 적용됩니다. +- `profile` (`boolean = false`): 진행 단계의 프로필 정보를 수집하도록 `ProgressPlugin`에게 알려줍니다. +- `dependencies` (`boolean = true`): dependencies 수를 진행 메세지로 보여줍니다. +- `dependenciesCount` (`number = 10000`): 시작할 dependencies 수의 최솟값이며 `dependencies` 속성이 활성화되면 적용됩니다. +- `percentBy` (`string = null: 'entries' | 'dependencies' | 'modules' | null`): 진행률을 계산할 방법을 `ProgressPlugin`에게 알려줍니다. ```js new webpack.ProgressPlugin({ @@ -67,19 +69,19 @@ new webpack.ProgressPlugin({ ## Percentage calculation -By default, progress percentage is calculated based on built modules count and total modules count: `built / total` +기본적으로 진행률은 빌드된 modules 수와 총 modules 수를 기반으로 계산됩니다: `built / total` -The total modules count is unknown in advance and changes during the build. This may cause inaccurate progress percentage. +총 modules 수는 사전에는 알 수 없고 빌드를 거치면서 변합니다. 이는 부정확한 진행률을 야기할 수 있습니다. -To solve this problem `ProgressPlugin` caches the last known total modules count and reuses this value on the next build. The first build will warm the cache but the following builds will use and update this value. +이러한 문제를 해결하기 위해 `ProgressPlugin`은 마지막으로 알려진 총 modules 수를 캐시하여 이 값을 다음 빌드 때 재사용합니다. 첫번째 빌드는 데이터 값을 메모리에 캐시하지만 그 다음 빌드들은 이 값을 사용하고 업데이트합니다. -> We recommend using `percentBy: 'entries'` setting for projects with [multiple configured entry points](/configuration/entry-context/#entry). Percentage calculation will become more accurate because the amount of entry points is known in advance. +> [multiple configured entry points](/configuration/entry-context/#entry)가 있는 프로젝트들을 위한 설정에는 `percentBy: 'entries'`를 사용할 것을 추천합니다. 진입점의 양이 사전에 알려져 있기 때문에 확률 계산은 더욱 정확해질 것입니다. ## Supported Hooks -The following hooks report progress information to `ProgressPlugin`. +다음 훅은 `ProgressPlugin`에 진행 정보를 보고합니다. -T> _Hooks marked with \* allow plugins to report progress information using `reportProgress`. For more, see [Plugin API: Reporting Progress](/api/plugins/#reporting-progress)_ +T> _\* 표시된 훅은 plugin이 `reportProgress`를 이용하여 진행 정보를 보고하도록 허용합니다. 자세한 내용은 [Plugin API: Reporting Progress](/api/plugins/#reporting-progress)를 참고하세요._ **Compiler** From 8fcdb161ece2a5db3a165dcf73c027c7395ab708 Mon Sep 17 00:00:00 2001 From: jiwoo0629 <90768869+jiwoo0629@users.noreply.github.com> Date: Sun, 10 Oct 2021 22:14:21 +0900 Subject: [PATCH 02/15] Translate plugin/progress-plugin.mdx MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit commit한 글의 이름이 process로 잘못되어 있어 수정합니다. --- src/content/plugins/progress-plugin.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/plugins/progress-plugin.mdx b/src/content/plugins/progress-plugin.mdx index 83d0fd94b2d..90db43dce15 100644 --- a/src/content/plugins/progress-plugin.mdx +++ b/src/content/plugins/progress-plugin.mdx @@ -7,7 +7,7 @@ contributors: - byzyk - smelukov translators: - - jiwoo0629 + - jiwoo0629 --- `object = { boolean activeModules = true, boolean entries = false, function (number percentage, string message, [string] ...args) handler, boolean modules = true, number modulesCount = 500, boolean profile = false }` From 05b9eec080db32d96ac97325c9a1402b2e0d8209 Mon Sep 17 00:00:00 2001 From: jiwoo0629 <90768869+jiwoo0629@users.noreply.github.com> Date: Tue, 12 Oct 2021 14:15:16 +0900 Subject: [PATCH 03/15] =?UTF-8?q?entry=20points=20->=20=EC=97=94=ED=8A=B8?= =?UTF-8?q?=EB=A6=AC=20=ED=8F=AC=EC=9D=B8=ED=8A=B8=EB=A1=9C=20=EC=88=98?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit entry points -> 엔트리 포인트로 수정했습니다. --- src/content/plugins/progress-plugin.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/plugins/progress-plugin.mdx b/src/content/plugins/progress-plugin.mdx index 90db43dce15..c1a15a3da42 100644 --- a/src/content/plugins/progress-plugin.mdx +++ b/src/content/plugins/progress-plugin.mdx @@ -75,7 +75,7 @@ new webpack.ProgressPlugin({ 이러한 문제를 해결하기 위해 `ProgressPlugin`은 마지막으로 알려진 총 modules 수를 캐시하여 이 값을 다음 빌드 때 재사용합니다. 첫번째 빌드는 데이터 값을 메모리에 캐시하지만 그 다음 빌드들은 이 값을 사용하고 업데이트합니다. -> [multiple configured entry points](/configuration/entry-context/#entry)가 있는 프로젝트들을 위한 설정에는 `percentBy: 'entries'`를 사용할 것을 추천합니다. 진입점의 양이 사전에 알려져 있기 때문에 확률 계산은 더욱 정확해질 것입니다. +> [multiple configured 엔트리 포인트](/configuration/entry-context/#entry)가 있는 프로젝트들을 위한 설정에는 `percentBy: 'entries'`를 사용할 것을 추천합니다. 진입점의 양이 사전에 알려져 있기 때문에 확률 계산은 더욱 정확해질 것입니다. ## Supported Hooks From 2a570e294badf5995a43827fd8c9e81bb723f57a Mon Sep 17 00:00:00 2001 From: jiwoo0629 <90768869+jiwoo0629@users.noreply.github.com> Date: Tue, 12 Oct 2021 17:18:27 +0900 Subject: [PATCH 04/15] =?UTF-8?q?modules=20->=20=EB=AA=A8=EB=93=88=20?= =?UTF-8?q?=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit line 47의 modules를 모듈로 변경했습니다 --- src/content/plugins/progress-plugin.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/plugins/progress-plugin.mdx b/src/content/plugins/progress-plugin.mdx index c1a15a3da42..3d9d4c63d89 100644 --- a/src/content/plugins/progress-plugin.mdx +++ b/src/content/plugins/progress-plugin.mdx @@ -44,7 +44,7 @@ new webpack.ProgressPlugin(handler); - `activeModules` (`boolean = false`): 활성화된 모듈의 수와 활성화된 모듈 하나를 진행 메세지로 보여줍니다. - `entries` (`boolean = true`): entries 수를 진행 메세지로 보여줍니다. - `handler` ([Providing function](#providing-function)을 보세요) -- `modules` (`boolean = true`): modules 수를 진행 메세지로 보여줍니다. +- `modules` (`boolean = true`): 모듈 수를 진행 메세지로 보여줍니다. - `modulesCount` (`number = 5000`): 시작할 modules 수의 최솟값이며 `modules` 속성이 활성화되면 적용됩니다. - `profile` (`boolean = false`): 진행 단계의 프로필 정보를 수집하도록 `ProgressPlugin`에게 알려줍니다. - `dependencies` (`boolean = true`): dependencies 수를 진행 메세지로 보여줍니다. From 621d5ef6fc0672f2b7fe04b9ba24bce4a4875910 Mon Sep 17 00:00:00 2001 From: jiwoo0629 <90768869+jiwoo0629@users.noreply.github.com> Date: Tue, 12 Oct 2021 17:22:57 +0900 Subject: [PATCH 05/15] =?UTF-8?q?modules=20->=20=EB=AA=A8=EB=93=88=20?= =?UTF-8?q?=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 함수 이름을 제외한 modules -> 모듈 변경 --- src/content/plugins/progress-plugin.mdx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/content/plugins/progress-plugin.mdx b/src/content/plugins/progress-plugin.mdx index 3d9d4c63d89..423e9989019 100644 --- a/src/content/plugins/progress-plugin.mdx +++ b/src/content/plugins/progress-plugin.mdx @@ -45,7 +45,7 @@ new webpack.ProgressPlugin(handler); - `entries` (`boolean = true`): entries 수를 진행 메세지로 보여줍니다. - `handler` ([Providing function](#providing-function)을 보세요) - `modules` (`boolean = true`): 모듈 수를 진행 메세지로 보여줍니다. -- `modulesCount` (`number = 5000`): 시작할 modules 수의 최솟값이며 `modules` 속성이 활성화되면 적용됩니다. +- `modulesCount` (`number = 5000`): 시작할 모듈 수의 최솟값이며 `modules` 속성이 활성화되면 적용됩니다. - `profile` (`boolean = false`): 진행 단계의 프로필 정보를 수집하도록 `ProgressPlugin`에게 알려줍니다. - `dependencies` (`boolean = true`): dependencies 수를 진행 메세지로 보여줍니다. - `dependenciesCount` (`number = 10000`): 시작할 dependencies 수의 최솟값이며 `dependencies` 속성이 활성화되면 적용됩니다. @@ -69,11 +69,11 @@ new webpack.ProgressPlugin({ ## Percentage calculation -기본적으로 진행률은 빌드된 modules 수와 총 modules 수를 기반으로 계산됩니다: `built / total` +기본적으로 진행률은 빌드된 모듈 수와 총 모듈 수를 기반으로 계산됩니다: `built / total` -총 modules 수는 사전에는 알 수 없고 빌드를 거치면서 변합니다. 이는 부정확한 진행률을 야기할 수 있습니다. +총 모듈 수는 사전에는 알 수 없고 빌드를 거치면서 변합니다. 이는 부정확한 진행률을 야기할 수 있습니다. -이러한 문제를 해결하기 위해 `ProgressPlugin`은 마지막으로 알려진 총 modules 수를 캐시하여 이 값을 다음 빌드 때 재사용합니다. 첫번째 빌드는 데이터 값을 메모리에 캐시하지만 그 다음 빌드들은 이 값을 사용하고 업데이트합니다. +이러한 문제를 해결하기 위해 `ProgressPlugin`은 마지막으로 알려진 총 모듈 수를 캐시하여 이 값을 다음 빌드 때 재사용합니다. 첫번째 빌드는 데이터 값을 메모리에 캐시하지만 그 다음 빌드들은 이 값을 사용하고 업데이트합니다. > [multiple configured 엔트리 포인트](/configuration/entry-context/#entry)가 있는 프로젝트들을 위한 설정에는 `percentBy: 'entries'`를 사용할 것을 추천합니다. 진입점의 양이 사전에 알려져 있기 때문에 확률 계산은 더욱 정확해질 것입니다. From 317156fa7120a4d0e53885f88bd042b5599c60ba Mon Sep 17 00:00:00 2001 From: jiwoo0629 <90768869+jiwoo0629@users.noreply.github.com> Date: Tue, 12 Oct 2021 17:37:19 +0900 Subject: [PATCH 06/15] =?UTF-8?q?=EB=82=B4=EC=9A=A9=20=EC=88=98=EC=A0=95?= =?UTF-8?q?=20=EB=B0=8F=20=EB=B2=88=EC=97=AD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit line 33 : entries -> 엔트리 변경 dependencies -> 종속성 변경 코드 예제 내 주석 변역 완료 --- src/content/plugins/progress-plugin.mdx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/content/plugins/progress-plugin.mdx b/src/content/plugins/progress-plugin.mdx index 423e9989019..0b92562e8b0 100644 --- a/src/content/plugins/progress-plugin.mdx +++ b/src/content/plugins/progress-plugin.mdx @@ -30,7 +30,7 @@ translators: ```js const handler = (percentage, message, ...args) => { - // e.g. Output each progress message directly to the console: + // 예를 들어, 각 진행 메세지를 콘솔에 직접 출력 console.info(percentage, message, ...args); }; @@ -42,13 +42,13 @@ new webpack.ProgressPlugin(handler); `ProgressPlugin`에 `object`를 제공할 때, 다음의 속성이 지원됩니다 - `activeModules` (`boolean = false`): 활성화된 모듈의 수와 활성화된 모듈 하나를 진행 메세지로 보여줍니다. -- `entries` (`boolean = true`): entries 수를 진행 메세지로 보여줍니다. +- `entries` (`boolean = true`): 엔트리 수를 진행 메세지로 보여줍니다. - `handler` ([Providing function](#providing-function)을 보세요) - `modules` (`boolean = true`): 모듈 수를 진행 메세지로 보여줍니다. - `modulesCount` (`number = 5000`): 시작할 모듈 수의 최솟값이며 `modules` 속성이 활성화되면 적용됩니다. - `profile` (`boolean = false`): 진행 단계의 프로필 정보를 수집하도록 `ProgressPlugin`에게 알려줍니다. -- `dependencies` (`boolean = true`): dependencies 수를 진행 메세지로 보여줍니다. -- `dependenciesCount` (`number = 10000`): 시작할 dependencies 수의 최솟값이며 `dependencies` 속성이 활성화되면 적용됩니다. +- `dependencies` (`boolean = true`): 종속성 수를 진행 메세지로 보여줍니다. +- `dependenciesCount` (`number = 10000`): 시작할 종속성 수의 최솟값이며 `dependencies` 속성이 활성화되면 적용됩니다. - `percentBy` (`string = null: 'entries' | 'dependencies' | 'modules' | null`): 진행률을 계산할 방법을 `ProgressPlugin`에게 알려줍니다. ```js @@ -56,7 +56,7 @@ new webpack.ProgressPlugin({ activeModules: false, entries: true, handler(percentage, message, ...args) { - // custom logic + // 사용자 지정 논리 }, modules: true, modulesCount: 5000, From eee52edb46fd8d9ab0e61da41e14074e66439328 Mon Sep 17 00:00:00 2001 From: jiwoo0629 <90768869+jiwoo0629@users.noreply.github.com> Date: Tue, 12 Oct 2021 17:46:31 +0900 Subject: [PATCH 07/15] =?UTF-8?q?=EB=85=BC=EB=A6=AC=20->=20=EB=A1=9C?= =?UTF-8?q?=EC=A7=81=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 논리 -> 로직 변경 --- src/content/plugins/progress-plugin.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/plugins/progress-plugin.mdx b/src/content/plugins/progress-plugin.mdx index 0b92562e8b0..83acdf5b7e1 100644 --- a/src/content/plugins/progress-plugin.mdx +++ b/src/content/plugins/progress-plugin.mdx @@ -56,7 +56,7 @@ new webpack.ProgressPlugin({ activeModules: false, entries: true, handler(percentage, message, ...args) { - // 사용자 지정 논리 + // 사용자 지정 로직 }, modules: true, modulesCount: 5000, From 362a1172d4997bf78c146a6501451a0bd97268db Mon Sep 17 00:00:00 2001 From: jiwoo0629 <90768869+jiwoo0629@users.noreply.github.com> Date: Thu, 14 Oct 2021 12:45:31 +0900 Subject: [PATCH 08/15] =?UTF-8?q?=EC=A7=84=EC=9E=85=EC=A0=90=20->=20?= =?UTF-8?q?=EC=97=94=ED=8A=B8=EB=A6=AC=20=ED=8F=AC=EC=9D=B8=ED=8A=B8=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 진입점-> 엔트리 포인트로 수정하고 이에 따라 line 78의 번역을 수정했습니다. 또 해당 줄의 multiple configured -> 다중 구성된 번역을 진행했습니다. --- src/content/plugins/progress-plugin.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/plugins/progress-plugin.mdx b/src/content/plugins/progress-plugin.mdx index 83acdf5b7e1..b64423f3def 100644 --- a/src/content/plugins/progress-plugin.mdx +++ b/src/content/plugins/progress-plugin.mdx @@ -75,7 +75,7 @@ new webpack.ProgressPlugin({ 이러한 문제를 해결하기 위해 `ProgressPlugin`은 마지막으로 알려진 총 모듈 수를 캐시하여 이 값을 다음 빌드 때 재사용합니다. 첫번째 빌드는 데이터 값을 메모리에 캐시하지만 그 다음 빌드들은 이 값을 사용하고 업데이트합니다. -> [multiple configured 엔트리 포인트](/configuration/entry-context/#entry)가 있는 프로젝트들을 위한 설정에는 `percentBy: 'entries'`를 사용할 것을 추천합니다. 진입점의 양이 사전에 알려져 있기 때문에 확률 계산은 더욱 정확해질 것입니다. +> [다중 구성된 엔트리 포인트](/configuration/entry-context/#entry)가 있는 프로젝트들을 위한 설정에는 `percentBy: 'entries'`를 사용할 것을 추천합니다. 엔트리 포인트의 개수를 미리 알 수 있기 때문에 확률 계산은 더욱 정확해질 것입니다. ## Supported Hooks From 94b1eaaf6c376fa4ed70e4b7e37ea7d4f16d2731 Mon Sep 17 00:00:00 2001 From: jiwoo0629 <90768869+jiwoo0629@users.noreply.github.com> Date: Thu, 28 Oct 2021 21:14:38 +0900 Subject: [PATCH 09/15] =?UTF-8?q?module-concatenation-plugin.mdx=20?= =?UTF-8?q?=EB=B2=88=EC=97=AD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit module-concatenation-plugin.mdx 번역 --- .../plugins/module-concatenation-plugin.mdx | 40 +++++++++---------- 1 file changed, 20 insertions(+), 20 deletions(-) diff --git a/src/content/plugins/module-concatenation-plugin.mdx b/src/content/plugins/module-concatenation-plugin.mdx index c1d09b27986..2c63adb2c7d 100644 --- a/src/content/plugins/module-concatenation-plugin.mdx +++ b/src/content/plugins/module-concatenation-plugin.mdx @@ -7,40 +7,40 @@ contributors: - byzyk --- -In the past, one of webpack’s trade-offs when bundling was that each module in your bundle would be wrapped in individual function closures. These wrapper functions made it slower for your JavaScript to execute in the browser. In comparison, tools like Closure Compiler and RollupJS ‘hoist’ or concatenate the scope of all your modules into one closure and allow for your code to have a faster execution time in the browser. +과거에 번들링을 할 때 webpack의 절충점 중 하나는 번들의 각 모듈이 개별 함수 클로저에 의해 래핑된다는 점이었습니다. 이러한 래퍼 함수는 브라우저에서 자바스크립트의 실행을 느리게 만들었습니다. 이와 달리, Closure Comiler와 RollupJS와 같은 도구는 모든 모듈을 하나의 클로저로 호이스팅 하거나 연결하여 코드가 브라우저에서 더 빠른 실행 시간을 갖게 했습니다. -This plugin will enable the same concatenation behavior in webpack. By default this plugin is already enabled in [production `mode`](/configuration/mode/#mode-production) and disabled otherwise. If you need to override the production `mode` optimization, set the [`optimization.concatenateModules` option](/configuration/optimization/#optimizationconcatenatemodules) to `false`. To enable concatenation behavior in other modes, you can add `ModuleConcatenationPlugin` manually or use the `optimization.concatenateModules` option: +이 플러그인은 위의 내용과 같은 연결 동작이 webpack에서 가능하게 해줍니다. 기본적으로 이 플러그인은 [production `mode`](/configuration/mode/#mode-production)에서는 이미 가능하고 나머지에서는 아직 가능하지 않습니다. 만약 생산 `mode` 최적화를 무효로 해야 하는 경우, [`optimization.concatenateModules` option](/configuration/optimization/#optimizationconcatenatemodules)을 `false`로 설정하세요. 다른 모드에서 연결 동작을 가능하게 하고 싶을 경우, `ModuleConcatenationPlugin`을 수동으로 설정하거나 `optimization.concatenateModules` 옵션을 사용하세요: ```js new webpack.optimize.ModuleConcatenationPlugin(); ``` -> This concatenation behavior is called “scope hoisting.” -> -> Scope hoisting is specifically a feature made possible by ECMAScript Module syntax. Because of this webpack may fallback to normal bundling based on what kind of modules you are using, and [other conditions](https://medium.com/webpack/webpack-freelancing-log-book-week-5-7-4764be3266f5). +> 이 연결 동작은 “scope hoisting” 이라고 불립니다. +> Scope hoisting은 특별히 ECMAScript Module 문법에 맞게 만들어진 형태입니다. 이로 인해 webpack은 현재 사용 중인 모듈의 종류와 [다른 여러 조건](https://medium.com/webpack/webpack-freelancing-log-book-week-5-7-4764be3266f5)에 따라 평범한 번들링으로 퇴화할 수도 있습니다. -W> Keep in mind that this plugin will only be applied to [ES6 modules](/api/module-methods/#es6-recommended) processed directly by webpack. When using a transpiler, you'll need to disable module processing (e.g. the [`modules`](https://babeljs.io/docs/en/babel-preset-env#modules) option in Babel). +W> 이 플러그인은 webpack에서 직접 처리되는 [ES6 modules](/api/module-methods/#es6-recommended)에만 적용된 다는 점을 명심하세요. 트랜스파일러를 사용할 경우 모듈 처리를 비활성화해야 합니다. (예) Babel의 [`modules`] (https://babeljs.io/docs/en/babel-preset-env#modules) 옵션 ## Optimization Bailouts -As the article explains, webpack attempts to achieve partial scope hoisting. It will merge modules into a single scope but cannot do so in every case. If webpack cannot merge a module, the two alternatives are Prevent and Root. Prevent means the module must be in its own scope. Root means a new module group will be created. The following conditions determine the outcome: +기사에서 설명하듯이 webpack은 부분적인 Scope hoisting을 시도합니다. 이는 모듈을 하나의 범위로 합치지만 모든 경우에 합치지는 못할 것입니다. 만약 webapck이 모듈을 합칠 수 없을 경우, 두 가지 대안은 Prevent와 Root 입니다. Prevent는 모듈이 반드시 그 자신의 범위 안에 있어야 한다는 것을 의미합니다. Root는 새로운 모듈 그룹이 생성될 것이라는 의미입니다. 다음의 조건이 결과를 결정합니다: -| Condition | Outcome | -| --------------------------------------------- | ------- | -| Non ES6 Module | Prevent | -| Imported By Non Import | Root | -| Imported From Other Chunk | Root | -| Imported By Multiple Other Module Groups | Root | -| Imported With `import()` | Root | -| Affected By `ProvidePlugin` Or Using `module` | Prevent | -| HMR Accepted | Root | -| Using `eval()` | Prevent | -| In Multiple Chunks | Prevent | -| `export * from "cjs-module"` | Prevent | +| Condition | Outcome | +| --------------------------------------------- | ------- | +| Non ES6 Module | Prevent | +| Non Import로 가져옴 | Root | +| 다른 청크에서 가져옴 | Root | +| 다수의 다른 모듈 그룹에서 가져옴 | Root | +| `import()`로 가져옴 | Root | +| `ProvidePlugin`의 영향을 받거나 `module` 사용 | Prevent | +| HMR 허용 | Root | +| `eval()` 사용 | Prevent | +| 다수의 청크 | Prevent | +| "cjs-module"로부터 * 내보내기 | Prevent | ### Module Grouping Algorithm The following pseudo JavaScript explains the algorithm: +아래의 의사 자바스크립트는 이 알고리즘을 설명합니다: ```js modules.forEach((module) => { @@ -84,7 +84,7 @@ function tryToAdd(group, module) { ### Debugging Optimization Bailouts -When using the webpack CLI, the `--display-optimization-bailout` flag will display bailout reasons. When using the webpack config, add the following to the `stats` object: +webpack CLI를 사용할 경우 `--display-optimization-bailout` 플래그는 bailout 원인을 보여줍니다. webpack config를 사용할 경우 `stats` 객체에 다음을 추가하세요: ```js module.exports = { From f4666fd4e555e612931fe3982ed3db5931d01559 Mon Sep 17 00:00:00 2001 From: jiwoo0629 <90768869+jiwoo0629@users.noreply.github.com> Date: Thu, 28 Oct 2021 21:20:43 +0900 Subject: [PATCH 10/15] =?UTF-8?q?translator=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit translator 추가했습니다. --- src/content/plugins/module-concatenation-plugin.mdx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/content/plugins/module-concatenation-plugin.mdx b/src/content/plugins/module-concatenation-plugin.mdx index 2c63adb2c7d..23b669af71e 100644 --- a/src/content/plugins/module-concatenation-plugin.mdx +++ b/src/content/plugins/module-concatenation-plugin.mdx @@ -5,6 +5,8 @@ contributors: - skipjack - TheLarkInn - byzyk +translators: + - jiwoo0629 --- 과거에 번들링을 할 때 webpack의 절충점 중 하나는 번들의 각 모듈이 개별 함수 클로저에 의해 래핑된다는 점이었습니다. 이러한 래퍼 함수는 브라우저에서 자바스크립트의 실행을 느리게 만들었습니다. 이와 달리, Closure Comiler와 RollupJS와 같은 도구는 모든 모듈을 하나의 클로저로 호이스팅 하거나 연결하여 코드가 브라우저에서 더 빠른 실행 시간을 갖게 했습니다. From cbcc5629cc75c62789a7f78299c78bbc070184b3 Mon Sep 17 00:00:00 2001 From: jiwoo0629 <90768869+jiwoo0629@users.noreply.github.com> Date: Thu, 28 Oct 2021 21:32:41 +0900 Subject: [PATCH 11/15] =?UTF-8?q?=EC=96=B8=EC=96=B4=20=EB=B2=88=EC=97=AD?= =?UTF-8?q?=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit option -> 옵션 수정 scope hoisting -> 범위 호이스팅 --- src/content/plugins/module-concatenation-plugin.mdx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/content/plugins/module-concatenation-plugin.mdx b/src/content/plugins/module-concatenation-plugin.mdx index 23b669af71e..5e8326656a5 100644 --- a/src/content/plugins/module-concatenation-plugin.mdx +++ b/src/content/plugins/module-concatenation-plugin.mdx @@ -11,20 +11,20 @@ translators: 과거에 번들링을 할 때 webpack의 절충점 중 하나는 번들의 각 모듈이 개별 함수 클로저에 의해 래핑된다는 점이었습니다. 이러한 래퍼 함수는 브라우저에서 자바스크립트의 실행을 느리게 만들었습니다. 이와 달리, Closure Comiler와 RollupJS와 같은 도구는 모든 모듈을 하나의 클로저로 호이스팅 하거나 연결하여 코드가 브라우저에서 더 빠른 실행 시간을 갖게 했습니다. -이 플러그인은 위의 내용과 같은 연결 동작이 webpack에서 가능하게 해줍니다. 기본적으로 이 플러그인은 [production `mode`](/configuration/mode/#mode-production)에서는 이미 가능하고 나머지에서는 아직 가능하지 않습니다. 만약 생산 `mode` 최적화를 무효로 해야 하는 경우, [`optimization.concatenateModules` option](/configuration/optimization/#optimizationconcatenatemodules)을 `false`로 설정하세요. 다른 모드에서 연결 동작을 가능하게 하고 싶을 경우, `ModuleConcatenationPlugin`을 수동으로 설정하거나 `optimization.concatenateModules` 옵션을 사용하세요: +이 플러그인은 위의 내용과 같은 연결 동작이 webpack에서 가능하게 해줍니다. 기본적으로 이 플러그인은 [production `mode`](/configuration/mode/#mode-production)에서는 이미 가능하고 나머지에서는 아직 가능하지 않습니다. 만약 생산 `mode` 최적화를 무효로 해야 하는 경우, [`optimization.concatenateModules` 옵션](/configuration/optimization/#optimizationconcatenatemodules)을 `false`로 설정하세요. 다른 모드에서 연결 동작을 가능하게 하고 싶을 경우, `ModuleConcatenationPlugin`을 수동으로 설정하거나 `optimization.concatenateModules` 옵션을 사용하세요: ```js new webpack.optimize.ModuleConcatenationPlugin(); ``` -> 이 연결 동작은 “scope hoisting” 이라고 불립니다. -> Scope hoisting은 특별히 ECMAScript Module 문법에 맞게 만들어진 형태입니다. 이로 인해 webpack은 현재 사용 중인 모듈의 종류와 [다른 여러 조건](https://medium.com/webpack/webpack-freelancing-log-book-week-5-7-4764be3266f5)에 따라 평범한 번들링으로 퇴화할 수도 있습니다. +> 이 연결 동작은 “범위 호이스팅” 이라고 불립니다. +> 범위 호이스팅은 특별히 ECMAScript Module 문법에서 사용 가능하도록 만들어진 형태입니다. 이로 인해 webpack은 현재 사용 중인 모듈의 종류와 [다른 여러 조건](https://medium.com/webpack/webpack-freelancing-log-book-week-5-7-4764be3266f5)에 따라 평범한 번들링으로 퇴화할 수도 있습니다. W> 이 플러그인은 webpack에서 직접 처리되는 [ES6 modules](/api/module-methods/#es6-recommended)에만 적용된 다는 점을 명심하세요. 트랜스파일러를 사용할 경우 모듈 처리를 비활성화해야 합니다. (예) Babel의 [`modules`] (https://babeljs.io/docs/en/babel-preset-env#modules) 옵션 ## Optimization Bailouts -기사에서 설명하듯이 webpack은 부분적인 Scope hoisting을 시도합니다. 이는 모듈을 하나의 범위로 합치지만 모든 경우에 합치지는 못할 것입니다. 만약 webapck이 모듈을 합칠 수 없을 경우, 두 가지 대안은 Prevent와 Root 입니다. Prevent는 모듈이 반드시 그 자신의 범위 안에 있어야 한다는 것을 의미합니다. Root는 새로운 모듈 그룹이 생성될 것이라는 의미입니다. 다음의 조건이 결과를 결정합니다: +기사에서 설명하듯이 webpack은 부분적인 범위 호이스팅을 시도합니다. 이는 모듈을 하나의 범위로 합치지만 모든 경우에 합치지는 못합니다. 만약 webapck이 모듈을 합칠 수 없다면 두 가지 대안은 Prevent와 Root 입니다. Prevent는 모듈이 반드시 그 자신의 범위 안에 있어야 한다는 것을 의미합니다. Root는 새로운 모듈 그룹이 생성될 것이라는 의미입니다. 다음의 조건이 결과를 결정합니다: | Condition | Outcome | | --------------------------------------------- | ------- | @@ -86,7 +86,7 @@ function tryToAdd(group, module) { ### Debugging Optimization Bailouts -webpack CLI를 사용할 경우 `--display-optimization-bailout` 플래그는 bailout 원인을 보여줍니다. webpack config를 사용할 경우 `stats` 객체에 다음을 추가하세요: +webpack CLI를 사용할 경우 `--display-optimization-bailout` 플래그는 bailout 원인을 보여줍니다. webpack config를 사용할 경우 `stats` 객체에 다음을 추가하세요. ```js module.exports = { From 5db7b5d3a02920e48afa0e6c554f528712fffb12 Mon Sep 17 00:00:00 2001 From: jiwoo0629 <90768869+jiwoo0629@users.noreply.github.com> Date: Thu, 28 Oct 2021 22:26:44 +0900 Subject: [PATCH 12/15] =?UTF-8?q?conflict=20=ED=95=B4=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit conflict 해결 --- src/content/plugins/progress-plugin.mdx | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/src/content/plugins/progress-plugin.mdx b/src/content/plugins/progress-plugin.mdx index b64423f3def..dcffaaf321b 100644 --- a/src/content/plugins/progress-plugin.mdx +++ b/src/content/plugins/progress-plugin.mdx @@ -10,10 +10,6 @@ translators: - jiwoo0629 --- -`object = { boolean activeModules = true, boolean entries = false, function (number percentage, string message, [string] ...args) handler, boolean modules = true, number modulesCount = 500, boolean profile = false }` - -`function (number percentage, string message, [string] ...args)` - `ProgressPlugin`은 컴파일 도중에 진행 상황을 보고받을 방법을 자신이 원하는대로 정하는 방법을 제공합니다. ## Usage @@ -73,7 +69,7 @@ new webpack.ProgressPlugin({ 총 모듈 수는 사전에는 알 수 없고 빌드를 거치면서 변합니다. 이는 부정확한 진행률을 야기할 수 있습니다. -이러한 문제를 해결하기 위해 `ProgressPlugin`은 마지막으로 알려진 총 모듈 수를 캐시하여 이 값을 다음 빌드 때 재사용합니다. 첫번째 빌드는 데이터 값을 메모리에 캐시하지만 그 다음 빌드들은 이 값을 사용하고 업데이트합니다. +이러한 문제를 해결하기 위해 `ProgressPlugin`은 마지막으로 알려진 총 모듈 수를 캐시하여 이 값을 다음 빌드 때 재사용합니다. 첫 번째 빌드는 데이터 값을 메모리에 캐시하지만 그 다음 빌드들은 이 값을 사용하고 업데이트합니다. > [다중 구성된 엔트리 포인트](/configuration/entry-context/#entry)가 있는 프로젝트들을 위한 설정에는 `percentBy: 'entries'`를 사용할 것을 추천합니다. 엔트리 포인트의 개수를 미리 알 수 있기 때문에 확률 계산은 더욱 정확해질 것입니다. From 87726a40df642ad30e663d5055b28e4837a3fdcc Mon Sep 17 00:00:00 2001 From: jiwoo0629 <90768869+jiwoo0629@users.noreply.github.com> Date: Fri, 29 Oct 2021 00:35:31 +0900 Subject: [PATCH 13/15] =?UTF-8?q?:=20->=20.=EC=9C=BC=EB=A1=9C=20=EB=B3=80?= =?UTF-8?q?=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit : -> .으로 변경 --- src/content/plugins/module-concatenation-plugin.mdx | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/src/content/plugins/module-concatenation-plugin.mdx b/src/content/plugins/module-concatenation-plugin.mdx index 5e8326656a5..bc80897db00 100644 --- a/src/content/plugins/module-concatenation-plugin.mdx +++ b/src/content/plugins/module-concatenation-plugin.mdx @@ -11,7 +11,7 @@ translators: 과거에 번들링을 할 때 webpack의 절충점 중 하나는 번들의 각 모듈이 개별 함수 클로저에 의해 래핑된다는 점이었습니다. 이러한 래퍼 함수는 브라우저에서 자바스크립트의 실행을 느리게 만들었습니다. 이와 달리, Closure Comiler와 RollupJS와 같은 도구는 모든 모듈을 하나의 클로저로 호이스팅 하거나 연결하여 코드가 브라우저에서 더 빠른 실행 시간을 갖게 했습니다. -이 플러그인은 위의 내용과 같은 연결 동작이 webpack에서 가능하게 해줍니다. 기본적으로 이 플러그인은 [production `mode`](/configuration/mode/#mode-production)에서는 이미 가능하고 나머지에서는 아직 가능하지 않습니다. 만약 생산 `mode` 최적화를 무효로 해야 하는 경우, [`optimization.concatenateModules` 옵션](/configuration/optimization/#optimizationconcatenatemodules)을 `false`로 설정하세요. 다른 모드에서 연결 동작을 가능하게 하고 싶을 경우, `ModuleConcatenationPlugin`을 수동으로 설정하거나 `optimization.concatenateModules` 옵션을 사용하세요: +이 플러그인은 위의 내용과 같은 연결 동작이 webpack에서 가능하게 해줍니다. 기본적으로 이 플러그인은 [production `mode`](/configuration/mode/#mode-production)에서는 이미 가능하고 나머지에서는 아직 가능하지 않습니다. 만약 생산 `mode` 최적화를 무효로 해야 하는 경우, [`optimization.concatenateModules` 옵션](/configuration/optimization/#optimizationconcatenatemodules)을 `false`로 설정하세요. 다른 모드에서 연결 동작을 가능하게 하고 싶을 경우, `ModuleConcatenationPlugin`을 수동으로 설정하거나 `optimization.concatenateModules` 옵션을 사용하세요. ```js new webpack.optimize.ModuleConcatenationPlugin(); @@ -24,7 +24,7 @@ W> 이 플러그인은 webpack에서 직접 처리되는 [ES6 modules](/api/modu ## Optimization Bailouts -기사에서 설명하듯이 webpack은 부분적인 범위 호이스팅을 시도합니다. 이는 모듈을 하나의 범위로 합치지만 모든 경우에 합치지는 못합니다. 만약 webapck이 모듈을 합칠 수 없다면 두 가지 대안은 Prevent와 Root 입니다. Prevent는 모듈이 반드시 그 자신의 범위 안에 있어야 한다는 것을 의미합니다. Root는 새로운 모듈 그룹이 생성될 것이라는 의미입니다. 다음의 조건이 결과를 결정합니다: +기사에서 설명하듯이 webpack은 부분적인 범위 호이스팅을 시도합니다. 이는 모듈을 하나의 범위로 합치지만 모든 경우에 합치지는 못합니다. 만약 webapck이 모듈을 합칠 수 없다면 두 가지 대안은 Prevent와 Root 입니다. Prevent는 모듈이 반드시 그 자신의 범위 안에 있어야 한다는 것을 의미합니다. Root는 새로운 모듈 그룹이 생성될 것이라는 의미입니다. 다음의 조건이 결과를 결정합니다. | Condition | Outcome | | --------------------------------------------- | ------- | @@ -41,8 +41,7 @@ W> 이 플러그인은 webpack에서 직접 처리되는 [ES6 modules](/api/modu ### Module Grouping Algorithm -The following pseudo JavaScript explains the algorithm: -아래의 의사 자바스크립트는 이 알고리즘을 설명합니다: +아래의 의사 자바스크립트는 이 알고리즘을 설명합니다. ```js modules.forEach((module) => { From 7fd9dcf2807f32faf9f599b78475e49ec6296262 Mon Sep 17 00:00:00 2001 From: jiwoo0629 <90768869+jiwoo0629@users.noreply.github.com> Date: Fri, 29 Oct 2021 00:39:57 +0900 Subject: [PATCH 14/15] transtlate plugins/module-concatenation.mdx MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit plugins/module-concatenation.mdx 번역 --- src/content/plugins/module-concatenation-plugin.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/plugins/module-concatenation-plugin.mdx b/src/content/plugins/module-concatenation-plugin.mdx index bc80897db00..9adf4fb7773 100644 --- a/src/content/plugins/module-concatenation-plugin.mdx +++ b/src/content/plugins/module-concatenation-plugin.mdx @@ -24,7 +24,7 @@ W> 이 플러그인은 webpack에서 직접 처리되는 [ES6 modules](/api/modu ## Optimization Bailouts -기사에서 설명하듯이 webpack은 부분적인 범위 호이스팅을 시도합니다. 이는 모듈을 하나의 범위로 합치지만 모든 경우에 합치지는 못합니다. 만약 webapck이 모듈을 합칠 수 없다면 두 가지 대안은 Prevent와 Root 입니다. Prevent는 모듈이 반드시 그 자신의 범위 안에 있어야 한다는 것을 의미합니다. Root는 새로운 모듈 그룹이 생성될 것이라는 의미입니다. 다음의 조건이 결과를 결정합니다. +기사에서 설명하듯이 webpack은 부분적인 범위 호이스팅을 시도합니다. 이는 모듈을 하나의 범위로 합치지만 모든 경우에 합치지는 못합니다. 만약 webapck이 모듈을 합칠 수 없다면 두 가지 대안은 Prevent와 Root 입니다. Prevent는 모듈이 반드시 그 자신의 범위 안에 있어야 한다는 것을 의미합니다. Root는 새로운 모듈 그룹이 생성될 것이라는 의미입니다. 다음의 조건이 결과를 결정합니다. | Condition | Outcome | | --------------------------------------------- | ------- | From 79610da9201cfc1558a63b57cde16ffaa66dd569 Mon Sep 17 00:00:00 2001 From: jiwoo0629 <90768869+jiwoo0629@users.noreply.github.com> Date: Fri, 29 Oct 2021 01:24:11 +0900 Subject: [PATCH 15/15] Revert "transtlate plugins/module-concatenation.mdx" This reverts commit 7fd9dcf2807f32faf9f599b78475e49ec6296262. --- src/content/plugins/module-concatenation-plugin.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/plugins/module-concatenation-plugin.mdx b/src/content/plugins/module-concatenation-plugin.mdx index 9adf4fb7773..bc80897db00 100644 --- a/src/content/plugins/module-concatenation-plugin.mdx +++ b/src/content/plugins/module-concatenation-plugin.mdx @@ -24,7 +24,7 @@ W> 이 플러그인은 webpack에서 직접 처리되는 [ES6 modules](/api/modu ## Optimization Bailouts -기사에서 설명하듯이 webpack은 부분적인 범위 호이스팅을 시도합니다. 이는 모듈을 하나의 범위로 합치지만 모든 경우에 합치지는 못합니다. 만약 webapck이 모듈을 합칠 수 없다면 두 가지 대안은 Prevent와 Root 입니다. Prevent는 모듈이 반드시 그 자신의 범위 안에 있어야 한다는 것을 의미합니다. Root는 새로운 모듈 그룹이 생성될 것이라는 의미입니다. 다음의 조건이 결과를 결정합니다. +기사에서 설명하듯이 webpack은 부분적인 범위 호이스팅을 시도합니다. 이는 모듈을 하나의 범위로 합치지만 모든 경우에 합치지는 못합니다. 만약 webapck이 모듈을 합칠 수 없다면 두 가지 대안은 Prevent와 Root 입니다. Prevent는 모듈이 반드시 그 자신의 범위 안에 있어야 한다는 것을 의미합니다. Root는 새로운 모듈 그룹이 생성될 것이라는 의미입니다. 다음의 조건이 결과를 결정합니다. | Condition | Outcome | | --------------------------------------------- | ------- |