webpack.config.js
1.환경 설정
webpackEnv 변수에 따라 development 또는 production 환경이 결정되며, 환경에 따라 번들링 및 최적화 방식이 달라집니다.
환경 변수를 로딩하는 getClientEnvironment
const env = getClientEnvironment(paths.publicUrlOrPath.slice(0, -1));shouldUseSourceMap 설정
소스 맵을 생성할지 여부를 결정하는 변수입니다. 소스 맵은 개발 시 디버깅을 위해 중요한 역할을 하지만, 프로덕션 환경에서는 불필요하게 리소스를 소모할 수 있어 이 설정을 통해 소스 맵 생성 여부를 제어합니다.
const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== 'false';
devtool: isEnvProduction
? shouldUseSourceMap
? 'source-map' // 프로덕션 모드에서 source-map을 생성
: false // 프로덕션 모드에서 source-map을 생성하지 않음
: isEnvDevelopment && 'cheap-module-source-map' // 개발 모드에서는 가벼운 소스 맵 사용
- source-map: 원본 코드를 정확하게 매핑하지만, 파일 크기가 커져 빌드와 로딩 속도가 느려질 수 있습니다.
- cheap-module-source-map: 개발 모드에서 사용하며, 상대적으로 빠르지만 CSS나 일부 ES6 기능에 대한 정확한 매핑은 제공하지 않습니다.
사용 목적: 개발자는 빌드된 코드를 디버깅할 때 원본 소스 코드와의 대응 관계를 알기 어려운데, 소스 맵은 이 문제를 해결합니다. 특히 프로덕션에서는 필요하지 않지만, 개발 환경에서는 디버깅을 위해 꼭 필요하므로 환경에 따라 다르게 설정하는 경우가 많습니다.
shouldInlineRuntimeChunk 설정
이 설정은 작은 크기의 웹팩 런타임 스크립트를 인라인으로 포함할지 여부를 결정합니다. 인라인 스크립트는 웹 요청을 줄이지만, 경우에 따라 성능에 영향을 줄 수 있으므로 환경에 따라 설정합니다.
const shouldInlineRuntimeChunk = process.env.INLINE_RUNTIME_CHUNK !== 'false';웹팩 런타임 스크립트
웹팩 런타임 스크립트는 웹팩에서 번들된 모듈을 관리하고 로드하기 위해 생성하는 스크립트입니다. 이 스크립트는 번들된 모듈 간의 관계를 유지하고, 애플리케이션이 필요할 때 올바른 모듈을 호출할 수 있게 해줍니다.
isEnvProduction &&
shouldInlineRuntimeChunk &&
new InlineChunkHtmlPlugin(HtmlWebpackPlugin, [/runtime-.+[.]js/]),- 런타임 스크립트를 인라인 처리하는 이유:
1. 네트워크 요청 절감: 런타임 코드가 크지 않기 때문에 HTML 파일에 인라인으로 포함하면 추가 HTTP 요청을 줄여 성능이 향상될 수 있습니다.- 캐싱 전략 개선: 코드의 변경 사항이 런타임 코드에 영향을 줄 때 캐시를 쉽게 무효화할 수 있습니다.
단점: HTML 파일의 크기가 커질 수 있어 로딩 시간이 길어질 수 있습니다. 상황에 따라 별도 파일로 분리하는 것이 나을 때도 있습니다.
emitErrorsAsWarnings와 disableESLintPlugin 설정
const emitErrorsAsWarnings = process.env.ESLINT_NO_DEV_ERRORS === 'true';
const disableESLintPlugin = 'true'; // 직접 true로 설정- emitErrorsAsWarnings: 개발 환경에서 ESLint 에러를 경고로 처리하여 빌드에 영향이 없도록 설정할지 결정합니다.
- disableESLintPlugin: true로 설정되어 ESLint 검사를 비활성화하는 플래그입니다. false로 설정하면 ESLint 검사 플러그인이 활성화됩니다.
TypeScript 및 Tailwind CSS
const useTypeScript = fs.existsSync(paths.appTsConfig);
const useTailwind = fs.existsSync(path.join(paths.appPath, 'tailwind.config.js'));- useTypeScript: TypeScript 설정 파일(tsconfig.json)이 있는지 확인하여 TypeScript 관련 로더와 플러그인을 추가합니다.
- useTailwind: tailwind.config.js 파일이 존재하는지 확인하여 Tailwind CSS 관련 설정을 추가합니다.
react/jsx-runtime (JSX 트랜스폼)
JSX 트랜스폼은 React 17부터 도입된 기능으로, React.createElement를 직접 호출하지 않고도 JSX 문법을 사용할 수 있게 해줍니다. 이전에는 JSX 구문을 사용할 때마다 React 객체를 항상 import해야 했지만, 이 트랜스폼이 적용되면 JSX가 자동으로 React를 감지하여 호출합니다.
const hasJsxRuntime = (() => {
if (process.env.DISABLE_NEW_JSX_TRANSFORM === 'true') {
return false;
}
try {
require.resolve('react/jsx-runtime');
return true;
} catch (e) {
return false;
}
})();
- 간결한 코드: React를 직접 import할 필요가 없어져 불필요한 코드를 줄일 수 있습니다.
- 성능 향상: 더 적은 코드로 동일한 결과를 얻을 수 있어 빌드 최적화에 유리합니다.
- 미래 확장성: React의 기능들이 더 모듈화되고, JSX 구문이 점차 독립적으로 사용될 수 있는 가능성을 제공합니다.
2.경로와 환경 변수 로딩
프로젝트 경로와 환경 변수를 설정하여 다른 파일에서 이 설정들을 불러와 사용할 수 있도록 합니다.
3.스타일 로더 설정
CSS 및 SASS 파일의 로딩과 처리를 위해 개발 모드에서는 style-loader를, 프로덕션 모드에서는 MiniCssExtractPlugin.loader를 사용합니다.
4.파일 및 자산 로더 설정
이미지 파일, SVG, JS 파일 등에 대해 특정 크기 이상은 URL로, 그 외는 Data URL로 처리하여 요청 횟수를 줄이고 최적화를 합니다.
5.플러그인 사용
다양한 플러그인을 활용해 빌드를 최적화하고 성능을 향상합니다. 예를 들어, HTML 파일에 필요한 리소스를 자동으로 주입하는 HtmlWebpackPlugin, 번들 최적화를 위한 TerserPlugin, 그리고 CssMinimizerPlugin 등이 포함됩니다.
6.빌드 최적화
프로덕션 환경에서 코드 압축, 난독화 등을 통해 번들 크기를 줄이고, 개발 환경에서는 빠른 리빌드를 위한 캐싱 전략을 사용합니다.
7.출력 설정
빌드 후 생성된 파일의 저장 위치, 파일명 포맷 등을 설정하여 빌드된 파일이 올바르게 배포될 수 있도록 구성합니다.
