diff --git a/.github/CODE_OF_CONDUCT.md b/.github/CODE_OF_CONDUCT.md deleted file mode 100644 index 70840a86abd..00000000000 --- 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 621c0513669..d4ab933ab3d 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 1152177bf46..00000000000 --- 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 b489f0e6e61..00000000000 --- 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/actions/webpack-persistent-cache/action.yml b/.github/actions/webpack-persistent-cache/action.yml index e99f2bb4883..ddfa28f1463 100644 --- a/.github/actions/webpack-persistent-cache/action.yml +++ b/.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 diff --git a/.github/workflows/dependency-review.yml b/.github/workflows/dependency-review.yml index 8461b453cfc..938c158e40b 100644 --- a/.github/workflows/dependency-review.yml +++ b/.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 diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml index 32cd1792d0c..bf3bfdaf949 100644 --- a/.github/workflows/deploy.yml +++ b/.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/github-pages-deploy-action@v4.7.3 + uses: JamesIves/github-pages-deploy-action@4a3abc783e1a24aeb44c16e869ad83caf6b4cc23 # v4.7.4 with: token: ${{ secrets.GITHUB_TOKEN }} folder: dist diff --git a/.github/workflows/testing.yml b/.github/workflows/testing.yml index 584c7466945..d04ec3a8f0e 100644 --- a/.github/workflows/testing.yml +++ b/.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/vale-action@v2.1.1 + 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 diff --git a/cypress/e2e/offline._cy.js b/cypress/e2e/offline.cy.js similarity index 100% rename from cypress/e2e/offline._cy.js rename to cypress/e2e/offline.cy.js diff --git a/package.json b/package.json index 29b8d447a02..a9a7fe9e829 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.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", diff --git a/src/components/CodeBlockWithCopy/CodeBlockWithCopy.jsx b/src/components/CodeBlockWithCopy/CodeBlockWithCopy.jsx new file mode 100644 index 00000000000..07dd90a377f --- /dev/null +++ b/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 ( +
+ + + 
+        {children}
+
+
+ ); +} + +CodeBlockWithCopy.propTypes = { + children: PropTypes.node.isRequired, +}; diff --git a/src/components/CodeBlockWithCopy/CodeBlockWithCopy.scss b/src/components/CodeBlockWithCopy/CodeBlockWithCopy.scss new file mode 100644 index 00000000000..18e59c74236 --- /dev/null +++ b/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); + } +} diff --git a/src/content/api/cli.mdx b/src/content/api/cli.mdx index 1e1dab72ebb..c4e1ea9c64e 100644 --- a/src/content/api/cli.mdx +++ b/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)를 참고하세요. diff --git a/src/content/api/loaders.mdx b/src/content/api/loaders.mdx index 8671c831595..765c8efc420 100644 --- a/src/content/api/loaders.mdx +++ b/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 diff --git a/src/content/api/module-methods.mdx b/src/content/api/module-methods.mdx index 563eb3f4a5c..84432dcbe27 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 @@ -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** diff --git a/src/content/api/normalmodulefactory-hooks.mdx b/src/content/api/normalmodulefactory-hooks.mdx index 7bf0e978075..ea788dde235 100644 --- a/src/content/api/normalmodulefactory-hooks.mdx +++ b/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` diff --git a/src/content/api/plugins.mdx b/src/content/api/plugins.mdx index e4d6e35d58b..61f543999e6 100644 --- a/src/content/api/plugins.mdx +++ b/src/content/api/plugins.mdx @@ -10,6 +10,7 @@ contributors: - EugeneHlushko - wizardofhogwarts - snitin315 + - evenstensberg translators: - Eunbin-Kim --- diff --git a/src/content/awesome-webpack.mdx b/src/content/awesome-webpack.mdx index 6815d5774cf..81cc0161b62 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/blog/2020-10-10-webpack-5-release.mdx b/src/content/blog/2020-10-10-webpack-5-release.mdx index c43b7b781c9..b5bc867338f 100644 --- a/src/content/blog/2020-10-10-webpack-5-release.mdx +++ b/src/content/blog/2020-10-10-webpack-5-release.mdx @@ -589,7 +589,7 @@ Webpack과 플러그인은 콘텐츠가 변경된 경우에만 새 애셋을 생 타겟 파일 시작만 허용하는 대상(예: node, WebWorker, electron main)은 이제 런타임에 의해 자동으로 부트스트랩하는 데 필요한 종속 조각 로드를 지원합니다. -지원할 경우 `chunks: "all"` 및 `optimization.runtimeChunk`가 있는 타겟에 대하여 `opimization.splitChunks`를 사용할 수 있습니다. +지원할 경우 `chunks: "all"` 및 `optimization.runtimeChunk`가 있는 타겟에 대하여 `optimization.splitChunks`를 사용할 수 있습니다. 청크 로딩이 비동기인 타겟의 경우 초기 평가도 비동기화됩니다. 이제 내보낸 값이 Promise이기 때문에 `output.library`를 사용할 때 문제가 될 수 있습니다. @@ -1300,7 +1300,7 @@ Webpack 5에서는 코드베이스의 의존성 참조 부분이 리팩토링 - `Compilation.addModuleDependencies`가 제거되었습니다. - `Compilation.prefetch`가 제거되었습니다. - `Compilation.hooks.beforeHash`는 이제 모듈의 해시가 생성된 후 호출됩니다. - - **마이그레이션**: 대신 `Compiliation.hooks.beforeModuleHash`를 사용합니다. + - **마이그레이션**: 대신 `Compilation.hooks.beforeModuleHash`를 사용합니다. - `Compilation.applyModuleIds`가 제거되었습니다. - `Compilation.applyChunkIds`가 제거되었습니다. - 루트 컴파일러를 가리키는 `Compiler.root`가 추가되었습니다. @@ -1399,7 +1399,7 @@ Webpack 5에서는 코드베이스의 의존성 참조 부분이 리팩토링 - `ExternalModule.external`이 제거되었습니다. - `HarmonyInitDependency`가 제거되었습니다. - `Dependency.getInitFragments`는 더 이상 사용되지 않습니다. - - **마이그레이션**: 대신 `apply` `initFragements`를 사용합니다. + - **마이그레이션**: 대신 `apply` `initFragments`를 사용합니다. - DependencyReference는 이제 모듈 대신 모듈에 대한 함수를 사용합니다. - HarmonyImportSpecifierDependency.redirectedId가 제거되었습니다. - **마이그레이션**: 대신 `setId`를 사용합니다. diff --git a/src/content/concepts/hot-module-replacement.mdx b/src/content/concepts/hot-module-replacement.mdx index cacbb6f2b02..fe9348e30c2 100644 --- a/src/content/concepts/hot-module-replacement.mdx +++ b/src/content/concepts/hot-module-replacement.mdx @@ -46,7 +46,7 @@ HMR이 어떻게 작동하는지 정확히 이해하기 위해 몇 가지 다른 ### In a Module -HMR은 HMR 코드가 포함된 모듈에만 영향을 미치는 선택적인 기능입니다. 한 가지 예는 [`style-loader`](https://github.com/webpack-contrib/style-loader)를 통해 스타일을 가져오는 것입니다. 패치가 작동하기 위해 `style-loader`는 HMR 인터페이스를 구현합니다. HMR을 통해 업데이트를 받으면 이전 스타일을 새 스타일로 대체합니다. +HMR은 HMR 코드가 포함된 모듈에만 영향을 미치는 선택적인 기능입니다. 한 가지 예는 [`style-loader`](https://github.com/webpack/style-loader)를 통해 스타일을 가져오는 것입니다. 패치가 작동하기 위해 `style-loader`는 HMR 인터페이스를 구현합니다. HMR을 통해 업데이트를 받으면 이전 스타일을 새 스타일로 대체합니다. 마찬가지로 모듈에서 HMR 인터페이스를 구현할 때 모듈이 업데이트될 때 어떤 일이 발생해야 하는지 설명할 수 있습니다. 그러나 대부분의 경우 모든 모듈에서 HMR 코드를 작성해야 하는 것은 아닙니다. 모듈에 HMR 핸들러가 없으면 업데이트가 버블링됩니다. 이는 단일 핸들러가 전체 모듈 트리를 업데이트 할 수 있음을 의미합니다. 트리의 단일 모듈이 업데이트되면 전체 종속성 집합이 다시 로드됩니다. diff --git a/src/content/concepts/index.mdx b/src/content/concepts/index.mdx index 71b4a680410..f9604588a1e 100644 --- a/src/content/concepts/index.mdx +++ b/src/content/concepts/index.mdx @@ -169,4 +169,4 @@ Webpack은 [ES5](https://compat-table.github.io/compat-table/es5/)가 호환되 ## Environment -Webpack 5는 Node.js 버전 10.13.0 이상에서 실행됩니다. +Webpack 5에는 Node.js 버전 10.13.0 이상이 필요합니다. diff --git a/src/content/concepts/output.mdx b/src/content/concepts/output.mdx index 59a82e42b16..bb861784e3f 100644 --- a/src/content/concepts/output.mdx +++ b/src/content/concepts/output.mdx @@ -11,6 +11,8 @@ translators: - limong --- +import CodeBlockWithCopy from '../../components/CodeBlockWithCopy/CodeBlockWithCopy'; + `output` 옵션을 설정하여 컴파일된 파일을 디스크에 쓰는 방법을 webpack에 알려줍니다. 여러 `진입`점이 있을 수 있지만 하나의 `출력` 설정만 지정된다는 점에 주의하세요. ## Usage diff --git a/src/content/configuration/devtool.mdx b/src/content/configuration/devtool.mdx index d5d9de9644e..5219401d2b8 100644 --- a/src/content/configuration/devtool.mdx +++ b/src/content/configuration/devtool.mdx @@ -21,7 +21,7 @@ related: devtool 옵션은 소스맵 생성 여부와 방법을 제어합니다. -보다 세밀한 설정을 위해 [`SourceMapDevToolPlugin`](/plugins/source-map-dev-tool-plugin)을 사용하세요. 기존 소스맵을 처리하려면 [`source-map-loader`](/loaders/source-map-loader)를 참고하세요. +보다 세밀한 설정을 위해 [`SourceMapDevToolPlugin`](/plugins/source-map-dev-tool-plugin)을 사용하세요. 기존 소스맵을 처리하려면 [`Rule.extractSourceMap`](/configuration/module/#ruleextractsourcemap)를 참고하세요. ## devtool diff --git a/src/content/configuration/dotenv.mdx b/src/content/configuration/dotenv.mdx new file mode 100644 index 00000000000..c12ba35095e --- /dev/null +++ b/src/content/configuration/dotenv.mdx @@ -0,0 +1,318 @@ +--- +title: Dotenv +sort: 16 +contributors: + - xiaoxiaojx +related: + - title: dotenv + url: https://github.com/motdotla/dotenv + - title: dotenv-expand + url: https://github.com/motdotla/dotenv-expand +--- + + +`dotenv` 옵션은 `.env` 파일에서 webpack의 내장 환경 변수를 로드하는 기능을 +활성화합니다. ## `dotenv` + +`boolean` `object` + +`.env` 파일에서 환경 변수를 로드하기 위해 내장된 Dotenv 플러그인을 활성화하고 구성합니다. + +**webpack.config.js** + +```javascript +module.exports = { + //... + dotenv: true, +}; +``` + +`dotenv`를 `true`로 설정하면 기본 옵션으로 플러그인이 활성화됩니다. 사용자 지정 구성의 경우 옵션 객체를 전달하세요. + +```javascript +module.exports = { + //... + dotenv: { + prefix: 'WEBPACK_', + dir: true, + template: ['.env', '.env.local', '.env.[mode]', '.env.[mode].local'], + }, +}; +``` + +## Options + +### `prefix` + +`string` `string[]` + +**Default:** `'WEBPACK_'` + +지정된 접두사로 시작하는 환경 변수만 노출합니다. 이렇게 하면 민감한 변수가 실수로 노출되는 것을 방지할 수 있습니다. + +**webpack.config.js** + +```javascript +module.exports = { + //... + dotenv: { + prefix: 'APP_', // APP_* 변수만 노출합니다. + }, +}; +``` + +**Multiple prefixes:** + +```javascript +module.exports = { + //... + dotenv: { + prefix: ['APP_', 'CONFIG_'], // APP_* 및 CONFIG_* 변수를 모두 노출합니다. + }, +}; +``` + +T> 보안상의 이유로 빈 문자열 `''`는 접두사로 허용되지 않습니다. 모든 환경 변수가 노출되기 때문입니다. + +### `dir` + +`boolean` `string` + +**Default:** `true` + +`.env` 파일이 로드되는 디렉터리입니다. + +- `true` - 프로젝트 루트에서 로드합니다(컨텍스트). +- `false` - `.env` 파일 로드를 비활성화합니다. +- `string` - 프로젝트 루트로부터의 상대 경로 또는 절대 경로 + +**webpack.config.js** + +```javascript +module.exports = { + //... + dotenv: { + dir: './config', // ./config 디렉토리에서 로드 + }, +}; +``` + +**Disable loading:** + +```javascript +module.exports = { + //... + dotenv: { + dir: false, // process.env 변수만 사용하세요 + }, +}; +``` + +### `template` + +`string[]` + +**기본값:** `['.env', '.env.local', '.env.[mode]', '.env.[mode].local']` + +`.env` 파일 이름에 대한 템플릿 패턴입니다. `[mode]`를 webpack 모드의 자리 표시자로 사용하세요(예: `development`, `production`). + +파일은 지정된 순서대로 로드되며, 나중에 로드된 파일이 이전 파일보다 우선합니다. + +**webpack.config.js** + +```javascript +module.exports = { + //... + mode: 'production', + dotenv: { + template: ['.env', '.env.production'], // 이 두 파일만 로드하세요 + }, +}; +``` + +**Custom patterns:** + +```javascript +module.exports = { + //... + dotenv: { + template: [ + '.env', + '.env.local', + '.env.[mode]', + '.env.[mode].local', + '.env.override', // Always loaded last + ], + }, +}; +``` + +T> `[mode]` 플레이스홀더는 현재 웹팩 모드로 대체됩니다. 예를 들어, `production` 모드에서 `.env.[mode]`는 `.env.production`이 됩니다. + +## File Priority + +환경 파일은 순서대로 로드되며, 나중에 로드된 파일이 더 높은 우선순위를 갖습니다. + +1. `.env` - 모든 모드에서 로드됨 +2. `.env.local` - 모든 모드에서 로드되며, git에서 무시됨(규칙) +3. `.env.[mode]` - 지정된 모드에서만 로드됨(예: `.env.production`) +4. `.env.[mode].local` - 지정된 모드에서만 로드되며, git에서 무시됨 + +이후 파일의 변수는 이전 파일의 변수보다 우선합니다. 또한, `process.env`에 이미 설정된 변수가 가장 높은 우선순위를 갖습니다. + +## Variable Expansion + +환경 변수는 [dotenv-expand](https://github.com/motdotla/dotenv-expand) 구문을 사용하여 자동으로 확장됩니다. + +**.env** + +```bash +WEBPACK_API_BASE=https://api.example.com +WEBPACK_API_URL=${WEBPACK_API_BASE}/v1 +WEBPACK_PORT=${WEBPACK_PORT:-3000} # process.env 또는 3000을 기본값으로 사용하는 WEBPACK_PORT +``` + +**코드에서:** + +```javascript +console.log(process.env.WEBPACK_API_URL); // "https://api.example.com/v1" +console.log(process.env.WEBPACK_PORT); // process.env에서 WEBPACK_PORT를 사용하거나 기본값으로 3000을 사용합니다. +``` + +T> 확장하는 동안 `process.env`의 모든 변수(예: `${PORT}`)를 참고할 수 있지만, 지정된 접두사(예: `WEBPACK_`)가 있는 변수만 최종 번들에 노출됩니다. 위 예에서 `${WEBPACK_PORT:-3000}`은 `process.env`의 `WEBPACK_PORT`가 있는 경우 이를 참고합니다. + +**Expansion behavior example:** + +```bash +# .env 파일 +WEBPACK_API_URL=${API_BASE:-https://default.com}/api +``` + +```bash +# 환경 변수와 함께 실행 +API_BASE=https://custom.com npm run build +``` + +결과: `process.env.WEBPACK_API_URL`은 `"https://custom.com/api"`가 됩니다. 이는 확장 중에 `process.env`의 `API_BASE`가 사용되기 때문입니다. 그러나 `API_BASE` 자체는 번들에 노출되지 않습니다(`WEBPACK_` 접두사가 없음). + +## Usage Examples + +### Basic Usage + +프로젝트 루트에 `.env` 파일을 만듭니다. + +**.env** + +```bash +WEBPACK_API_URL=https://api.example.com +WEBPACK_FEATURE_FLAG=true +SECRET_KEY=should-not-be-exposed # 노출되지 않음 (WEBPACK_ 접두사가 없기 때문에) +``` + +**webpack.config.js** + +```javascript +module.exports = { + //... + dotenv: true, // 기본 접두사 "WEBPACK_"를 사용합니다. +}; +``` + +**In your application:** + +```javascript +console.log(process.env.WEBPACK_API_URL); // "https://api.example.com" +console.log(process.env.WEBPACK_FEATURE_FLAG); // "true" +console.log(process.env.SECRET_KEY); // 정의되지 않음(노출되지 않음) +``` + +### Mode-Specific Configuration + +모드별 파일을 만듭니다. + +**.env** + +```bash +WEBPACK_API_URL=https://api.example.com +WEBPACK_DEBUG=false +``` + +**.env.production** + +```bash +WEBPACK_API_URL=https://prod-api.example.com +WEBPACK_DEBUG=false +``` + +**.env.development** + +```bash +WEBPACK_API_URL=https://dev-api.example.com +WEBPACK_DEBUG=true +``` + +`--mode production`으로 빌드하는 경우 `WEBPACK_API_URL`은 `"https://prod-api.example.com"`이 됩니다. + +### Multiple Prefixes + +다른 접두사를 사용하여 변수를 노출합니다. + +**.env** + +```bash +APP_NAME=MyApp +APP_VERSION=1.0.0 +CONFIG_TIMEOUT=5000 +CONFIG_RETRY=3 +PRIVATE_KEY=secret # 노출되지 않음 +``` + +**webpack.config.js** + +```javascript +module.exports = { + //... + dotenv: { + prefix: ['APP_', 'CONFIG_'], + }, +}; +``` + +### Custom Directory and Template + +사용자 정의 이름을 사용하여 사용자 정의 위치에서 환경 파일을 로드합니다. + +**webpack.config.js** + +```javascript +module.exports = { + //... + dotenv: { + dir: './environments', + template: ['.env.base', '.env.[mode]'], + }, +}; +``` + +이렇게 하면 다음이 로드됩니다. + +- `./environments/.env.base` +- `./environments/.env.production` (production 모드인 경우) + +## Security Considerations + +W> **민감한 데이터는 버전 제어에 절대 커밋하지 마세요!** + +- `.gitignore`를 사용하여 `.env.local` 및 `.env.[mode].local` 파일을 제외합니다. +- 특정 접두사가 있는 환경 변수만 노출합니다. +- 빈 문자열 `''`를 접두사로 사용하지 마세요. +- 환경마다 다른 `.env` 파일을 사용하는 것을 고려하세요. +- 프로덕션 시크릿은 배포 플랫폼의 환경 변수에 저장합니다. + +**.gitignore** + +```bash +# 로컬 env 파일들 +.env.local +.env.*.local +``` diff --git a/src/content/configuration/experiments.mdx b/src/content/configuration/experiments.mdx index 2c4a02b5ccf..ae6aff9b2e5 100644 --- a/src/content/configuration/experiments.mdx +++ b/src/content/configuration/experiments.mdx @@ -29,11 +29,11 @@ W> 실험적 기능은 시멘틱 버저닝을 완화하고 주요 변경 사항 - [`css`](#experimentscss) - [`deferImport`](#experimentsdeferimport) - [`futureDefaults`](#experimentsfuturedefaults) -- `layers`: 모듈 및 청크 레이어를 활성화합니다. - [`lazyCompilation`](#experimentslazycompilation) - [`outputModule`](#experimentsoutputmodule) - `syncWebAssembly`: webpack 4에서와 같이 이전 웹 어셈블리를 지원합니다. -- [`topLevelAwait`](#experimentstoplevelawait) +- `layers`: 모듈 및 청크 레이어를 활성화합니다. `5.102.0` 이후로 추가 옵션 없이도 작동합니다. +- `topLevelAwait`: 최상위 레벨에서 `await`를 사용하면 모듈을 `async` 모듈로 변환합니다. webpack 버전 `5.83.0`부터 적용됩니다. (하지만 이전 버전에서는 `experiments.topLevelAwait`를 `true`로 설정하여 활성화할 수 있습니다.), 이 기능은 기본적으로 활성화되어 있으며, `5.102.0` 이후로 제거되어 추가 옵션 없이 작동합니다. **webpack.config.js** @@ -43,7 +43,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` - -`topLevelAwait` 옵션은 `await`가 최상위 수준에서 사용될 때 모듈을 `async` 모듈로 변환합니다. Webpack 버전 `5.83.0`부터는 이 기능이 기본적으로 활성화됩니다. 그러나 그 이전 버전에서는 'experiments.topLevelAwait'를 'true'로 설정하여 활성화할 수 있습니다. - -```js -module.exports = { - experiments: { - topLevelAwait: true, - }, -}; -``` diff --git a/src/content/configuration/extending-configurations.mdx b/src/content/configuration/extending-configurations.mdx index 66158ded9f4..8c627481a55 100644 --- a/src/content/configuration/extending-configurations.mdx +++ b/src/content/configuration/extending-configurations.mdx @@ -106,7 +106,7 @@ module.exports = { }; ``` -## Overridding Configurations +## Overriding Configurations 확장된 설정에서 확장된 설정과 동일한 속성을 전달하여 확장된 설정의 설정을 재정의할 수 있습니다. diff --git a/src/content/configuration/module.mdx b/src/content/configuration/module.mdx index cae3bf526ac..16c8c6d8732 100644 --- a/src/content/configuration/module.mdx +++ b/src/content/configuration/module.mdx @@ -143,6 +143,9 @@ module.exports = { // type: string | ((pathData: PathData, assetInfo?: AssetInfo) => string) outputPath: 'cdn-assets/', }, + 'asset/bytes': { + // 아직 이 모듈 유형에 대해 지원되는 제너레이터 옵션이 없습니다. + } javascript: { // 이 모듈 유형에는 아직 제너레이터 옵션이 지원되지 않습니다. }, @@ -251,6 +254,9 @@ module.exports = { 'asset/source': { // 위와 동일 }, + 'asset/bytes': { + // 위와 동일 + }, javascript: { // javascript 모듈 파서 옵션 // 예. require.ensure 구문 파싱 활성화 @@ -273,11 +279,15 @@ module.exports = { // Webpack 5.97.0부터 사용 가능한 `@import` at-rules 처리를 활성화/비활성화합니다. // type: boolean import: true, + // webpack 5.97.0부터 사용 가능한 url()/image-set()/src()/image() 함수 처리를 활성화/비활성화합니다. + // type: boolean + url: true, // Webpack 5.90.0부터 사용할 수 있는 CSS 내보내기를 위해 export라는 이름의 ES 모듈을 사용하세요. // type: boolean namedExports: true, - // webpack 5.97.0부터 사용 가능한 url()/image-set()/src()/image() 함수 처리를 활성화/비활성화합니다. - url: true, + // CSS 콘텐츠가 내보내지는 방식을 설정합니다. + // type: string + exportType: 'link', }, 'css/auto': { // 위와 동일 @@ -350,6 +360,39 @@ module.exports = { T> 특정 가져오기를 필터링하려면 Webpack의 기본 제공 [IgnorePlugin](/plugins/ignore-plugin/)을 사용할 수 있습니다. `css-loader`에서 사용 가능한 [`filter` 옵션](/loaders/css-loader/#filter)은 지원되지 않습니다. +#### module.parser.css.url + +이 옵션은 CSS 파일 내 `url()`, `image-set()`, `src()`, `image()`와 같은 함수에서 URL 처리를 활성화 또는 비활성화합니다. 활성화하면 이러한 URL은 WebPack에서 확인 및 처리됩니다. + +- Type: `boolean` +- Available: 5.97.0+ +- Example: + + ```js + module.exports = { + module: { + parser: { + css: { + url: true, + }, + }, + }, + }; + ``` + + ```css + /* styles.css */ + .background { + background-image: url('./images/bg.jpg'); + } + + .icon { + content: image('./icons/star.svg'); + } + ``` + +T> 특정 가져오기를 필터링하려면 Webpack의 내장 [IgnorePlugin](/plugins/ignore-plugin/)을 사용할 수 있습니다. `css-loader`에서 제공되는 [`filter` 옵션](/loaders/css-loader/#filter)은 지원되지 않습니다. + #### module.parser.css.namedExports 이 옵션을 사용하면 CSS 내보내기에 export라는 이름의 ES 모듈을 사용할 수 있습니다. `true`로 설정하면 CSS 모듈은 이름이 지정된 내보내기를 사용하여 클래스와 스타일을 내보냅니다. @@ -403,12 +446,12 @@ import { header, footer } from './styles.module.css'; `namedExports`를 활성화하면 JavaScript 프로젝트에서 CSS를 관리하는 데 더 모듈화되고 유지 관리 가능한 접근 방식을 채택하고 ES 모듈 구문을 활용하여 더 명확하고 명시적인 가져오기를 수행할 수 있습니다. -#### module.parser.css.url +### module.parser.css.exportType -이 옵션은 CSS 파일 내의 `url()`, `image-set()`, `src()`, `image()`와 같은 함수에서 URL 처리를 활성화하거나 비활성화합니다. 활성화하면 이러한 URL은 webpack에서 해석되고 처리됩니다. +CSS 콘텐츠를 내보내는 방법을 설정합니다. - Type: `boolean` -- Available: 5.97.0+ +- Available: 5.102.0+ - Example: ```js @@ -416,25 +459,19 @@ import { header, footer } from './styles.module.css'; module: { parser: { css: { - url: true, + // ... + exportType: 'text', }, }, }, }; ``` - ```css - /* styles.css */ - .background { - background-image: url('./images/bg.jpg'); - } - - .icon { - content: image('./icons/star.svg'); - } - ``` +가능한 설정 값: `'link' | 'text' | 'css-style-sheet' -T> 특정 가져오기를 필터링하려면 Webpack의 기본 제공 플러그인[IgnorePlugin](/plugins/ignore-plugin/)을 사용할 수 있습니다. `css-loader`에서 사용 가능한 [`filter` 옵션](/loaders/css-loader/#filter)은 지원되지 않습니다. +- `link` - CSS를 자체 파일로 추출하고 `link` 태그를 사용하여 DOM에 삽입합니다. +- `text` - CSS를 JS 파일에 저장하고 기본 내보내기를 사용하여 반환합니다. +- `css-style-sheet` - 기본 내보내기는 생성 가능한 스타일시트(예: CSSStyleSheet)입니다. 사용자 정의 요소와 Shadow DOM에 유용합니다. ### module.parser.javascript @@ -759,6 +796,51 @@ module.exports = { }; ``` +### module.parser.json.namedExports + +객체 유형의 JSON에 대해 명명된 내보내기를 허용합니다. + +- Type: `boolean` +- Available: +- Example: + +```js +module.exports = { + module: { + parser: { + json: { + // Example: + // import { myField } from "./file.json"; + // + // console.log(myField); + namedExports: true, + }, + }, + }, +}; +``` + +### module.parser.json.parse + +콘텐츠를 파싱하고 JSON을 반환하는 함수입니다. + +- Type: `((input: string) => Buffer | JsonValue)` +- Example: + +```js +const json5 = require('json5'); + +module.exports = { + module: { + parser: { + json: { + parse: json5.parse, + }, + }, + }, +}; +``` + ## module.noParse `RegExp` `[RegExp]` `function(resource)` `string` `[string]` @@ -1021,6 +1103,28 @@ module.exports = { }; ``` +## Rule.extractSourceMap + +`boolean = false` + +파일에서 기존 소스 맵 데이터를 추출합니다(`//# sourceMappingURL` 주석에서). 이는 타사 라이브러리의 소스 맵을 보존하는 데 유용합니다. + +**webpack.config.js** + +```js +module.exports = { + // ... + module: { + rules: [ + { + test: /\.m?js$/, + extractSourceMap: true, + }, + ], + }, +}; +``` + ## Rule.loader `Rule.loader`는 `Rule.use: [ { loader } ]`의 단축어입니다. 자세한 내용은 [`Rule.use`](#ruleuse)와 [`UseEntry.loader`](#useentry)를 참고하세요. @@ -1282,11 +1386,11 @@ module.exports = { module: { rules: [ { - test: /\.png/, + test: /\.png$/, type: 'asset/resource', }, { - test: /\.html/, + test: /\.html$/, type: 'asset/resource', generator: { filename: 'static/[hash][ext]', @@ -1424,7 +1528,7 @@ T> 자세한 정보는 [`중첩된 rules`](#nested-rules)를 참고하세요. `string` -가능한 변수: `'javascript/auto' | 'javascript/dynamic' | 'javascript/esm' | 'json' | 'webassembly/sync' | 'webassembly/async' | 'asset' | 'asset/source' | 'asset/resource' | 'asset/inline' | 'css/auto'` +가능한 변수: `'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`은 일치하는 모듈의 유형을 설정합니다. 이는 defaultRules 및 기본값 import 동작이 발생하지 않습니다. 예를 들어 커스텀 로더를 통해 `.json`파일을 로드하려면 `type`을 `javascript/auto`로 설정하여 webpack에 내장된 json import를 우회해야합니다. diff --git a/src/content/configuration/node.mdx b/src/content/configuration/node.mdx index f7b51c5d46e..58af290c127 100644 --- a/src/content/configuration/node.mdx +++ b/src/content/configuration/node.mdx @@ -19,7 +19,7 @@ translators: 이 기능은 webpack 내부 [`NodeStuffPlugin`](https://github.com/webpack/webpack/blob/main/lib/NodeStuffPlugin.js) 플러그인에서 제공합니다. -W> webpack5 부터, `node` 옵션에서 `global`, `__filename` 또는 `__dirname`만 설정할 수 있습니다. webpack5의 Node.js에서 `fs`를 폴리필할 방법을 찾고 있다면 [resolve.fallback](/configuration/resolve/#resolvefallback)를 참고하세요. +W> webpack 5부터 `node` 옵션에서 `global`, `__filename`/`import.meta.filename` 또는 `__dirname`/`import.meta.dirname`만 설정할 수 있습니다. webpack 5에서 Node.js의 `fs`를 동일하게 폴리필하는 방법을 찾고 있다면 [resolve.fallback](/configuration/resolve/#resolvefallback)을 참고하세요. ## node @@ -50,7 +50,7 @@ T> 전역변수가 필요한 모듈을 사용하는 경우 `global` 대신 `Prov 옵션: -- `true`: 폴리필 제공. +- `true`: 환경에서 지원하는 경우 폴리필을 제공하거나 `globalThis`를 사용하는 방법에 대한 자세한 내용은 [`environment`](/configuration/output/#outputenvironment) 옵션을 참고하세요. - `false`: 아무것도 제공하지 않습니다. 이 객체를 예상하는 코드는 `ReferenceError`가 발생할 수 있습니다. - `'warn'`: `global`을 사용할 때 경고 표시. @@ -61,11 +61,16 @@ T> 전역변수가 필요한 모듈을 사용하는 경우 `global` 대신 `Prov 옵션: - `true`: [`context` 옵션](/configuration/entry-context/#context)에 상대적인 **입력** 파일의 dirname. -- `false`: Webpack은 `__filename` 코드를 건드리지 않습니다. 즉 일반적인 Node.js `__filename` 동작이 있음을 의미합니다. Node.js 환경에서 실행할 때 **출력** 파일 이름입니다. -- `'mock'`: 고정값 `'/index.js'`. -- `'warn-mock'`: `'/index.js'`의 고정값을 사용하되 경고를 표시합니다. -- `node-module`: `output.module`이 활성화되면 CommonJS 모듈의 `__filename`을 `fileURLToPath(import.meta.url)`로 바꿉니다. -- `'eval-only'` +- `false`: Webpack은 `__filename` 및 `import.meta.filename` 코드에 영향을 주지 않으므로 일반적인 Node.js `__filename` 및 `import.meta.filename` 동작을 수행합니다. Node.js 환경에서 실행될 때 **출력** 파일의 파일 이름입니다. +- `'mock'`: 고정된 값 `'/index.js'`. +- `'warn-mock'`: `'/index.js'`의 고정된 값을 사용하지만 경고를 표시합니다. +- `'node-module'`: `output.module`이 활성화된 경우 CommonJS 모듈의 `__filename`을 바꾸고 ES 모듈의 `import.meta.filename` 코드를 `fileURLToPath(import.meta.url)`로 바꿉니다. +- `'eval-only'`: `__filename`/`import.meta.filename`의 해석은 실행 시점에 Node.js 런타임으로 미루되, `require`/`import`처럼 생성 과정에서 평가하여 모듈을 제대로 해석합니다. `output.module` 옵션에 따라 `__filename`을 `import.meta.filename`으로, 또는 그 반대로 바꿉니다(환경에서 `import.meta.filename`을 지원하지 않는 경우, `import.meta.url`을 사용하여 이 값을 가져오는 대체 방법이 사용됩니다). + +기본값은 다양한 [`target`](/configuration/target/)의 영향을 받을 수 있습니다. + +- [`target`](/configuration/target/)이 `'node` 또는 노드와 유사한 환경(`async-node`, `electron`) 또는 혼합 대상(`web`과 `node` 함께)으로 설정된 경우 기본값은 `'eval-only`입니다. +- [`target`](/configuration/target/)이 `'web` 또는 웹과 유사한 환경으로 설정된 경우 기본값은 `'mock`입니다. ## node.\_\_dirname @@ -73,9 +78,14 @@ T> 전역변수가 필요한 모듈을 사용하는 경우 `global` 대신 `Prov 옵션: -- `true`: [`context` 옵션](/configuration/entry-context/#context)에 상대적인 **입력** 파일의 dirname. -- `false`: Webpack은 `__dirname` 코드를 건드리지 않습니다. 즉 일반적인 Node.js `__dirname` 동작이 있음을 의미합니다. Node.js 환경에서 실행할 때 **출력** 파일 이름입니다. -- `'mock'`: 고정값 `'/'`. -- `'warn-mock'`: `'/'`의 고정값을 사용하되 경고를 표시합니다. -- `node-module`: `output.module`이 활성화된 경우 CommonJS 모듈의 `__dirname`을 `fileURLToPath(import.meta.url + "/..")`로 바꿉니다. -- `'eval-only'` +- `true`: [`context` 옵션](/configuration/entry-context/#context)을 기준으로 한 **입력** 파일의 디렉터리 이름입니다. +- `false`: Webpack은 `__dirname` 및 `import.meta.dirname` 코드를 수정하지 않으므로 일반적인 Node.js `__dirname` 및 `import.meta.dirname` 동작을 수행합니다. Node.js 환경에서 실행할 때 **출력** 파일의 디렉터리 이름입니다. +- `'mock`: 고정 값 `'/'`입니다. +- `'warn-mock'`: 고정 값 `'/'`를 사용하지만 경고를 표시합니다. +- `'node-module'`: `output.module`이 활성화된 경우 CommonJS 모듈의 `__dirname`을 `fileURLToPath(import.meta.url + "/..")`로 바꿉니다. +- `'eval-only'`: `__dirname`/`import.meta.dirname`의 해석을 실행 시점에 Node.js 런타임으로 미루지만, `require`/`import`와 같이 생성 단계에서 평가하여 모듈을 올바르게 해석합니다. `output.module` 옵션에 따라 `__dirname`을 `import.meta.dirname`으로, 또는 그 반대로 바꿀 수 있습니다(환경에서 `import.meta.filename`을 지원하지 않는 경우, `import.meta.url`을 사용하여 이 값을 가져오는 대체 방법이 사용됩니다). + +기본값은 다른 [`target`](/configuration/target/)의 영향을 받을 수 있습니다. + +- [`target`](/configuration/target/)이 `'node`로 설정되거나, 노드 유사 환경(`async-node`, `electron`) 또는 혼합 대상(`web`과 `node`를 함께 사용하는 경우)인 경우 기본값은 `'eval-only'`입니다. +- [`target`](/configuration/target/)이 `'web` 또는 웹과 유사한 환경으로 설정된 경우 기본값은 `'mock`입니다. diff --git a/src/content/configuration/optimization.mdx b/src/content/configuration/optimization.mdx index bb2837c60c2..eddad397268 100644 --- a/src/content/configuration/optimization.mdx +++ b/src/content/configuration/optimization.mdx @@ -283,7 +283,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 26d12f97306..5f9c33a78b8 100644 --- a/src/content/configuration/other-options.mdx +++ b/src/content/configuration/other-options.mdx @@ -1,6 +1,6 @@ --- title: Other Options -sort: 21 +sort: 22 contributors: - sokra - skipjack @@ -262,6 +262,10 @@ module.exports = { module: { timestamp: true, }, + contextModule: { + hash: true, + timestamp: true, + }, resolve: { timestamp: true, }, @@ -339,6 +343,12 @@ module.exports = { - `hash`: 콘텐츠 해시를 비교하여 무효화를 확인합니다(`timestamp`보다 비용이 많이 들지만 자주 변경되지 않음). - `timestamp`: 타임 스탬프를 비교하여 무효화를 확인합니다. +### contextModule + +`object = {hash boolean = true, timestamp boolean = true}` + +컨텍스트 모듈을 구축하기 위한 스냅샷. + ### resolve `object = {hash boolean = true, timestamp boolean = true}` diff --git a/src/content/configuration/output.mdx b/src/content/configuration/output.mdx index 8d6ff7dbe32..82150a25e71 100644 --- a/src/content/configuration/output.mdx +++ b/src/content/configuration/output.mdx @@ -510,13 +510,17 @@ module.exports = { globalThis: true, // ECMAScript 모듈을 가져오는 ECMAScript Module syntax를 지원합니다(import ... from '...' 처럼 사용합니다). module: false, - // 이를 지원하는 환경에서 코어 모듈 가져오기에 대해 node: prefix가 생성될지 여부를 결정합니다. + // 이 환경은 객체 메서드 단축형('{ module() {} }')을 지원합니다. + methodShorthand: true, + // node 환경이라면 접두사는 코어 모듈 가져오기에 대해 생성됩니다. // 이는 Webpack 런타임 코드에만 적용됩니다. nodePrefixForCoreModules: false, // 옵셔널 체이닝('obj?.a' 또는 'obj?.()')을 지원합니다. optionalChaining: true, // 템플릿 리터럴을 지원합니다. templateLiteral: true, + // 이 환경은 `import.meta.dirname`과 `import.meta.filename`을 지원합니다. + importMetaDirnameAndFilename: false, }, }, }; @@ -1290,7 +1294,7 @@ module.exports = _entry_return_; require('MyLibrary').doSomething(); ``` -`type: commmonjs2`와 함께 `output.library.name`을 지정하면 엔트리 포인트의 반환 값이 `module.exports.[output.library.name]`에 할당됩니다. +`type: commonjs2`와 함께 `output.library.name`을 지정하면 엔트리 포인트의 반환 값이 `module.exports.[output.library.name]`에 할당됩니다. T> CommonJS와 CommonJS2의 차이점이 궁금하신가요? 비슷하지만 webpack과 관련이 없는 부분에서 약간의 차이가 있습니다. 자세한 내용은 [이 이슈](https://github.com/webpack/webpack/issues/1114)를 참고하세요. @@ -2159,9 +2163,9 @@ T> 또한 생성된 번들에 트리 쉐이킹에 대한 정보를 추가합니 ## output.publicPath -`string` `function` - -이것은 온 디맨드 로드를 사용하거나 이미지, 파일 등과 같은 외부 리소스를 로드할 때 중요한 옵션입니다. 잘못된 값을 지정하면 리소스를 로드하는 동안 404 오류가 발생합니다. +- Type: + - `function` + - `string` 이 옵션은 브라우저에서 참조될 때 출력 디렉터리의 **공용 URL** 을 지정합니다. 상대 URL은 HTML 페이지 또는``태그를 기준으로 확인됩니다. 서버 상대 URL, 프로토콜 상대 URL 또는 절대 URL도 가능하며 때로는 필요합니다(CDN에서 애셋을 호스팅 하는 경우). diff --git a/src/content/configuration/performance.mdx b/src/content/configuration/performance.mdx index 12e053e2ed8..581c65f7b91 100644 --- a/src/content/configuration/performance.mdx +++ b/src/content/configuration/performance.mdx @@ -1,6 +1,6 @@ --- title: Performance -sort: 16 +sort: 21 contributors: - thelarkinn - tbroadley diff --git a/src/content/contribute/writing-a-loader.mdx b/src/content/contribute/writing-a-loader.mdx index d57c4a2ce4b..b59b8dede89 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 translators: - KiKi-Daehaksaeng --- @@ -140,7 +141,7 @@ T> 로더가 연결될 수 있다는 사실은 로더들이 JavaScript를 출력 ### Loader Utilities -다양한 유용한 도구를 제공하는 [`loader-utils`](https://github.com/webpack/loader-utils) 패키지를 활용하세요. `loader-utils`과 함께, [`schema-utils`](https://github.com/webpack-contrib/schema-utils) 패키지는 로더 옵션 유효성에 기반한 일관된 JSON 스키마를 위해 사용돼야 합니다. 여기 둘 다 활용하는 간단한 예시가 있습니다. +다양한 유용한 도구를 제공하는 [`loader-utils`](https://github.com/webpack/loader-utils) 패키지를 활용하세요. `loader-utils`과 함께, [`schema-utils`](https://github.com/webpack/schema-utils) 패키지는 로더 옵션 유효성에 기반한 일관된 JSON 스키마를 위해 사용돼야 합니다. 여기 둘 다 활용하는 간단한 예시가 있습니다. **loader.js** @@ -275,7 +276,7 @@ JSON.stringify( 작업하고 있는 로드가 다른 패키지의 간단한 wrapper라면, `peerDependency`로써 패키지를 포함할 수 있습니다. 이런 접근은 애플리케이션 개발자가 필요하다면 `package.json`안의 정확한 버전을 지정하도록 해줍니다. -예를 들어, `sass-loader`는 peer dependency와 같이 [`node-sass`를 지정합니다.](https://github.com/webpack-contrib/sass-loader/blob/master/package.json) +예를 들어, `sass-loader`는 peer dependency와 같이 [`node-sass`를 지정합니다.](https://github.com/webpack/sass-loader/blob/main/package.json) ```json { diff --git a/src/content/guides/asset-modules.mdx b/src/content/guides/asset-modules.mdx index 488b3a43d7a..8f7dc97e5d6 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 translators: - keipark related: @@ -23,11 +24,12 @@ webpack 5 이전에는 아래의 로더를 사용하는 것이 일반적이었 - [`url-loader`](https://v4.webpack.js.org/loaders/url-loader/) 파일을 data URI 형식으로 번들에 인라인 추가 할 때 - [`file-loader`](https://v4.webpack.js.org/loaders/file-loader/) 파일을 출력 디렉터리로 내보낼 때 -이러한 로더를 대체하기 위해서 애셋 모듈에는 4개의 새로운 모듈 유형이 추가되었습니다. +이러한 로더를 대체하기 위해서 애셋 모듈에는 5개의 새로운 모듈 유형이 추가되었습니다. - `asset/resource`는 별도의 파일을 내보내고 URL을 추출합니다. 이전에는 `file-loader`를 사용하여 처리할 수 있었습니다. - `asset/inline`은 애셋의 data URI를 내보냅니다. 이전에는 `url-loader`를 사용하여 처리할 수 있었습니다. - `asset/source`는 애셋의 소스 코드를 내보냅니다. 이전에는`raw-loader`를 사용하여 처리할 수 있었습니다. +- `asset/bytes`는 애셋의 [`Uint8Array`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Uint8Array) 뷰를 내보냅니다. - `asset`은 data URI와 별도의 파일 내보내기 중에서 자동으로 선택합니다. 이전에는 애셋 크기 제한이 있는 `url-loader`를 사용했습니다. webpack 5의 애셋 모듈과 함께 이전 애셋 로더(예 :`file-loader`/`url-loader`/`raw-loader`)를 사용할 때 애셋 모듈이 애셋을 중복으로 처리하지 않도록 할 수 있습니다. 이는 애셋의 모듈 유형을 `'javascript/auto'`로 설정하여 적용 가능합니다. @@ -106,7 +108,7 @@ module.exports = { import './publicPath.js'; ``` -## Resource assets +## Resource type **webpack.config.js** @@ -123,9 +125,9 @@ module.exports = { + rules: [ + { + test: /\.png/, -+ type: 'asset/resource' -+ } -+ ] ++ type: 'asset/resource', ++ }, ++ ], + }, }; ``` @@ -156,15 +158,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', + }, + ], }, }; ``` @@ -179,23 +181,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]', ++ }, ++ }, + ], }, }; ``` @@ -208,7 +205,7 @@ module.exports = { **webpack.config.js** -```diff +```js const path = require('path'); module.exports = { @@ -216,37 +213,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(${metroMap})`; // url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDo...vc3ZnPgo=) +block.style.background = `url(${metroMap})`; // url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDo...vc3ZnPgo=) ``` 모든 `.svg` 파일은 data URI로 번들에 삽입됩니다. @@ -278,49 +262,42 @@ module.exports = { + dataUrl: content => { + content = content.toString(); + return svgToMiniDataURI(content); -+ } -+ } - } - ] ++ }, ++ }, + }, + ], }, }; ``` 이제 모든 `.svg` 파일이 `mini-svg-data-uri` 패키지를 통해 인코딩됩니다. -## 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> `import text from './file.txt' with { type: "text" };` 구문을 사용하는 경우 규칙을 추가할 필요가 없습니다. + **src/example.txt** ```text @@ -329,12 +306,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.style.background = `url(${metroMap}); // url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDo...vc3ZnPgo=) -+ block.textContent = exampleText; // 'Hello world' +block.textContent = exampleText; // 'Hello world'; +``` + +Alternative usage: + +**src/index.js** + +```js +import exampleText from './example.txt' with { type: 'text' }; + +block.textContent = exampleText; // 'Hello world'; ``` 모든 `.txt` 파일은 있는 그대로 번들에 삽입됩니다. @@ -343,6 +328,8 @@ Hello world `new URL('./path/to/asset', import.meta.url)`을 사용할 때 webpack은 애셋 모듈도 함께 생성합니다. +T> `const file = new URL('./file.ext', import.meta.url);` 구문을 사용하면 규칙을 추가할 필요가 없습니다. + **src/index.js** ```js @@ -368,7 +355,18 @@ new URL( ); ``` -## General asset type +webpack 5.38.0부터 `new URL()`에서도 [데이터 URL](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs)이 지원됩니다. + +**src/index.js** + +```js +const url = new URL('data:,', import.meta.url); +console.log(url.href === 'data:,'); +console.log(url.protocol === 'data:'); +console.log(url.pathname === ','); +``` + +## Asset type **webpack.config.js** @@ -383,11 +381,11 @@ module.exports = { }, module: { rules: [ - { ++ { + test: /\.txt/, + type: 'asset', - } - ] ++ }, + ], }, }; ``` @@ -405,7 +403,7 @@ module.exports = { entry: './src/index.js', output: { filename: 'main.js', - path: path.resolve(__dirname, 'dist') + path: path.resolve(__dirname, 'dist'), }, module: { rules: [ @@ -414,17 +412,75 @@ module.exports = { type: 'asset', + parser: { + dataUrlCondition: { -+ maxSize: 4 * 1024 // 4kb -+ } -+ } - } - ] ++ maxSize: 4 * 1024, // 4kb ++ }, ++ }, + }, + ], }, }; ``` 또한 [함수를 지정](/configuration/module/#ruleparserdataurlcondition)하여 모듈의 인라인 여부를 결정할 수 있습니다. +## 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> `{ type: "bytes" };` 구문을 사용하여 `./file.ext에서 데이터 가져오기`를 사용하면 규칙을 추가할 필요가 없습니다. + +**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'; +``` + +다른 사용법: + +**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'; +``` + +모든 `.txt` 파일은 그대로 번들에 삽입됩니다. + ## Replacing Inline Loader Syntax Asset Modules 및 Webpack 5 이전에는, 위에 언급한 레거시 로더와 함께 [inline syntax](https://webpack.kr/concepts/loaders/#inline)를 사용할 수 있었습니다. diff --git a/src/content/guides/code-splitting.mdx b/src/content/guides/code-splitting.mdx index 792ccf3a7b5..c81d649bdbb 100644 --- a/src/content/guides/code-splitting.mdx +++ b/src/content/guides/code-splitting.mdx @@ -458,7 +458,7 @@ Webpack이 해당 스크립트의 자체 로드를 시작하기 전에 스크립 - [webpack-chart](https://alexkuz.github.io/webpack-chart/): webpack 통계를 위한 인터렉티브 원형 차트. - [webpack-visualizer](https://chrisbateman.github.io/webpack-visualizer/): 번들을 시각화하고 분석하여 어떤 모듈이 공간을 차지하고 있고 어떤 모듈이 중복될 수 있는지 확인합니다. -- [webpack-bundle-analyzer](https://github.com/webpack-contrib/webpack-bundle-analyzer): 확대/축소 가능한 편리한 인터렉티브 트리 맵으로 번들 콘텐츠를 표현하는 플러그인 및 CLI 유틸리티입니다. +- [webpack-bundle-analyzer](https://github.com/webpack/webpack-bundle-analyzer): 확대/축소 가능한 편리한 인터렉티브 트리 맵으로 번들 콘텐츠를 표현하는 플러그인 및 CLI 유틸리티입니다. - [webpack bundle optimize helper](https://webpack.jakoblind.no/optimize): 이 도구는 번들을 분석하고 번들 크기를 줄이기 위한 실용적인 개선 사항을 제공합니다. - [bundle-stats](https://github.com/bundle-stats/bundle-stats): 번들 보고서(번들 크기, 애셋, 모듈)를 생성하고 서로 다른 빌드 간의 결과를 비교합니다. - [webpack-stats-viewer](https://github.com/moonrailgun/webpack-stats-viewer): Webpack 통계용 빌드가 포함된 플러그인입니다. Webpack 번들 세부에 대한 자세한 정보를 표시합니다. diff --git a/src/content/guides/getting-started.mdx b/src/content/guides/getting-started.mdx index 32e670ed976..8c101ef9aad 100644 --- a/src/content/guides/getting-started.mdx +++ b/src/content/guides/getting-started.mdx @@ -27,6 +27,7 @@ contributors: - d3lm - snitin315 - Etheryen + - zowiebeha translators: - limong --- @@ -202,6 +203,8 @@ T> 프로덕션 번들에 번들로 제공될 패키지를 설치할 때 `npm in ``` +T> 몇 가지 다른 스크립트 로딩 전략이 있습니다. 지연 로딩은 위의 대안 중 하나로, 스크립트를 ``에 통합하고 `defer` 속성을 부여합니다. 이 전략은 문서 파싱과 동시에 외부 스크립트 리소스를 다운로드하고, 파싱이 완료된 후 문서에 나타난 순서대로 스크립트를 실행합니다. 이는 파서가 외부 리소스를 다운로드한 후 동기적으로 실행하기 위해 잠시 멈추는 위의 전략과는 대조적입니다. 이 프로세스에 대해 자세히 알아보려면 MDN의 [`참조 가이드`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/script#async_and_defer)를 참고하세요. + 이 설정에서 `index.js`는 명시적으로 `lodash`가 있어야 하며, 이것을 `_`에 바인딩합니다.(전역 스코프의 오염 없음) 모듈에 필요한 의존성을 명시함으로써 webpack은 이 정보를 사용하여 디펜던시 그래프를 만들 수 있습니다. 그런 다음 그래프를 사용하여 스크립트가 올바른 순서로 실행되는 최적화된 번들을 생성합니다. 그럼 `npx webpack`을 실행해 보겠습니다. 이 스크립트는 `src/index.js`를 [엔트리 포인트](/concepts/entry-points)로 사용하고 [output](/concepts/output)으로 `dist/main.js`을 생성합니다. `npx` 명령어는 Node 8.2/npm 5.2.0 이상 버전에서 제공되며, 처음에 설치했던 webpack 패키지의 webpack 바이너리(`./node_modules/.bin/webpack`)를 실행합니다. diff --git a/src/content/guides/hot-module-replacement.mdx b/src/content/guides/hot-module-replacement.mdx index 25f3d2742c6..7f6cb4611d3 100644 --- a/src/content/guides/hot-module-replacement.mdx +++ b/src/content/guides/hot-module-replacement.mdx @@ -42,7 +42,7 @@ W> **HMR**은 프로덕션용이 아니므로 개발용으로만 사용해야 `webpack-dev-server` v4.0.0부터 Hot Module Replacement가 기본적으로 활성화되어 있습니다. -T> `webpack-dev-server` 대신 `webpack-dev-middleware`를 사용한다면 [`webpack-hot-middleware`](https://github.com/webpack-contrib/webpack-hot-middleware) 패키지를 사용하여 커스텀 서버 또는 애플리케이션에서 HMR을 활성화하세요. +T> `webpack-dev-server` 대신 `webpack-dev-middleware`를 사용한다면 [`webpack-hot-middleware`](https://github.com/webpack/webpack-hot-middleware) 패키지를 사용하여 커스텀 서버 또는 애플리케이션에서 HMR을 활성화하세요. **webpack.config.js** @@ -226,7 +226,7 @@ const server = new webpackDevServer({ hot: false, client: false }, compiler); [`webpack-dev-server` Node.js API 전체 문서](/api/webpack-dev-server/)를 참고하세요. -T> [`webpack-dev-middleware` 사용](/guides/development/#using-webpack-dev-middleware)의 경우 [`webpack-hot-middleware`](https://github.com/webpack-contrib/webpack-hot-middleware) 패키지를 사용하여 커스텀 개발 서버에서 HMR을 활성화합니다. +T> [`webpack-dev-middleware` 사용](/guides/development/#using-webpack-dev-middleware)의 경우 [`webpack-hot-middleware`](https://github.com/webpack/webpack-hot-middleware) 패키지를 사용하여 커스텀 개발 서버에서 HMR을 활성화합니다. ## Gotchas diff --git a/src/content/guides/web-workers.mdx b/src/content/guides/web-workers.mdx index 45cb91bc879..8b50d5ff47d 100644 --- a/src/content/guides/web-workers.mdx +++ b/src/content/guides/web-workers.mdx @@ -54,6 +54,31 @@ self.onmessage = ({ data: { question } }) => { }; ``` +## Set a public path from a variable + +변수에서 `__webpack_public_path__`를 설정하고 `publicPath`를 `auto`로 설정하면, 워커 청크는 별도의 런타임을 갖게 되고, Webpack 런타임은 `publicPath`를 자동으로 계산된 공개 경로로 설정합니다. 이는 예상과 다를 수 있습니다. + +이 문제를 해결하려면 워커 코드 내에서 `__webpack_public_path__`를 설정해야 합니다. 예시는 다음과 같습니다. + +**worker.js** + +```js +self.onmessage = ({ data: { publicPath, ...otherData } }) => { + if (publicPath) { + __webpack_public_path__ = publicPath; + } + + // 나머지 워커 코드 +}; +``` + +**app.js** + +```js +const worker = new Worker(new URL('./worker.js', import.meta.url)); +worker.postMessage({ publicPath: window.__MY_GLOBAL_PUBLIC_PATH_VAR__ }); +``` + ## Node.js 비슷한 구문이 12.17.0 이상의 Node.js에서 지원됩니다. diff --git a/src/content/index.mdx b/src/content/index.mdx index 752553e3345..8e1f4009965 100644 --- a/src/content/index.mdx +++ b/src/content/index.mdx @@ -4,7 +4,7 @@ sort: -1 --- import FirstLeft from '../components/Splash/first/left.mdx'; -import FirstRigth from '../components/Splash/first/right.mdx'; +import FirstRight from '../components/Splash/first/right.mdx'; import SecondLeft from '../components/Splash/second/left.mdx'; import SecondRight from '../components/Splash/second/right.mdx'; @@ -15,7 +15,7 @@ import SecondRight from '../components/Splash/second/right.mdx';
- +
diff --git a/src/content/loaders/index.mdx b/src/content/loaders/index.mdx index 5d0bd76ebe4..8bc3ed4c631 100644 --- a/src/content/loaders/index.mdx +++ b/src/content/loaders/index.mdx @@ -21,7 +21,6 @@ Webpack의 [loaders](/concepts/loaders)를 사용하면 파일을 전처리 할 ## Files -- [`val-loader`](/loaders/val-loader)는 코드를 모듈로 실행하고 JS 코드로 내보낼지 고려합니다. - [`ref-loader`](https://www.npmjs.com/package/ref-loader)는 수동으로 파일 간의 의존성을 생성합니다. ## JSON @@ -49,7 +48,7 @@ Webpack의 [loaders](/concepts/loaders)를 사용하면 파일을 전처리 할 - [`handlebars-loader`](https://github.com/pcardune/handlebars-loader)는 Handlebars를 HTML로 컴파일합니다. - [`markup-inline-loader`](https://github.com/asnowwolf/markup-inline-loader)는 인라인 SVG/MathML 파일을 HTML로 변환합니다. 아이콘 폰트를 적용하거나 SVG에 CSS 애니메이션을 적용할 때 유용합니다. - [`twig-loader`](https://github.com/zimmo-be/twig-loader)는 Twig 템플릿을 컴파일하고 함수를 반환합니다. -- [`remark-loader`](https://github.com/webpack-contrib/remark-loader)는 빌트인 이미지 해상도로 `remark`를 통해 마크다운을 로드합니다. +- [`remark-loader`](https://github.com/webpack/remark-loader)는 빌트인 이미지 해상도로 `remark`를 통해 마크다운을 로드합니다. ## Styling diff --git a/src/content/migrate/3.mdx b/src/content/migrate/3.mdx index ba6d0bf82e0..fd4c0aa5b49 100644 --- a/src/content/migrate/3.mdx +++ b/src/content/migrate/3.mdx @@ -267,7 +267,7 @@ webpack, node.js 및 browserify 간의 [환경차이를 없애기 위해 그렇 ## ExtractTextWebpackPlugin - breaking change -[ExtractTextPlugin](https://github.com/webpack-contrib/extract-text-webpack-plugin) 이 webpack 2와 함께 작동하려면 버전 2가 필요합니다. +[ExtractTextPlugin](https://github.com/webpack/extract-text-webpack-plugin) 이 webpack 2와 함께 작동하려면 버전 2가 필요합니다. `npm install --save-dev extract-text-webpack-plugin` diff --git a/src/content/plugins/eval-source-map-dev-tool-plugin.mdx b/src/content/plugins/eval-source-map-dev-tool-plugin.mdx index 6fb8d754cdd..452f47da68c 100644 --- a/src/content/plugins/eval-source-map-dev-tool-plugin.mdx +++ b/src/content/plugins/eval-source-map-dev-tool-plugin.mdx @@ -39,10 +39,15 @@ new webpack.EvalSourceMapDevToolPlugin(options); (pathData: PathData, assetInfo?: AssetInfo) => string; ``` -- `moduleFilenameTemplate` (`string`): [`output.devtoolModuleFilenameTemplate`](/configuration/output/#outputdevtoolmodulefilenametemplate)을 참조하세요. -- `module` (`boolean`): 로더가 소스맵을 생성해야 하는지 여부를 나타냅니다(기본값은 `true`). +- `ignoreList` (`string|RegExp|array`): 소스 맵에서 지정된 값과 일치하는 소스 파일을 무시할지 여부를 결정합니다. +- `module` (`boolean`): 로더가 소스 맵을 생성해야 하는지 여부를 나타냅니다(기본값은 `true`). +- `moduleFilenameTemplate` (`string`): [`output.devtoolModuleFilenameTemplate`](/configuration/output/#outputdevtoolmodulefilenametemplate)을 참고하세요. - `columns` (`boolean`): 열 매핑을 사용해야 하는지 여부를 나타냅니다(기본값은 `true`). -- `protocol` (`string`): 사용자가 기본 프로토콜(`webpack-internal://`)을 오버라이드 할 수 있습니다. +- `protocol` (`string`): 사용자가 기본 프로토콜(`webpack-internal://`)을 재정의할 수 있도록 합니다. +- `namespace` (`string`): DevTools에서 여러 WebPack 루트를 허용하는 네임스페이스 접두사입니다. [`output.devtoolNamespace`](/configuration/output/#outputdevtoolnamespace)를 참고하세요. +- `noSources = false` (`boolean`): 소스 파일 콘텐츠가 소스 맵에 포함되지 않도록 합니다. +- `sourceRoot` (`string`): 소스 맵의 `sourceRoot` 속성에 사용자 지정 값을 제공합니다. +- `debugIds` (`boolean`): `true`로 설정하면 소스 맵과 소스 맵에 고유 ID가 생성되어 여러 빌드에서 소스 맵을 식별하는 데 도움이 됩니다. 자세한 내용은 [TC39 소스 맵 디버그 ID 제안](https://github.com/tc39/ecma426/blob/main/proposals/debug-id.md)을 참고하세요. T> `module` 및/또는 `columns`를 `false`로 설정하면 소스맵이 덜 정확해지지만, 컴파일 성능은 크게 향상됩니다. diff --git a/src/content/plugins/index.mdx b/src/content/plugins/index.mdx index 22e9224d0eb..c7b8eb6288a 100644 --- a/src/content/plugins/index.mdx +++ b/src/content/plugins/index.mdx @@ -22,7 +22,6 @@ Webpack에는 많은 플러그인 인터페이스가 있습니다. Webpack 자 | ------------------------------------------------------------------------------- | ----------------------------------------------------------------------------- | | [`BannerPlugin`](/plugins/banner-plugin) | 생성된 청크의 상단에 배너 추가 | | [`ChunksWebpackPlugin`](/plugins/chunks-webpack-plugin/) | 번들을 제공하기 위해 엔트리 포인트 및 청크 관계가 포함된 HTML 파일 생성 | -| [`CommonsChunkPlugin`](/plugins/commons-chunk-plugin) | 청크 간에 공유되는 공통 모듈 추출 | | [`CompressionWebpackPlugin`](/plugins/compression-webpack-plugin) | Content-Encoding으로 제공할 압축된 버전의 애셋 준비 | | [`ContextReplacementPlugin`](/plugins/context-replacement-plugin) | `require` 표현식의 유추된 컨텍스트 재정의 | | [`CopyWebpackPlugin`](/plugins/copy-webpack-plugin) | 개별 파일 또는 전체 디렉터리를 빌드 디렉터리에 복사 | @@ -38,7 +37,6 @@ Webpack에는 많은 플러그인 인터페이스가 있습니다. Webpack 자 | [`MiniCssExtractPlugin`](/plugins/mini-css-extract-plugin) | CSS파일을 필요로하는 JS파일만 CSS파일을 생성 | | [`NoEmitOnErrorsPlugin`](/configuration/optimization/#optimizationemitonerrors) | 컴파일 오류가 있는 경우 방출 단계를 건너뜀 | | [`NormalModuleReplacementPlugin`](/plugins/normal-module-replacement-plugin) | 정규식과 일치하는 리소스 교체 | -| [`NpmInstallWebpackPlugin`](/plugins/install-webpack-plugin) | 개발단계에서 누락된 디펜던시 자동 설치 | | [`ProgressPlugin`](/plugins/progress-plugin) | 컴파일 진행률 보고 | | [`ProvidePlugin`](/plugins/provide-plugin) | import 또는 require 사용없이 모듈 사용 | | [`SourceMapDevToolPlugin`](/plugins/source-map-dev-tool-plugin) | 소스맵을 세밀하게 제어 | diff --git a/src/content/plugins/source-map-dev-tool-plugin.mdx b/src/content/plugins/source-map-dev-tool-plugin.mdx index 4943f8d4153..74eda1df2ce 100644 --- a/src/content/plugins/source-map-dev-tool-plugin.mdx +++ b/src/content/plugins/source-map-dev-tool-plugin.mdx @@ -38,16 +38,17 @@ new webpack.SourceMapDevToolPlugin(options); (pathData: PathData, assetInfo?: AssetInfo) => string; ``` -- `moduleFilenameTemplate` (`string`): [`output.devtoolModuleFilenameTemplate`](/configuration/output/#outputdevtoolmodulefilenametemplate)를 참고하세요. +- `moduleFilenameTemplate` (`string`): [`output.devtoolModuleFilenameTemplate`](/configuration/output/#outputdevtoolmodulefilenametemplate)을 참고하세요. - `fallbackModuleFilenameTemplate` (`string`): 위 링크를 참고하세요. -- `namespace` (`string`): [`output.devtoolNamespace`](/configuration/output/#outputdevtoolnamespace)를 참고하세요. -- `module = true` (`boolean`): 로더가 소스맵을 생성해야 하는지 여부를 나타냅니다. +- `ignoreList` (`string|RegExp|array`): 소스 맵에서 지정된 값과 일치하는 소스 파일을 무시할지 여부를 결정합니다. +- `module = true` (`boolean`): 로더가 소스 맵을 생성해야 하는지 여부를 나타냅니다. - `columns = true` (`boolean`): 열 매핑을 사용해야 하는지 여부를 나타냅니다. -- `noSources = false` (`boolean`): 소스의 내용이 소스맵에 포함되지 않도록 합니다. -- `publicPath` (`string`): public path 접두사와 함께 절대 URL을 내보냅니다. (예: `https://example.com/project/`) -- `fileContext` (`string`): 이 디렉터리를 기준으로 `[file]` 인수를 만듭니다. -- `sourceRoot` (`string`): 소스맵의 `sourceRoot` 프로퍼티에 커스텀 값을 제공합니다. -- `debugIds` (`boolean`): `true`이면 소스 및 소스맵에서 고유한 ID를 발행하여 여러 빌드에서 소스 맵을 식별하는 것이 간소화됩니다. 자세한 내용은 [TC39 소스맵 디버깅 ID 제안서](https://github.com/tc39/ecma426/blob/main/proposals/debug-id.md)를 참고하세요. +- `namespace` (`string`): DevTools에서 여러 WebPack 루트를 허용하는 네임스페이스 접두사입니다. [`output.devtoolNamespace`](/configuration/output/#outputdevtoolnamespace)를 참고하세요. +- `noSources = false` (`boolean`): 소스 파일 콘텐츠가 소스 맵에 포함되지 않도록 합니다. +- `publicPath` (`string`): 공개 경로 접두사가 있는 절대 URL을 생성합니다(예: `https://example.com/project/`). +- `fileContext` (`string`): `[file]` 인수를 이 디렉터리를 기준으로 합니다. +- `sourceRoot` (`string`): SourceMap의 `sourceRoot` 속성에 사용자 지정 값을 제공합니다. +- `debugIds` (`boolean`): `true`로 설정하면 소스 및 소스맵에서 고유 ID가 생성되어 여러 빌드에서 소스맵을 식별하는 데 도움이 됩니다. 자세한 내용은 [TC39 소스맵 디버그 ID 제안](https://github.com/tc39/ecma426/blob/main/proposals/debug-id.md)을 참고하세요. `fileContext` 옵션은 `../../`가 절대 `[url]`에 나타나지 않도록 상위 디렉터리에 소스맵을 저장하려는 경우에 유용합니다. diff --git a/src/mdx-components.js b/src/mdx-components.js index 0a27d381804..c6a120cec2d 100644 --- a/src/mdx-components.js +++ b/src/mdx-components.js @@ -1,6 +1,7 @@ import Badge from './components/Badge/Badge'; import LinkComponent from './components/mdxComponents/Link'; import StackBlitzPreview from './components/StackBlitzPreview/StackBlitzPreview'; +import CodeBlockWithCopy from './components/CodeBlockWithCopy/CodeBlockWithCopy'; /** @returns {import('mdx/types.js').MDXComponents} */ export function useMDXComponents() { @@ -8,5 +9,6 @@ export function useMDXComponents() { a: LinkComponent, Badge: Badge, StackBlitzPreview: StackBlitzPreview, + pre: CodeBlockWithCopy, }; } diff --git a/src/remark-plugins/remark-cleanup-readme/index.test.mjs b/src/remark-plugins/remark-cleanup-readme/index.test.mjs index 1d8bd0c2e21..bedbf16e46a 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 eb92f36a5bb..3989c4f0a6c 100644 --- a/src/utilities/fetch-package-repos.mjs +++ b/src/utilities/fetch-package-repos.mjs @@ -16,7 +16,7 @@ const stat = promisify(fs.stat); const fetch = { loaders: [ { - organization: 'webpack-contrib', + organization: 'webpack', suffixes: ['-loader'], hides: excludedLoaders, }, @@ -24,7 +24,7 @@ const fetch = { ], plugins: [ { - organization: 'webpack-contrib', + organization: 'webpack', suffixes: ['-webpack-plugin', '-extract-plugin'], hides: excludedPlugins, }, @@ -56,6 +56,8 @@ async function main() { const repos = await paginate(organization); + console.log(repos); + return repos .map((repo) => repo.full_name) .filter((name) => suffixes.some((suffix) => name.endsWith(suffix))) diff --git a/src/utilities/process-readme.test.mjs b/src/utilities/process-readme.test.mjs index 77311324ccb..45c6409be81 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 = ` diff --git a/yarn.lock b/yarn.lock index 436f8551ba1..2317708acad 100644 --- a/yarn.lock +++ b/yarn.lock @@ -9442,9 +9442,9 @@ mimic-function@^5.0.0: integrity sha512-VP79XUPxV2CigYP3jWwAUFSku2aKqBH7uTAapFWCBqutsbmDo96KY5o8uh6U+/YSIn5OxJnXp73beVkpqMIGhA== min-document@^2.19.0: - version "2.19.0" - resolved "https://registry.yarnpkg.com/min-document/-/min-document-2.19.0.tgz#7bd282e3f5842ed295bb748cdd9f1ffa2c824685" - integrity sha1-e9KC4/WELtKVu3SM3Z8f+iyCRoU= + version "2.19.2" + resolved "https://registry.yarnpkg.com/min-document/-/min-document-2.19.2.tgz#f95db44639eaae3ac8ea85ae6809ae85ff7e3b81" + integrity sha512-8S5I8db/uZN8r9HSLFVWPdJCvYOejMcEC82VIzNUc6Zkklf/d1gg2psfE79/vyhWOj4+J8MtwmoOz3TmvaGu5A== dependencies: dom-walk "^0.1.0" @@ -9641,9 +9641,9 @@ node-emoji@^2.1.3: skin-tone "^2.0.0" node-forge@^1: - version "1.3.1" - resolved "https://registry.yarnpkg.com/node-forge/-/node-forge-1.3.1.tgz#be8da2af243b2417d5f646a770663a92b7e9ded3" - integrity sha512-dPEtOeMvF9VMcYV/1Wb8CPoVAXtp6MKMlcbAt4ddqmGqUJ6fQZFXkNZNkNlfevtNkGtaSoXf/vNNNSvgrdXwtA== + version "1.3.2" + resolved "https://registry.yarnpkg.com/node-forge/-/node-forge-1.3.2.tgz#d0d2659a26eef778bf84d73e7f55c08144ee7750" + integrity sha512-6xKiQ+cph9KImrRh0VsjH2d8/GXA4FIMlgU4B757iI1ApvcyA9VlouP0yZJha01V+huImO+kKMU7ih+2+E14fw== node-int64@^0.4.0: version "0.4.0"